流程图控件GoJS教程：链接（下）
GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。
GoJS现已更新至最新版本2.0.17发布，修复了一些bug，增强用户体验，赶快下载试试吧~
曲线，弯曲度，转角
一旦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正版授权的朋友可以。
更多精彩内容，欢迎关注下方的微信公众号，及时获取产品最新资讯▼▼▼
QQ交谈
在线咨询
渝公网安备
50010702500608号
客服热线