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进行重新排序，例如，当vue组件从另一个组件接收到事件时，将顺序从原来的eventBox-rubberBox-annotationRect动态更改为(从下到上) annotationRect-eventBox-rubberBox？

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>

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