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 之上时，它们是 "blocking" 这两层。

但是，我不想一直让 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>

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

Vue-Konva：有没有办法动态地重新排序图层？

Vue-Konva: Is there a way to reorder layers on the fly?

konvajs

konva

vue-konva