Diagram
TsgcHTMLComponent_Diagram — Delphi, C++ Builder 및 .NET에서 노드를 고정 좌표에 배치하고 레이블이 있는 화살표로 연결하여 노드-화살표 흐름도를 인라인 SVG로 렌더링합니다.
TsgcHTMLComponent_Diagram — Delphi, C++ Builder 및 .NET에서 노드를 고정 좌표에 배치하고 레이블이 있는 화살표로 연결하여 노드-화살표 흐름도를 인라인 SVG로 렌더링합니다.
독립적인 인라인 <svg>를 내보내는 순서도 컴포넌트입니다. X/Y 좌표에 노드를 추가하고, 화살표로 연결한 다음, HTML 속성을 읽습니다.
각 박스에 대해 AddNode를 호출하고(위치, 색상 및 모양 포함), Connect로 연결한 다음, 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가장 자주 사용하게 되는 멤버.
Nodes(TsgcHTMLDiagramNodes)는 박스를 담습니다. 각 TsgcHTMLDiagramNode는 NodeID, Text, X, Y, Width, Height, Color 및 Shape를 제공합니다.
AddNode(aID, aText, aX, aY, aColor, aShape)는 노드를 추가하고 반환합니다. aColor는 TsgcHTMLColor, aShape는 TsgcHTMLDiagramNodeShape입니다.
TsgcHTMLDiagramNodeShape은 nsRectangle, nsRoundedRect, nsCircle 및 nsDiamond를 제공합니다.
Connections(TsgcHTMLDiagramConnections)는 화살표를 담습니다. 각 TsgcHTMLDiagramConnection은 FromNode, ToNode, Label_ 및 Color를 갖습니다.
Connect(aFromID, aToID, aLabel_)는 NodeID로 참조되는 두 노드 사이에 레이블이 있는 화살표를 그립니다.
DiagramWidth, DiagramHeight 및 DiagramID가 SVG의 크기를 정하고 식별합니다. HTML은 노드 뒤에 화살표가 그려진 인라인 <svg>를 반환합니다.