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

---

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

点击下载GoJS最新试用版

突出显示时更改节点大小

您可能需要增加节点或节点中元素的大小以使其突出显示。例如，您可以在GraphObject.scale或Shape.strokeWidth上具有Binding ：

  $(go.Node, ...
    $(go.Shape, ...,
      new go.Binding("strokeWidth", "isHighlighted", function(h) { return h ? 5 : 1; })),
    ...
  )

但是，这样做会更改对象的大小。这可能会使与该节点连接的所有链接的路由无效。在许多应用中这可能无关紧要，但是在某些情况下，某些链接的路线可能已由用户重塑。由于连接的节点移动或大小更改而对路由进行的任何重新计算都可能会丢失该路由。

如果这是您应用程序中的考虑因素，则可以考虑让每个节点都拥有一个附加的Shape，该形状将在显示时提供突出显示，否则将看不见。但是不要切换GraphObject.visible属性，因为这会导致节点更改大小。而是在0.0和1.0之间切换GraphObject.opacity属性。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      {
        locationSpot: go.Spot.Center,
        // 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) {
            var diagram = node.diagram;
            diagram.startTransaction("highlight");
            diagram.clearHighlighteds();
            node.findLinksOutOf().each(function(l) { l.isHighlighted = true; });
            node.findNodesOutOf().each(function(n) { n.isHighlighted = true; });
            diagram.commitTransaction("highlight");
          }
      },
      $(go.Panel, "Auto",
        $(go.Shape, "Ellipse",
          { strokeWidth: 2, portId: "" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 5, font: "bold 18px Verdana" },
          new go.Binding("text", "key"))
      ),
      // the highlight shape, which is always a thick red ellipse
      $(go.Shape, "Ellipse",
        // this shape is the "border" of the Auto Panel, but is drawn in front of the
        // regular Auto Panel holding the black-bordered ellipse and text
        { isPanelMain: true, spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight },
        { strokeWidth: 6, stroke: "red", fill: null },
        // only show this ellipse when Part.isHighlighted is true
        new go.Binding("opacity", "isHighlighted", function(h) { return h ? 1.0 : 0.0; })
            .ofObject())
    );

  // define the Link template
  diagram.linkTemplate =
    $(go.Link,
      { toShortLength: 4, reshapable: true, resegmentable: true },
      $(go.Shape,
        // when highlighted, draw as a thick red line
        new go.Binding("stroke", "isHighlighted", function(h) { return h ? "red" : "black"; })
            .ofObject(),
        new go.Binding("strokeWidth", "isHighlighted", function(h) { return h ? 3 : 1; })
            .ofObject()),
      $(go.Shape,
        { toArrow: "Standard", strokeWidth: 0 },
        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) {
    diagram.startTransaction("no highlighteds");
    diagram.clearHighlighteds();
    diagram.commitTransaction("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" }
    ]);

高亮的形状是外部椭圆，始终具有较粗的红色笔触。它通常通过不透明度为零来隐藏，但是当Part.isHighlighted为true 时，Binding会将其不透明度更改为1 。

突出显示的“形状”始终显示在彩色椭圆和文本面板的前面，方法是将其放在面板的子元素列表之后。但是，由于“自动”面板假定第一个元素充当边框，因此我们需要 在高亮Shape上将GraphObject.isPanelMain设置为true，以使其成为内部面板的边框。

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

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

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