Skip to main content

理解节点 zIndex

节点的 zIndex 是什么？​

你可以通过以下方式获取/设置一个节点的 zIndex：

// 获取
const zIndex = shape.zIndex();

// 设置
shape.zIndex(1);

zIndex 只是一个节点在其父节点的子数组中的索引。请不要将 Konva 中的 zIndex 与 CSS 中的 z-index 混淆。

const group = new Konva.Group();
const circle = new Konva.Circle({});
group.add(circle);

// 它将输出 0
console.log(circle.zIndex());

// 下一行代码将不起作用，因为 group 只有一个子节点
circle.zIndex(1);

// 仍然输出 0
console.log(circle.zIndex());

// 对于任何节点，此等式将成立：
console.log(circle.zIndex() === circle.getParent().children.indexOf(circle));

你不能使用 zIndex 来设置节点的绝对位置，那样做和我们在 CSS 中的操作是不同的。 Konva 按照在节点树中定义的严格顺序绘制节点。

说明：尝试使用按钮来更改图形的 zIndex。注意图形的顺序是如何变化的。

import Konva from 'konva';

const width = window.innerWidth;
const height = window.innerHeight;

const stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height,
});

const layer = new Konva.Layer();

// 第一个组
const group1 = new Konva.Group();
layer.add(group1);

const blackRect = new Konva.Rect({
  x: 10,
  y: 10,
  width: 100,
  height: 100,
  fill: 'black',
});
group1.add(blackRect);

const redCircle = new Konva.Circle({
  x: 80,
  y: 80,
  radius: 40,
  fill: 'red',
});
group1.add(redCircle);

// 第二个组
const group2 = new Konva.Group();
layer.add(group2);

const greenRect = new Konva.Rect({
  x: 50,
  y: 50,
  width: 100,
  height: 100,
  fill: 'green',
});
group2.add(greenRect);

stage.add(layer);

// 创建按钮
const btn1 = document.createElement('button');
btn1.textContent = '将红色圆圈移动到 group2';
btn1.addEventListener('click', () => {
  redCircle.moveTo(group2);
});

const btn2 = document.createElement('button');
btn2.textContent = '将红色圆圈移动到 group1';
btn2.addEventListener('click', () => {
  redCircle.moveTo(group1);
});

document.body.appendChild(btn1);
document.body.appendChild(btn2);