流程图控件GoJS教程：节点上的链接连接点（上）

可以灵活地精确控制链接连接到节点的方式和位置。在前面的示例中，链接始终在节点的边缘结束。但是，您可以在链接终止的节点上指定Spot。

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

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

GoJS最新试用版

节点上的链接连接点

可以灵活地精确控制链接连接到节点的方式和位置。在前面的示例中，链接始终在节点的边缘结束。但是，您可以在链接终止的节点上指定Spot。

非矩形节点

当节点不具有矩形形状时，默认情况下，链接将在指向节点中心的线与节点边缘相交的地方结束。

这是一个演示-拖动其中一个节点，观察链接如何始终连接到最近的交叉点或节点的中心。该示例在链接的两端都包括箭头，以明确表明链接路由实际上恰好在节点的边缘结束。

  diagram.nodeTemplate =    $(go.Node, "Auto",      { width: 90, height: 90,        selectionAdorned: false },      new go.Binding("location", "loc", go.Point.parse),      $(go.Shape, "FivePointedStar", { fill: "lightgray" }),      $(go.TextBlock,        new go.Binding("text", "key"))    );   diagram.linkTemplate =    $(go.Link,      $(go.Shape),      $(go.Shape,   // the "from" end arrowhead        { fromArrow: "Chevron" }),      $(go.Shape,   // the "to" end arrowhead        { toArrow: "StretchedDiamond", fill: "red" })    );   var nodeDataArray = [    { key: "Alpha", loc: "0 0" },    { key: "Beta", loc: "100 50" }  ];  var linkDataArray = [    { from: "Alpha", to: "Beta" }  ];  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

标签：