logo GoJS教程 2019 我也要发布文档

在链接上添加注释或修饰(上)


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

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

点击下载GoJS最新试用版

链接上的标签

通常在链接(尤其是文本)上添加注释或修饰。

简单链接标签

默认情况下,如果将GraphObject添加到Link,它将位于链接的中间。在此示例中,我们仅将TextBlock添加到链接,并将其TextBlock.text属性绑定到链接数据的“ text”属性。

  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),                           // this is the link shape (the line)
      $(go.Shape, { toArrow: "Standard" }),  // this is an arrowhead
      $(go.TextBlock,                        // this is a Link label
        new go.Binding("text", "text"))
    );
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "200 50" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta", text: "a label" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

流程图控件GoJS教程:在链接上添加注释或修饰(上)

请注意,单击文本标签将导致选择整个链接。

虽然使用TextBlock作为链接标签是很平常的事,但是它可以是任何GraphObject, 例如Shape或任意复杂的Panel。这是一个简单的面板标签:

  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.Panel, "Auto",  // this whole Panel is a link label
        $(go.Shape, "TenPointedStar", { fill: "yellow", stroke: "gray" }),
        $(go.TextBlock, { margin: 3 },
          new go.Binding("text", "text"))
      )
    );
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "200 50" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta", text: "hello!" }  // added information for link label
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

流程图控件GoJS教程:在链接上添加注释或修饰(上)

如果链接是正交路由或贝塞尔曲线,这也可以工作。

  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,
      { routing: go.Link.Orthogonal },
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" }),
      $(go.TextBlock, { textAlign: "center" },  // centered multi-line text
        new go.Binding("text", "text"))
    );
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "200 50" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta", text: "a label\non an\northo link" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

流程图控件GoJS教程:在链接上添加注释或修饰(上)

尽管将标签放置在链接的中间是默认行为,但是您可以设置以“ segment”开头的GraphObject属性,以指定确切位置以及如何沿链接路径布置对象。

链接标签segmentIndex和segmentFraction

设置GraphObject.segmentIndex属性,以指定对象应位于链接路线的哪一部分。设置GraphObject.segmentFraction属性以控制对象应该走多远,以从段的开头(零)到段的结尾(一)的分数表示。

如果链接来自不具有GraphObject.fromSpot的节点(即Spot.None)并到达不具有GraphObject.toSpot的节点,则链接中可能只有一个段,段号为零。

  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, "from", { segmentIndex: 0, segmentFraction: 0.2 }),
      $(go.TextBlock, "mid", { segmentIndex: 0, segmentFraction: 0.5 }),
      $(go.TextBlock, "to", { segmentIndex: 0, segmentFraction: 0.8 })
    );
 
  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);

流程图控件GoJS教程:在链接上添加注释或修饰(上)

如果链接中有许多段,则需要指定不同的段号。例如,正交链接通常在路线中有6个点,这意味着从0到4编号为5个路段。

  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,
      { routing: go.Link.Orthogonal },
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" }),
      $(go.TextBlock, "from", { segmentIndex: 1, segmentFraction: 0.5 }),
      $(go.TextBlock, "mid", { segmentIndex: 2, segmentFraction: 0.5 }),
      $(go.TextBlock, "to", { segmentIndex: 3, segmentFraction: 0.5 })
    );
 
  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);

流程图控件GoJS教程:在链接上添加注释或修饰(上)

但是,您也可以从链接的“到”端向后计数段。-1是最后一个分段,-2是倒数第二个分段,依此类推。当您使用负分段索引时,分段分数从最接近“ to”端的0变为该分段中最靠后的一端的1。沿从“到”端的路线。因此,segmentIndex为-1,segmentFraction为0的点是链接路由的终点。segmentIndex为-1且segmentFraction为1的segmentIndex与segmentIndex -2和segmentFraction 0相同。

对于属于链接“至”端附近的标签,通常对GraphObject.segmentIndex使用负值。当链接中的段数未知或可能变化时,此约定效果更好。

**关于链接上的标签更多教程,欢迎关注后续教程

=====================================================

想要购买GoJS正版授权的朋友可以咨询慧都官方客服

更多精彩内容,欢迎关注下方的微信公众号,及时获取产品最新资讯▼▼▼

图片2.jpg