图层

图层管理是组态编辑中的重要功能，帮助您组织和控制组件的显示层级。

1. 物理图层

即实际图元绘制的图层。

如图所示，图层从上到下有：

1. 模板层 绘制模板图元。绘制背景颜色、背景图片和背景网格，对应 z-index 属性为 1。

2. 下层图片绘制层，z-index 为 2。

3. 中层 主画布层，z-index 为 3。

4. 上层图片绘制层，z-index 为 4。绘制标尺。

5. dom 图元，可以通过设置 zIndex 属性去改变他的显示层级。

2. 图层层级

3. 调整图层顺序

选中图元，鼠标右键点击打开弹框

• 上移：将图层向上移动一层
• 下移：将图层向下移动一层
• 置顶：将图层移动到最上层
• 置底：将图层移动到最下层

enum CanvasLayer {
  CanvasTemplate = 1, // 模版层
  CanvasImageBottom, // 下层图片层
  CanvasMain, // 主画布层
  CanvasImage // 上层图片层
}

在编辑器中，选中图片图元后右键：

1. 选择置顶，图片节点会移动到上层图片层绘制（pen.canvasLayer === CanvasLayer.CanvasImage）同时在 meta2d.store.data.pens 的顺序的最后；

2. 置底会移动到下层图片层绘制（pen.canvasLayer === CanvasLayer.CanvasImageBottom）同时在 meta2d.store.data.pens 的顺序的最前；

3. 选择上一层/下一层 后，图片节点会移动到主画布层绘制（pen.canvasLayer === CanvasLayer.CanvasMain），此时，更易操作和其他非图片图元层级关系。

WARNING

需要注意的是：我们上面提过，上层/下层图片层绘制次数更少，性能消耗更小，所以如果没有强制需求，尽量不要操作上一层/下一层，导致将图片节点移动到主画布层。

图层锁定

锁定图层后，该图层上的所有组件将无法被选中和编辑。

图层隐藏

隐藏图层后，该图层上的所有组件将不可见，但不会影响其他操作。

图层分组

可以将多个图层组织到一个分组中，方便管理复杂的组态场景。