流程圖控件GoJS教程：突出顯示節(jié)點(diǎn)設(shè)置（下）

---

GoJS是一款功能強(qiáng)大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

點(diǎn)擊下載GoJS最新試用版

突出顯示時更改節(jié)點(diǎn)大小

您可能需要增加節(jié)點(diǎn)或節(jié)點(diǎn)中元素的大小以使其突出顯示。例如，您可以在GraphObject.scale或Shape.strokeWidth上具有Binding ：

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

但是，這樣做會更改對象的大小。這可能會使與該節(jié)點(diǎn)連接的所有鏈接的路由無效。在許多應(yīng)用中這可能無關(guān)緊要，但是在某些情況下，某些鏈接的路線可能已由用戶重塑。由于連接的節(jié)點(diǎn)移動或大小更改而對路由進(jìn)行的任何重新計算都可能會丟失該路由。

如果這是您應(yīng)用程序中的考慮因素，則可以考慮讓每個節(jié)點(diǎn)都擁有一個附加的Shape，該形狀將在顯示時提供突出顯示，否則將看不見。但是不要切換GraphObject.visible屬性，因為這會導(dǎo)致節(jié)點(diǎn)更改大小。而是在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" }
    ]);

高亮的形狀是外部橢圓，始終具有較粗的紅色筆觸。它通常通過不透明度為零來隱藏，但是當(dāng)Part.isHighlighted為true 時，Binding會將其不透明度更改為1 。

突出顯示的“形狀”始終顯示在彩色橢圓和文本面板的前面，方法是將其放在面板的子元素列表之后。但是，由于“自動”面板假定第一個元素充當(dāng)邊框，因此我們需要 在高亮Shape上將GraphObject.isPanelMain設(shè)置為true，以使其成為內(nèi)部面板的邊框。

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

想要購買GoJS正版授權(quán)的朋友可以咨詢慧都官方客服

有關(guān)產(chǎn)品的最新消息和最新資訊，歡迎掃描關(guān)注下方微信公眾號