彩票走势图

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);

您可以通过设置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);

当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);

另一种弯曲来自将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);

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

另一种弯曲（或实际上缺乏弯曲）来自将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);

轻松点击链接

用户可能会注意到的一个问题是，尤其是在使用手指以及鼠标的情况下，单击具有较薄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);

解决方案是添加粗路径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);

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

透明形状也可以用于突出显示目的。例如，要实现在鼠标经过链接时突出显示链接的效果，请添加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);

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

短长度

请注意，在上面的示例中，黑色路径形状较粗，箭头似乎由于链接路径的厚度而消失了。可以通过将箭头的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);

现在箭头清晰可见。但是，这又表明箭头在链接路径的最末端仍然被遮盖，因为它太宽而无法显示箭头的点。通过将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);

还有一个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正版授权的朋友可以。

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