流程圖控件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正版授權的朋友可以

有關產品的最新消息和最新資訊，歡迎掃描關注下方微信公眾號