流程图控件GoJS教程：突出显示节点设置（上）

通常通过以某种方式“突出显示”节点（或节点或链接的一部分）使其脱颖而出。显示选择装饰时，选择会发生这种情况。但是，人们经常想突出显示与选择无关的零件。可以通过以下方式来实现：更改形状的填充或笔触，将图片源替换为另一个源，添加或移除阴影，等等。

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

GoJS最新试用版

鼠标悬停时突出显示节点

最普通的突出显示是在发生动作（例如将鼠标悬停在节点上）时更改外观。这可以引起人们对交互式节点或链接或实际上任何GraphObject（例如按钮）的关注。这就是为什么GoJS中的预定义按钮在鼠标悬停时会突出显示的原因。

要实现此效果，您只需定义GraphObject.mouseEnter和GraphObject.mouseLeave事件处理程序。

  function mouseEnter(e, obj) {    var shape = obj.findObject("SHAPE");    shape.fill = "#6DAB80";    shape.stroke = "#A6E6A1";    var text = obj.findObject("TEXT");    text.stroke = "white";  };  function mouseLeave(e, obj) {    var shape = obj.findObject("SHAPE");    // Return the Shape's fill and stroke to the defaults    shape.fill = obj.data.color;    shape.stroke = null;    // Return the TextBlock's stroke to its default    var text = obj.findObject("TEXT");    text.stroke = "black";  };  diagram.nodeTemplate =    $(go.Node, "Auto",      {        mouseEnter: mouseEnter,        mouseLeave: mouseLeave      },      $(go.Shape, "Rectangle",        { strokeWidth: 2, stroke: null, name: "SHAPE" },        new go.Binding("fill", "color")),      $(go.TextBlock,        { margin: 10, font: "bold 18px Verdana", name: "TEXT" },        new go.Binding("text", "key"))    );  diagram.model = new go.GraphLinksModel(  [    { key: "Alpha", color: "#96D6D9" },    { key: "Beta",  color: "#96D6D9" },    { key: "Gamma", color: "#EFEBCA" },    { key: "Delta", color: "#EFEBCA" }  ],  [    { from: "Alpha", to: "Beta" },    { from: "Alpha", to: "Gamma" },    { from: "Beta", to: "Beta" },    { from: "Gamma", to: "Delta" },    { from: "Delta", to: "Alpha" }  ]);

将鼠标悬停在节点上可以看到它们突出显示。

突出显示节点和链接

通常希望显示与特定节点相关的节点或链接。与鼠标悬停场景不同，一个人可能想要保持许多零件的突出显示，而与任何鼠标状态或选择状态无关。

这是突出显示用户单击的节点中的所有节点和链接的示例。本示例使用Part.isHighlighted属性和可视属性对该Part.isHighlighted属性的数据绑定。

  diagram.nodeTemplate =    $(go.Node, "Auto",      { // when the user clicks on a Node, highlight all Links coming out of the node        // and all of the Nodes at the other ends of those Links.        click: function(e, node) {            // highlight all Links and Nodes coming out of a given Node            var diagram = node.diagram;            diagram.startTransaction("highlight");            // remove any previous highlighting            diagram.clearHighlighteds();            // for each Link coming out of the Node, set Link.isHighlighted            node.findLinksOutOf().each(function(l) { l.isHighlighted = true; });            // for each Node destination for the Node, set Node.isHighlighted            node.findNodesOutOf().each(function(n) { n.isHighlighted = true; });            diagram.commitTransaction("highlight");          }      },      $(go.Shape, "Rectangle",        { strokeWidth: 2, stroke: null },        new go.Binding("fill", "color"),        // the Shape.stroke color depends on whether Node.isHighlighted is true        new go.Binding("stroke", "isHighlighted", function(h) { return h "red" : "black"; })            .ofObject()),      $(go.TextBlock,        { margin: 10, font: "bold 18px Verdana" },        new go.Binding("text", "key"))    );  // define the Link template  diagram.linkTemplate =    $(go.Link,      { toShortLength: 4 },      $(go.Shape,        // the Shape.stroke color depends on whether Link.isHighlighted is true        new go.Binding("stroke", "isHighlighted", function(h) { return h "red" : "black"; })            .ofObject(),        // the Shape.strokeWidth depends on whether Link.isHighlighted is true        new go.Binding("strokeWidth", "isHighlighted", function(h) { return h 3 : 1; })            .ofObject()),      $(go.Shape,        { toArrow: "Standard", strokeWidth: 0 },        // the Shape.fill color depends on whether Link.isHighlighted is true        new go.Binding("fill", "isHighlighted", function(h) { return h "red" : "black"; })            .ofObject())    );  // when the user clicks on the background of the Diagram, remove all highlighting  diagram.click = function(e) {    e.diagram.commit(function(d) { d.clearHighlighteds(); }, "no highlighteds");  };  diagram.model = new go.GraphLinksModel(    [      { key: "Alpha", color: "#96D6D9" },      { key: "Beta",  color: "#96D6D9" },      { key: "Gamma", color: "#EFEBCA" },      { key: "Delta", color: "#EFEBCA" }    ],    [      { from: "Alpha", to: "Beta" },      { from: "Alpha", to: "Gamma" },      { from: "Beta", to: "Beta" },      { from: "Gamma", to: "Delta" },      { from: "Delta", to: "Alpha" }    ]);

单击节点以突出显示出站连接的链接和节点。在图表背景中单击以删除所有突出显示。请注意，突出显示与选择无关。

使用数据绑定来修改Shape属性可以避免指定每个Shape的名称以及编写代码来查找Shape并修改其属性。

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

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

标签：