Vue -Конва: Есть ли способ изменить порядок слоев на лету? - PullRequest
Новая
       24

Vue -Конва: Есть ли способ изменить порядок слоев на лету?

0 голосов
/ 22 апреля 2020

Итак, я работал с 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 сверху of annotationRect, потому что мне нужно иметь возможность взаимодействовать с annotationRect для их перемещения, изменения их размера и т. д. c.

Есть ли способ для меня изменить порядок событий EventBox, rubberBox и annotationRect, т.е. изменить порядок на (снизу вверх) annotationRect-eventBox-rubberBox из оригинального eventBox-rubberBox-annotationRect и обратно, на лету, например, когда компонент vue получает событие от другого компонента?

1 Ответ

1 голос
/ 22 апреля 2020

Вам необходимо определить свои 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

...