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

有关产品的最新消息和最新资讯，欢迎扫描关注下方微信公众号