Konvajs 组件加载但 canvas 没有

Question

大家好，我有以下组件，它非常简单，只是在 konva js 网站上加载视频演示代码。我遇到的问题是当我在 vue 中加载这个组件时它第一次工作但是如果我将它加载到另一个组件上 canvas 不会显示。

Canvas分量

    <template>
        <div>
            <div id="canvas-container">
              <button id="play">Play</button><button id="pause">Pause</button>
               <div id="container"></div>
            </div>
        </div>
    </template>
    <script>
mounted: async function(){
      console.log("I mounted canvas");
      var width = 1280;
      var height = 720;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });

      var layer = new Konva.Layer();
      stage.add(layer);

      var video = document.createElement('video');
      video.src =
        `/api/files/stock/1080/downloadable/1080.mp4`;

      var image = new Konva.Image({
        image: video,
        draggable: true,
        x: 50,
        y: 20,
      });
      layer.add(image);

      var text = new Konva.Text({
        text: 'Loading video...',
        width: stage.width(),
        height: stage.height(),
        align: 'center',
        verticalAlign: 'middle',
      });
      layer.add(text);

      layer.draw();

      var anim = new Konva.Animation(function () {
        // do nothing, animation just need to update the layer
        console.log("animation called");
      }, layer);

      // update Konva.Image size when meta is loaded
      video.addEventListener('loadedmetadata', function (e) {
        text.text('Press PLAY...');
        image.width(video.videoWidth);
        image.height(video.videoHeight);
      });

      document.getElementById('play').addEventListener('click', function () {
        text.destroy();
        video.play();
        anim.start();
      });
      document.getElementById('pause').addEventListener('click', function () {
        video.pause();
        anim.stop();
      });
    }

}
</script>
<style scoped>
#canvas-container{ 
   max-height: 75vh;
   max-width: 67vw;
  overflow: auto;
  }
</style>

比我在以下组件中包含该代码托盘台阶

<template>
  <div class="palette-step">
    <div v-if="!selectColors">
      <template v-if="!currentVideo.json">
      <thumbnail/>
      </template>
      <template v-else>
        <p>Holy crap</p>
        <canvas-view/>
       </template>
</div>
</div>
</template>

和文本步骤

<template>
  <div class="text-step">
    <template v-if="this.currentVideo.json && this.dataClay.matrix[0]">
      <canvas-view/>
    </template>
    <template v-else>
      <thumbnail/>
    </template>

我这样称呼这些组件：

<template>
  <div class="wizard">
    <component :is="component"/>
    <controls/>
  </div>
</template> 

<script>
import FileStep from "./Steps/FileStep.vue";
import TextStep from "./Steps/TextStep.vue";
import ImageStep from "./Steps/ImageStep.vue";
import PaletteStep from "./Steps/PaletteStep.vue";
import SubmitStep from "./Steps/SubmitStep.vue";
import Controls from "./Controls.vue";
import SignupStep from "./Steps/SignupStep.vue";


import { mapGetters } from "vuex";

export default {
  components: {
    PaletteStep,
    FileStep,
    TextStep,
    ImageStep,
    SubmitStep,
    Controls,
    SignupStep,
    CanvasView
  },
  props: ["type"],
  computed: {
    ...mapGetters(["currentStepDetails"]),
    component() {
      if (this.type) {
        return this.type + "-step";
      }
    },
    kioskMode() {
      return process.env.VUE_APP_KIOSK_MODE === "offline";
    }
  }
  // Add error in case one of the steps fails to load
};
</script>

<style>
.wizard {
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  margin: 20px auto 0 auto;
}
@media only screen and (max-width: 900px) {
  .wizard {
    margin-top: -15px;
  }
}
@media only screen and (max-width: 1200px) {
  .wizard {
    max-width: 750px;
  }
}
@media only screen and (min-width: 1200px) {
  .wizard {
    max-width: 750px;
  }
}
.instructions {
  width: 100%;
  font-style: italic;
}
</style>

我第一次运行它加载的项目

但是如果我前进然后返回或者只是前进它不会加载。然而，组件在那里，并且使用我的代码运行s 挂载了函数。 canvas 没有出现。我也知道我的 if 条件正在工作，因为 Holy Crap 出现了。

如您所见，在未加载时没有 Konva 内容 div。为什么是这样？如果我导航到不使用 canvas-view 组件的步骤（组件），然后返回它就可以了。但是如果我从一个包含 canvas-view 到另一个包含 canvas-view 它不会出现。

Answer 1

奇怪的是，当我摆脱过渡组时，它与我的 <transition-group> 有关，它工作得很好。不太确定为什么。

Konvajs 组件加载但 canvas 没有

Konvajs component loads but canvas doesn't

javascript

vue.js

konvajs