流程图控件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" }
  ]);

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

在拖动过程中对固定零件进行高亮显示也很常见，这与“鼠标悬停”情况不同。可以通过实现GraphObject.mouseDragEnter和GraphObject.mouseDragLeave事件处理程序，以类似于mouseEnter / mouseLeave事件的方式实现 。几个示例对此进行了演示：组织结构图编辑器， 货架图，重新组合和座位表。

突出显示节点和链接

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

这是突出显示用户单击的节点中的所有节点和链接的示例。本示例使用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并修改其属性。

在拖动过程中对固定零件进行高亮显示也很常见，这与“鼠标悬停”情况不同。可以通过实现GraphObject.mouseDragEnter和GraphObject.mouseDragLeave事件处理程序，以类似于mouseEnter / mouseLeave事件的方式实现 。几个示例对此进行了演示：组织结构图编辑器， 货架图，重新组合和座位表。

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

想要购买GoJS正版授权的朋友可以

有关产品的最新消息和最新资讯，欢迎扫描关注下方微信公众号