Vue-Konva：有没有办法即时重新排序图层？

Question

所以，我一直在使用 vue-konva，我有这样的东西：

<v-container>
    <v-stage ref="stage">
        <v-layer ref="baseImage">
            <v-image>
        </v-layer>
        <v-layer ref="annotationLayer">
            <v-rect ref="eventBox">
            <v-rect ref="rubberBox">
            <v-rect ref="annotationRect">
        </v-layer>
    </v-stage>
<v-container>

目前，如果我想绘制新框，当图像上已经有其他 annotationRects 时，会出现一些问题。因为它们在技术上位于 eventBox 和 Rubberbox 之上，所以当光标位于现有 annotationRect 之上时，它们会“阻挡”这两层。

但是，我不想总是让 eventBox 和 RubberBox 在 annotationRect 之上，因为我需要能够与 annotationRect 交互来移动它们、调整它们的大小等。

我有没有办法重新排序 eventBox、rubberBox 和 annotationRect，例如，将原始 eventBox-rubberBox-annotationRect 的顺序更改为（从下到上）annotationRect-eventBox-rubberBox 并返回，例如当 vue 组件接收到另一个组件的事件时？

Answer 1

您需要在应用程序的状态中定义您的eventBox、rubberBox 和annotationRect 内部订单数组。然后你可以使用v-for 指令来渲染数组中的项目：

<template>
  <div>
    <v-stage ref="stage" :config="stageSize" @click="changeOrder">
      <v-layer>
        <v-text :config="{text: 'Click me to change order', fontSize: 15}"/>
        <v-rect v-for="item in items" v-bind:key="item.id" :config="item"/>
      </v-layer>
      <v-layer ref="dragLayer"></v-layer>
    </v-stage>
  </div>
</template>

<script>
const width = window.innerWidth;
const height = window.innerHeight;
export default {
  data() {
    return {
      stageSize: {
        width: width,
        height: height
      },
      items: [
        { id: 1, x: 10, y: 50, width: 100, height: 100, fill: "red" },
        { id: 2, x: 50, y: 70, width: 100, height: 100, fill: "blue" }
      ]
    };
  },
  methods: {
    changeOrder() {
      const first = this.items[0];
      // remove first item:
      this.items.splice(0, 1);
      // add it to the top:
      this.items.push(first);
    }
  }
};
</script>

演示：https://codesandbox.io/s/vue-konva-list-render-l70vs?file=/src/App.vue