vue-konva: удаление определенного узла со сцены работает неправильно - PullRequest
Новая
       11

vue-konva: удаление определенного узла со сцены работает неправильно

0 голосов
/ 30 марта 2019

Я передаю массив URL-адресов изображений в качестве реквизитов для моего компонента Konva, создавая объект изображения для каждого URL-адреса, сохраняя этот объект в объекте данных (используя метод $set Vue для поддержания реактивности литерала объекта),затем используя v-for, чтобы создать v-image для каждого объекта изображения в моем объекте данных.Кажется, это работает нормально, однако я сталкиваюсь с проблемой, когда при попытке удалить одно из изображений будут удалены 2 изображения.Это происходит только в том случае, если изображение, которое я пытаюсь удалить, не является самым верхним изображением.В консоли я получаю предупреждение Konva warning: Node has no parent. zIndex parameter is ignored..Я догадываюсь, что это результат столкновения метода Конвы destroy с методом vue $delete для объекта данных, используемого в v-for.Я боролся с этим часами, и был бы признателен за любую помощь, которую я могу получить.Соответствующий код ниже.Спасибо!

Родитель 

<template>
  <editor ref="editor" :image-props.sync="images"/>
  <button @click="remove">remove</button>
</template>
export default {
  components: {
    Editor,
  },
  data() {
    return {
      images: [url1, url2, etc...],
    };
  },
  methods: {
    remove() {
      this.$refs.editor.removeSelectedImage();
    },
}

child 

<template>
  <div>
    <v-stage>
      <v-layer>
        <v-group>
          <v-image v-for="image in Object.values(images)" 
           :key="image.id" :config="image"/>
        </v-group>
      </v-layer>
    </v-stage>
  </div>
</template>
export default {
  props: {
    imageProps: Array,
  },
  data() {
    return {
      images: {},
      selectedNode: null //this gets updated on click
    },
  watch: {
    imageProps() {
      this.registerImages();
    },
  mounted() {
    this.registerImages();
  },
  methods: {
    registerImages() {
      this.imageProps.forEach(url => {
         if (!this.images[url]) {
           let img = new Image();
           img.src = url;
           img.onload = () => {
              this.$set(this.images, url, {
                 image: img,
                 draggable: true,
                 name: url,
                 x: 0,
                 y: 0,
              });
           }
        }
     });
  },
  removeSelectedLayer() {
     let newImageProps = this.imageProps.filter(url => url !== this.selectedImageName);
     this.$emit('update:image-props', newImageProps);
     this.selectedNode.destroy();
     this.$delete(this.images, this.selectedImageName);
     this.stageArea.draw();
},

Если я проверяю компонент в Vue devtools, объект images выглядит корректно так же, как и imageProps, (даже дерево Vue DOM выглядит правильно с правильным количеством v-image с), однако холст показывает на 1 изображение меньше, чем следовало бы.Опять же, это происходит, только если я удаляю изображение, которое изначально не было сверху.Кажется, все работает нормально, если я удаляю самое верхнее изображение.

1 Ответ

0 голосов
/ 03 апреля 2019

Когда вы разрабатываете приложение с vue-konva, лучше не трогать Konva узлы вручную (есть редкие случаи, когда вам это нужно, например, обновление Konva.Transformer).

Вы не делаетеНе нужно звонить node.destroy() вручную.Просто предмет для вашего data.

Из вашей демонстрации я вижу, что вы не используете атрибут key (вы используете для этого image.id, но это undefined).В таком случае очень важно использовать ключи.

Обновленная демоверсия: https://codesandbox.io/s/30qpxpx38q

...