如何在 Vue 中更改节点的 zIndex？

如何在 vue-konva 中更改 zIndex 并重新排序组件？

当你直接使用 Konva 时，有许多方法可以更改节点的顺序，比如 node.zIndex(5)、node.moveToTop() 等。有关更多详细信息，请参见 分层教程。

然而，在使用 Vue 时，建议遵循 Vue 的声明式方法，而不是使用这些命令式的方法。

vue-konva 精确遵循你在 <template> 中描述的节点顺序。你不应该手动更改 zIndex，而应该更新应用的数据，以使 <template> 中的组件保持正确的顺序。

示例展示了如何：

1. 创建一个具有随机位置和颜色的圆形数组
2. 处理拖拽事件以更新形状的视觉顺序
3. 通过调整数组顺序来维护正确的堆叠顺序
4. 遵循 Vue 的响应式系统进行状态管理

记住：不要为你的画布组件使用 zIndex 属性。相反，依赖于模板和数据结构中元素的顺序。

操作说明：尝试拖动一个圆形。当你开始拖动时，它将自动移动到堆栈的顶部。这是通过在我们的数据中调整圆形数组实现的，而不是手动更改 zIndex。

<template>
  <v-stage :config="stageSize">
    <v-layer>
      <v-circle
        v-for="item in items"
        :key="item.id"
        :config="item"
        @dragstart="handleDragstart"
        @dragend="handleDragend"
      />
    </v-layer>
  </v-stage>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Konva from 'konva';

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

const items = ref([]);
const dragItemId = ref(null);

const generateItems = () => {
  const newItems = [];
  for (let i = 0; i < 10; i++) {
    newItems.push({
      x: Math.random() * stageSize.width,
      y: Math.random() * stageSize.height,
      radius: 50,
      id: "node-" + i,
      fill: Konva.Util.getRandomColor(),
      draggable: true
    });
  }
  return newItems;
};

const handleDragstart = (e) => {
  // 保存拖动的元素：
  dragItemId.value = e.target.id();
  // 通过重新排列 items 数组将当前元素移动到顶部：
  const item = items.value.find(i => i.id === dragItemId.value);
  const index = items.value.indexOf(item);
  items.value.splice(index, 1);
  items.value.push(item);
};

const handleDragend = () => {
  dragItemId.value = null;
};

onMounted(() => {
  items.value = generateItems();
});
</script>

Open Sandbox