流程图控件GoJS教程：节点中的端口

尽管您可以控制链接在节点上的连接位置（在特定位置，沿着一个或多个侧面或在与边缘的相交处），但是有时您希望在链接上使用不同的逻辑和图形位置应该连接。

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

GoJS现已更新至最新版本2.1发布，添加了动画功能，修复了一些bug，增强用户体验，赶快下载试试吧~

GoJS最新试用版

节点中的端口

尽管您可以控制链接在节点上的连接位置（在特定位置，沿着一个或多个侧面或在与边缘的相交处），但是有时您希望在链接上使用不同的逻辑和图形位置应该连接。链接可以连接的元素称为 端口。节点中可以有任意数量的端口。默认情况下，只有一个端口，即整个节点，这导致将整个节点用作端口的效果，如您在所有前面的示例中所看到的。

要声明Node中的特定元素是端口，请将GraphObject.portId属性设置为字符串。请注意，与端口或链接相关的属性可以应用于节点的可视树中的任何元素，这就是为什么它们是GraphObject而不是Node的属性的原因。

类似于端口的GraphObjects只能位于Node或Group中，而不能位于Link或Adornment或简单Part中。因此，没有理由尝试在Link中的任何对象上设置GraphObject.portId。

单端口

在许多情况下，您想考虑与整个节点在逻辑上相关的链接，但是您不希望链接到整个节点。在这种情况下，每个节点只有一个端口，但是您不希望整个节点都充当一个端口。

例如，考虑当整个节点以一种通用方式充当端口时，链路如何连接到节点。该GraphObject.fromSpot和GraphObject.toSpot是在双方的中段。因为整个节点的高度都包含文本标签，所以边的中间不是“图标”的中间，在这种情况下，该“图标”是一个圆。

  diagram.nodeTemplate =    $(go.Node, "Vertical",      { fromSpot: go.Spot.Right, toSpot: go.Spot.Left },   // port properties on the node      $(go.Shape, "Ellipse",        { width: 30, height: 30, fill: "green" }),      $(go.TextBlock,        { font: "20px sans-serif" },        new go.Binding("text", "key"))    );   var nodeDataArray = [    { key: "Alpha" },    { key: "Beta" }  ];  var linkDataArray = [    { from: "Alpha", to: "Beta" }  ];  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

标签：