流程图控件GoJS教程：在链接上添加注释或修饰（下）

GoJS是一款功能强大，快速且轻量级的流程图控件。本教程将为您介绍在链接上添加注释或修饰。

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

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

GoJS最新试用版

链接标签segmentOffset和alignmentFocus

给定标签对象的位置有两种方法，可以给定在由线段索引和小数距离指定的链接线段上的特定点的标签对象的位置。

所述GraphObject.segmentOffset属性控制，其中相对于所述点由所述确定的链路段对象位置GraphObject.segmentIndex和GraphObject.segmentFraction性质。偏移不是点的简单偏移，而是根据该链接段的角度旋转的。Y偏移量的正值可将标签元素移向链接的右侧，如沿链接方向所示。当然，Y偏移的负值会将其移向左侧。

  diagram.nodeTemplate =    $(go.Node, "Auto",      new go.Binding("location", "loc", go.Point.parse),      $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),      $(go.TextBlock, { margin: 5 },        new go.Binding("text", "key"))    );  diagram.linkTemplate =    $(go.Link,      $(go.Shape),      $(go.Shape, { toArrow: "Standard" }),      $(go.TextBlock, "left", { segmentOffset: new go.Point(0, -10) }),      $(go.TextBlock, "right", { segmentOffset: new go.Point(0, 10) })    );  var nodeDataArray = [    { key: "Alpha", loc: "0 0" },    { key: "Beta", loc: "200 50" }  ];  var linkDataArray = [    { from: "Alpha", to: "Beta" }  ];  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

标签：

来源：慧都