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

---

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

點擊下載GoJS最新試用版

鼠標(biāo)懸停時突出顯示節(jié)點

最普通的突出顯示是在發(fā)生動作（例如將鼠標(biāo)懸停在節(jié)點上）時更改外觀。這可以引起人們對交互式節(jié)點或鏈接或?qū)嶋H上任何GraphObject（例如按鈕）的關(guān)注。這就是為什么GoJS中的預(yù)定義按鈕在鼠標(biāo)懸停時會突出顯示的原因。

要實現(xiàn)此效果，您只需定義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" }
  ]);

將鼠標(biāo)懸停在節(jié)點上可以看到它們突出顯示。

在拖動過程中對固定零件進(jìn)行高亮顯示也很常見，這與“鼠標(biāo)懸停”情況不同。可以通過實現(xiàn)GraphObject.mouseDragEnter和GraphObject.mouseDragLeave事件處理程序，以類似于mouseEnter / mouseLeave事件的方式實現(xiàn) 。幾個示例對此進(jìn)行了演示：組織結(jié)構(gòu)圖編輯器， 貨架圖，重新組合和座位表。

突出顯示節(jié)點和鏈接

通常希望顯示與特定節(jié)點相關(guān)的節(jié)點或鏈接。與鼠標(biāo)懸停場景不同，一個人可能想要保持許多零件的突出顯示，而與任何鼠標(biāo)狀態(tài)或選擇狀態(tài)無關(guān)。

這是突出顯示用戶單擊的節(jié)點中的所有節(jié)點和鏈接的示例。本示例使用Part.isHighlighted屬性和可視屬性對該Part.isHighlighted屬性的數(shù)據(jù)綁定。

  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" }
    ]);

單擊節(jié)點以突出顯示出站連接的鏈接和節(jié)點。在圖表背景中單擊以刪除所有突出顯示。請注意，突出顯示與選擇無關(guān)。

使用數(shù)據(jù)綁定來修改Shape屬性可以避免指定每個Shape的名稱以及編寫代碼來查找Shape并修改其屬性。

在拖動過程中對固定零件進(jìn)行高亮顯示也很常見，這與“鼠標(biāo)懸?！鼻闆r不同?？梢酝ㄟ^實現(xiàn)GraphObject.mouseDragEnter和GraphObject.mouseDragLeave事件處理程序，以類似于mouseEnter / mouseLeave事件的方式實現(xiàn) 。幾個示例對此進(jìn)行了演示：組織結(jié)構(gòu)圖編輯器， 貨架圖，重新組合和座位表。

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

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

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