形状分层

要使用 Konva 对形状进行分层，我们可以使用以下分层方法之一：moveToTop()、moveToBottom()、moveUp()、moveDown() 或 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 yellowBox = new Konva.Rect({
x: 50,
y: 50,
width: 100,
height: 100,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4,
draggable: true,
});

const redBox = new Konva.Rect({
x: 100,
y: 100,
width: 100,
height: 100,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true,
});

layer.add(yellowBox);
layer.add(redBox);
stage.add(layer);

// create buttons
const toTopBtn = document.createElement('button');
toTopBtn.textContent = 'Move yellow box to top';
toTopBtn.addEventListener('click', () => {
yellowBox.moveToTop();
});

const toBottomBtn = document.createElement('button');
toBottomBtn.textContent = 'Move yellow box to bottom';
toBottomBtn.addEventListener('click', () => {
yellowBox.moveToBottom();
});

document.body.prepend(toTopBtn);
document.body.prepend(toBottomBtn);

React

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

const App = () => {
  const yellowRef = useRef();
  const [positions, setPositions] = useState({
    yellow: { x: 50, y: 50 },
    red: { x: 100, y: 100 },
  });

  const handleDragEnd = (color, e) => {
    setPositions((currentPositions) => ({
      ...currentPositions,
      [color]: { x: e.target.x(), y: e.target.y() },
    }));
  };

  return (
    <>
      <button onClick={() => yellowRef.current.moveToTop()}>
        Move yellow box to top
      </button>
      <button onClick={() => yellowRef.current.moveToBottom()}>
        Move yellow box to bottom
      </button>
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Rect
            ref={yellowRef}
            x={positions.yellow.x}
            y={positions.yellow.y}
            width={100}
            height={100}
            fill="yellow"
            stroke="black"
            strokeWidth={4}
            draggable
            onDragEnd={(e) => handleDragEnd('yellow', e)}
          />
          <Rect
            x={positions.red.x}
            y={positions.red.y}
            width={100}
            height={100}
            fill="red"
            stroke="black"
            strokeWidth={4}
            draggable
            onDragEnd={(e) => handleDragEnd('red', e)}
          />
        </Layer>
      </Stage>
    </>
  );
};

export default App;

Vue

<template>
  <div>
    <button @click="moveYellowToTop">Move yellow box to top</button>
    <button @click="moveYellowToBottom">Move yellow box to bottom</button>
    <v-stage :config="stageSize">
      <v-layer>
        <v-rect :config="yellowBoxConfig" ref="yellowRef" />
        <v-rect :config="redBoxConfig" />
      </v-layer>
    </v-stage>
  </div>
</template>

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

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

const yellowRef = ref(null);

const yellowBoxConfig = {
  x: 50,
  y: 50,
  width: 100,
  height: 100,
  fill: 'yellow',
  stroke: 'black',
  strokeWidth: 4,
  draggable: true
};

const redBoxConfig = {
  x: 100,
  y: 100,
  width: 100,
  height: 100,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4,
  draggable: true
};

const moveYellowToTop = () => {
  yellowRef.value.getNode().moveToTop();
};

const moveYellowToBottom = () => {
  yellowRef.value.getNode().moveToBottom();
};
</script>