Diagram 组件 — sgcHTML

概览

TsgcHTMLComponent_Diagram

一个流程图组件，发出自包含的内联 <svg>。在 X/Y 坐标处添加节点，用箭头将它们连接起来，然后读取 HTML 属性。

组件类

TsgcHTMLComponent_Diagram

渲染为

内联 <svg> 节点和箭头

家族

图表与可视化

语言

Delphi, C++ Builder, .NET

快速入门

添加节点、连接它们、渲染它

为每个框调用 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>，箭头绘制在节点后面。

资源

继续探索

	所有 sgcHTML 组件浏览 60 多个组件的完整功能矩阵。	打开
	下载免费试用版30 天试用版附带 60.HTML 演示项目。	打开
	价格Single、Team 和 Site 授权，均含完整源代码。	打开

Diagram