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

链接(下)


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

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

点击下载GoJS最新试用版

曲线,弯曲度,转角

一旦Link.routing确定了链接采用的路线(即点的顺序),其他属性将控制有关链接形状如何获取其路径几何的详细信息。第一个这样的属性是Link.curve,它控制链接形状是基本上是直线段还是大曲线。

为默认值Link.curve是Link,None,产生链接的形状有直线段正如你看到的上面。

Link,Bezier的值会为链接形状生成自然弯曲的路径。

  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,
      { curve: go.Link.Bezier },  // Bezier curve
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  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);

流程图控件GoJS教程:链接(下)

您可以通过设置Link.curviness属性来控制其弯曲程度。默认情况下会产生一条轻微的曲线。

如果有多个链接,除非您明确分配Link.curviness,否则它将自动为每个链接的曲线计算合理的值。

  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,
      { curve: go.Link.Bezier },
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "100 50" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" },  // multiple links between the same nodes
    { from: "Alpha", to: "Beta" },
    { from: "Alpha", to: "Beta" },
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

流程图控件GoJS教程:链接(下)

当Link.routing为“正交”或“避免节点” 时,另一种弯曲来自圆角。

  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.AvoidsNodes,
        corner: 10 },                  // rounded corners
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "250 40" },
    { key: "Gamma", loc: "100 0" },
    { key: "Delta", loc: "75 50" },
    { key: "Epsilon", loc: "150 30" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

流程图控件GoJS教程:链接(下)

另一种弯曲来自将Link.curve设置为Link,JumpOver。这会在与另一个也具有JumpOver曲线的正交链接交叉的正交链接的路径中引起很少的“跳跃”。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { locationSpot: go.Spot.Center },
      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,  // may be either Orthogonal or AvoidsNodes
        curve: go.Link.JumpOver },
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 50" },
    { key: "Beta", loc: "100 50" },
    { key: "Alpha2", loc: "50 0" },
    { key: "Beta2", loc: "50 100" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" },  // these two links will cross
    { from: "Alpha2", to: "Beta2" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

流程图控件GoJS教程:链接(下)

请注意,链接跳跃的使用明显比普通链接慢,因为必须计算所有交叉点,并且链接形状的几何形状将更加复杂。

另一种弯曲(或实际上缺乏弯曲)来自将Link.curve设置为Link,JumpGap。这会在与另一个也具有JumpGap曲线的正交链接交叉的正交链接的路径中引起很小的“间隙”。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { locationSpot: go.Spot.Center },
      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,  // may be either Orthogonal or AvoidsNodes
        curve: go.Link.JumpGap },
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 50" },
    { key: "Beta", loc: "100 50" },
    { key: "Alpha2", loc: "50 0" },
    { key: "Beta2", loc: "50 100" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" },  // these two links will cross
    { from: "Alpha2", to: "Beta2" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

流程图控件GoJS教程:链接(下)

轻松点击链接

用户可能会注意到的一个问题是,尤其是在使用手指以及鼠标的情况下,单击具有较薄Link.path的链接可能很困难。可以将Shape.strokeWidth设置为较大的值,例如8,但是您可能不希望这种外观。

  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, { strokeWidth: 8 }),  // thick path
      $(go.Shape, { toArrow: "Standard" })
    );
 
  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);

流程图控件GoJS教程:链接(下)

解决方案是添加粗路径Shape,但不绘制任何东西。设置即可轻松完成{ stroke: "transparent", strokeWidth: 8 }。但是,如果要保留原始路径Shape,则需要通过将GraphObject.isPanelMain设置为true ,将两个 Shape 都声明为Link的“主要”元素。“链接”面板知道所有此类形状都应为链接路径获得相同的计算几何形状。

  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, { isPanelMain: true, stroke: "transparent", strokeWidth: 8 }),  // thick undrawn path
      $(go.Shape, { isPanelMain: true }),  // default stroke === "black", strokeWidth === 1
      $(go.Shape, { toArrow: "Standard" })
    );
 
  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);

流程图控件GoJS教程:链接(下)

在此示例中,您将发现选择链接比没有第二个透明链接路径形状更容易。

透明形状也可以用于突出显示目的。例如,要实现在鼠标经过链接时突出显示链接的效果,请添加GraphObject.mouseEnter和GraphObject.mouseLeave事件处理程序:

  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, { isPanelMain: true, stroke: "transparent", strokeWidth: 8 }),  // thick undrawn path
      $(go.Shape, { isPanelMain: true }),  // default stroke === "black", strokeWidth === 1
      $(go.Shape, { toArrow: "Standard" }),
      {
        // a mouse-over highlights the link by changing the first main path shape's stroke:
        mouseEnter: function(e, link) { link.elt(0).stroke = "rgba(0,90,156,0.3)"; },
        mouseLeave: function(e, link) { link.elt(0).stroke = "transparent"; }
      }
    );
 
  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);

流程图控件GoJS教程:链接(下)

将鼠标移到链接上可以查看效果。这样的反馈还有助于用户单击或上下文单击链接。

短长度

请注意,在上面的示例中,黑色路径形状较粗,箭头似乎由于链接路径的厚度而消失了。可以通过将箭头的GraphObject.scale增加到2来避免该问题。

  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, { strokeWidth: 8 }),  // thick path
      $(go.Shape, { toArrow: "Standard", scale: 2 }) // bigger arrowhead
    );
 
  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);

流程图控件GoJS教程:链接(下)

现在箭头清晰可见。但是,这又表明箭头在链接路径的最末端仍然被遮盖,因为它太宽而无法显示箭头的点。通过将Link.toShortLength设置为诸如8的值(取决于所用箭头的类型)可以避免该问题。路径几何形状将缩短该距离,以使链接路径不会干扰箭头。

  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,
      { toShortLength: 8 },  // shortens path to avoid interfering with arrowhead
      $(go.Shape, { strokeWidth: 8 }),  // thick path
      $(go.Shape, { toArrow: "Standard", scale: 2 }) // bigger arrowhead
    );
 
  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);

流程图控件GoJS教程:链接(下)

还有一个Link.fromShortLength属性,用于控制绘制链接路径的“ from”端的距离。如果存在一个结束段,则可以缩短的距离限于相应的 Link.toEndSegmentLength或Link.fromEndSegmentLength。还要注意,短长度可能为负,这会导致链接路径被拉长-进入链接所连接的端口。

断开链接

通常的期望是,除非将两个节点连接在一起,否则就无法建立链接关系。但是,GoJS确实支持创建和操作具有null值的Link.fromNode和Link.toNode属性之一或全部的链接。Draggable Link示例演示了这一点。

链路的两端必须连接到节点,以便标准链路路由能够运行。如果链接不知道从哪里开始或在哪里结束,则不能计算该链接的路线或位置。但是,可以通过将Link.points设置或绑定到两个或多个Points的列表来提供路线。这将自动为链接指定位置,以便可以在图中看到它。

链接工具LinkingTool和RelinkingTool通常不允许创建或重新连接以“ nothing”连接的链接。但是,您可以将LinkingBaseTool.isUnconnectedLinkValid设置为true以允许用户这样做,如Draggable Link示例所示。

除非链接是包含连接节点的集合的一部分,否则通常无法拖动链接。但是,您可以将DraggingTool.dragsLink设置为true,以允许用户拖动单独的Link。此模式允许用户通过将链接拖离其所连接的节点/端口来断开链接。它还允许用户通过断开链接来重新连接链接的一端或两端,以使该端位于有效端口上。Draggable Link示例也证明了这一点。

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

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

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

流程图控件GoJS教程:链接(下)