Vue-Konva。有没有办法在飞行中重新排列图层？

Posted 2021-03-19

所以，我一直在使用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>

目前有一些问题，如果我想绘制新的盒子， 当图像上已经有其他的注解区域时。因为从技术上讲，它们在eventBox和rubberbox上面，当光标在现有的annotationRect上面时，它们就会 "阻挡 "这两个图层。

但是，我不想让eventBox和RubberBox一直处于annotationRect的上方，因为我需要能够与annotationRect交互，移动它们，调整它们的大小等等。

有没有一种方法可以让我重新安排eventBox、rubberBox和annotationRect的顺序，即从原来的eventBox-rubberBox-annotationRect，改变为（从下到上）annotationRect-eventBox-rubberBox的顺序，然后再改变回来，例如当vue组件从另一个组件接收到一个事件时？

答案

你需要定义你的 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.iosvue-konva-list-render-l70vs?file=srcApp.vue。