Componente Diagram — sgcHTML

De un vistazo

TsgcHTMLComponent_Diagram

Un componente de diagrama de flujo que genera un <svg> en línea y autónomo. Añade nodos en coordenadas X/Y, conéctalos con flechas y luego lee la propiedad HTML.

Clase del componente

TsgcHTMLComponent_Diagram

Genera

Nodos y flechas <svg> en línea

Familia

Gráficos y Visualización

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Añade nodos, conéctalos, renderízalo

Llama a AddNode para cada caja (con su posición, color y forma), conéctalas con Connect y luego lee HTML.

uses
  sgcHTML_Enums, sgcHTML_Component_Diagram;

var
  oDiagram: TsgcHTMLComponent_Diagram;
begin
  oDiagram := TsgcHTMLComponent_Diagram.Create(nil);
  try
    oDiagram.DiagramWidth := 600;
    oDiagram.DiagramHeight := 300;

    oDiagram.AddNode('start', 'Start', 240, 20, hcSuccess, nsCircle);
    oDiagram.AddNode('work', 'Process', 240, 120, hcPrimary, nsRoundedRect);
    oDiagram.AddNode('done', 'Finish', 240, 220, hcDanger, nsDiamond);

    oDiagram.Connect('start', 'work', 'begin');
    oDiagram.Connect('work', 'done', 'commit');

    WebModule.Response := oDiagram.HTML;   // inline <svg> flow diagram
  finally
    oDiagram.Free;
  end;
end;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Diagram.hpp

TsgcHTMLComponent_Diagram *oDiagram = new TsgcHTMLComponent_Diagram(NULL);
try
{
  oDiagram->DiagramWidth = 600;
  oDiagram->DiagramHeight = 300;

  oDiagram->AddNode("start", "Start", 240, 20, hcSuccess, nsCircle);
  oDiagram->AddNode("work", "Process", 240, 120, hcPrimary, nsRoundedRect);
  oDiagram->AddNode("done", "Finish", 240, 220, hcDanger, nsDiamond);

  oDiagram->Connect("start", "work", "begin");
  oDiagram->Connect("work", "done", "commit");

  String html = oDiagram->HTML;   // inline <svg> flow diagram
}
__finally
{
  delete oDiagram;
}

using esegece.sgcWebSockets;

var diagram = new TsgcHTMLComponent_Diagram();
diagram.DiagramWidth = 600;
diagram.DiagramHeight = 300;

diagram.AddNode("start", "Start", 240, 20, TsgcHTMLColor.hcSuccess, TsgcHTMLDiagramNodeShape.nsCircle);
diagram.AddNode("work", "Process", 240, 120, TsgcHTMLColor.hcPrimary, TsgcHTMLDiagramNodeShape.nsRoundedRect);
diagram.AddNode("done", "Finish", 240, 220, TsgcHTMLColor.hcDanger, TsgcHTMLDiagramNodeShape.nsDiamond);

diagram.Connect("start", "work", "begin");
diagram.Connect("work", "done", "commit");

string html = diagram.HTML;   // inline <svg> flow diagram

Referencia

Propiedades y métodos clave

Los miembros que más utilizarás.

Nodos

Nodes (TsgcHTMLDiagramNodes) contiene las cajas; cada TsgcHTMLDiagramNode expone NodeID, Text, X, Y, Width, Height, Color y Shape.

Añadir un nodo

AddNode(aID, aText, aX, aY, aColor, aShape) añade un nodo y lo devuelve; aColor es un TsgcHTMLColor y aShape un TsgcHTMLDiagramNodeShape.

Formas

TsgcHTMLDiagramNodeShape ofrece nsRectangle, nsRoundedRect, nsCircle y nsDiamond.

Conexiones

Connections (TsgcHTMLDiagramConnections) contiene las flechas; cada TsgcHTMLDiagramConnection tiene FromNode, ToNode, Label_ y Color.

Conectar nodos

Connect(aFromID, aToID, aLabel_) dibuja una flecha etiquetada entre dos nodos referenciados por su NodeID.

Lienzo y salida

DiagramWidth, DiagramHeight y DiagramID dimensionan e identifican el SVG; HTML devuelve el <svg> en línea con las flechas dibujadas detrás de los nodos.

Recursos

Sigue explorando

	Todos los componentes de sgcHTMLExplora la matriz de características completa de más de 60 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con todo el código fuente.	Abrir

Diagram