理解节点 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。注意图形的顺序是如何变化的。

Vanilla

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);

Open Sandbox

React

import { Stage, Layer, Group, Rect, Circle } from 'react-konva';
import { useState } from 'react';

const App = () => {
  const [redCircleGroup, setRedCircleGroup] = useState('group1');

  return (
    <>
      <button onClick={() => setRedCircleGroup('group2')}>
        将红色圆圈移动到 group2
      </button>
      <button onClick={() => setRedCircleGroup('group1')}>
        将红色圆圈移动到 group1
      </button>
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Group>
            <Rect
              x={10}
              y={10}
              width={100}
              height={100}
              fill="black"
            />
            {redCircleGroup === 'group1' && (
              <Circle
                x={80}
                y={80}
                radius={40}
                fill="red"
              />
            )}
          </Group>
          <Group>
            <Rect
              x={50}
              y={50}
              width={100}
              height={100}
              fill="green"
            />
            {redCircleGroup === 'group2' && (
              <Circle
                x={80}
                y={80}
                radius={40}
                fill="red"
              />
            )}
          </Group>
        </Layer>
      </Stage>
    </>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <div>
    <button @click="moveToGroup2">将红色圆圈移动到 group2</button>
    <button @click="moveToGroup1">将红色圆圈移动到 group1</button>
    <v-stage :config="stageSize">
      <v-layer>
        <v-group>
          <v-rect :config="blackRectConfig" />
          <v-circle v-if="redCircleGroup === 'group1'" :config="redCircleConfig" />
        </v-group>
        <v-group>
          <v-rect :config="greenRectConfig" />
          <v-circle v-if="redCircleGroup === 'group2'" :config="redCircleConfig" />
        </v-group>
      </v-layer>
    </v-stage>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const stageSize = {
  width: window.innerWidth,
  height: window.innerHeight
};

const redCircleGroup = ref('group1');

const blackRectConfig = {
  x: 10,
  y: 10,
  width: 100,
  height: 100,
  fill: 'black'
};

const greenRectConfig = {
  x: 50,
  y: 50,
  width: 100,
  height: 100,
  fill: 'green'
};

const redCircleConfig = {
  x: 80,
  y: 80,
  radius: 40,
  fill: 'red'
};

const moveToGroup2 = () => {
  redCircleGroup.value = 'group2';
};

const moveToGroup1 = () => {
  redCircleGroup.value = 'group1';
};
</script>

Open Sandbox