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

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