流程图控件GoJS教程：图层和Z-ordering

所有的部分中的一个图表实际上属于一个层的图所示。您可以控制每一层中所有零件的可见性，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正版授权的朋友可以咨询官方客服