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, то есть изменить порядок (снизу вверх) annotationRect-eventBox-rubberBox из исходного eventBox-rubberBox-annotationRect и обратно, на лету, например, когда 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