流程圖控件GoJS教程：圖層和Z-ordering

---

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

點擊下載GoJS最新試用版

標準層

每個圖都從幾個標準層開始。這些是它們的Layer.name，按從最后面到最前面的順序排列：

• “ Grid”，保存了Diagram.grid和您希望位于所有東西之后的任何其他靜態零件
• “背景”
• “默認層”
• “前景”
• “裝飾”，保持選擇的裝飾和各種工具。
• “工具”，持有用于執行各種工具的零件

每個零件根據其Part.layerName放置在一個Layer中。默認值為空字符串。使用Diagram.findLayer查找具有圖層名稱的圖層。通過設置Part.layerName更改零件所在的層。

由于Layer.isTemporary為true ，UndoManager會自動忽略對“網格”，“裝飾物”和“工具”層中的零件所做的更改。

由于Layer.allowSelect為false ，因此無法選擇“網格”圖層中的零件。這樣可以防止用戶選擇可見的背景網格。

圖層示例

本示例向該圖添加幾個Layer，每個Layer以一種顏色命名，然后在隨機位置創建一堆彩色部分。每個Part.layerName都數據綁定到節點數據的“ color”屬性。

此外，每個圖層都有復選框，用于控制各個圖層的可見性。您可以查看相同顏色的所有部分如何根據復選框的值顯示和消失。此外，您可以看到它們在Z順序中的深度如何相同。 

最后，每個Part都有一個Part.selectionChanged函數，該函數在選中時將其放置在“前景”層中，而在未選中時將其放回其正常顏色層中。

  // These new layers come in front of the standard regular layers,
  // but behind the "Foreground" layer:
  var forelayer = diagram.findLayer("Foreground");
  diagram.addLayerBefore($(go.Layer, { name: "blue" }), forelayer);
  diagram.addLayerBefore($(go.Layer, { name: "green" }), forelayer);
  diagram.addLayerBefore($(go.Layer, { name: "orange" }), forelayer);

  diagram.nodeTemplate =
    $(go.Part, "Spot", // no links or grouping, so can use the simpler Part class
      new go.Binding("layerName", "color"),
      new go.Binding("location", "loc"),
      $(go.Shape,
        { width: 80, height: 80 },
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { stroke: "white", font: "bold 12px sans-serif" }),
      {
        selectionChanged: function(p) {
          p.layerName = (p.isSelected ? "Foreground" : p.data.color);
        },
        layerChanged: function(p, oldLayer, newLayer) {
          if (newLayer !== null) p.elt(1).text = newLayer.name;
        }
      }
    );

  var array = [];
  for (var i = 0; i < 12; i++) {
    var data = { loc: new go.Point(Math.random()*520, Math.random()*200) };
    switch (Math.floor(Math.random()*3)) {
      case 0: data.color = "blue"; break;
      case 1: data.color = "green"; break;
      case 2: data.color = "orange"; break;
      default: data.color = "Foreground"; break;
    }
    array.push(data);
  }
  diagram.model.nodeDataArray = array;
  diagram.undoManager.isEnabled = true;

  // define this function so that the checkbox event handlers can call it
  toggleVisible = function(layername, e) {
    diagram.commit(function(d) {
      var layer = d.findLayer(layername);
      if (layer !== null) layer.visible = e.currentTarget.checked;
    }, 'toggle ' + layername);
  };

圖層可見性：

藍色 綠色 橙子 前景

ZOrder示例

本示例將幾個Part添加到圖中的一層（默認）。每個Part.zOrder以及其文本都與節點數據的“ zOrder”屬性綁定。

零件上的按鈕可用于修改每個按鈕的z順序。

  function changeZOrder(amt, obj) {
    diagram.commit(function(d) {
      var data = obj.part.data;
      d.model.set(data, "zOrder", data.zOrder + amt);
    }, 'modified zOrder');
  }

  diagram.nodeTemplate =
    $(go.Part,  "Spot",
      new go.Binding("layerName", "color"),
      new go.Binding("location", "loc"),
      new go.Binding("zOrder"),
      $(go.Shape,
        { width: 100, height: 100, stroke: 'rgb(50,50,50)', fill: 'rgb(50,100,255)' }),
      $(go.TextBlock,
        { font: "52px sans-serif", stroke: 'whitesmoke' },
        new go.Binding("text", "zOrder")),
      $("Button",
        { alignment: go.Spot.BottomLeft, alignmentFocus: go.Spot.BottomLeft,
          click: function (e, obj) { changeZOrder(-1, obj); } },
        $(go.Shape, "LineH", { width: 14, height: 14 })),
      $("Button",
        { alignment: go.Spot.BottomRight, alignmentFocus: go.Spot.BottomRight,
          click: function (e, obj) { changeZOrder(1, obj); } },
        $(go.Shape, "PlusLine", { width: 14, height: 14 }))
    );

  var array = [];
  for (var i = 0; i < 12; i++) {
    var data = { loc: new go.Point(Math.random()*500, Math.random()*200) };
    data.zOrder = (Math.floor(Math.random()*20))
    array.push(data);
  }
  diagram.model.nodeDataArray = array;
  diagram.undoManager.isEnabled = true;

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

想要購買GoJS正版授權的朋友可以

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