动态 PixiJS canvas 在 vue 应用程序中首次加载后出错

Question

我正在使用 Vue.js 构建一个网站，并使用 PixiJS 动态绘制 canvas 以及来自大 json 文件的数据。 canvas 作为组件生成并在视图中使用。

现在，当我第一次使用 canvas 导航到视图时，一切看起来都很好。但是当我开始在视图之间导航时，绘图全乱了，精灵都在那里，但看起来不合时宜且凌乱。当我刷新页面时，canvas 看起来又好了。这是一张图片：

我不确定这里的问题是什么，但我觉得这是多种因素的结合。也许我正在使用的 100k 行 json 文件与它有关（当我与之交互时，视图也感觉有点慢）

这是我的 Vue 组件的样子：

export default {
  name: 'Tree',
  data () {
    return {
      tree: {},
      app: new PIXI.Application()
    }
  },
  beforeMount () {
    this.tree = this.treeStateData
    PIXI.utils.clearTextureCache()
    PIXI.loader.reset()
  },
  mounted () {
    this.loadTree()
  },
  computed: {
    ...mapState([
      'treeStateData'
    ])
  },
  methods: {
    loadTree () {
      document.getElementById('tree').appendChild(this.app.view)

      // Load images
      PIXI.loader
        .add('background', require('@/assets/Background1.png'))
        .add('1', require('@/assets/PSGroupBackground1.png'))
      // lots more
        .load(this.drawTree)
    },
    drawTree () {
      const treeData = this.tree

      // Create viewport
      const viewport = new Viewport()
      this.app.stage.addChild(viewport)

      // Here i create some containers

      // Here i work with the data from the json and put stuff in the containers
    }
  }
}

我的Vue项目结构是这样的：
观看次数

views/home.vue    
// Just a view with a link to details.vue

views/details.vue    
// A view that had <tree> component in it
<template>
  <div>
    <tree></tree>
  </div>
</template>

<script>
import Tree from '@/components/tree'

export default {
  name: 'Details',
  data () {},
  components: {
    Tree
  }
}
</script>

组件

components/tree.vue
// Here is where the tree canvas is generated

有人知道如何在这方面取得进展吗？我应该重新考虑我该怎么做吗？

Answer 1

由于第一次加载时一切正常，因此在路由之间导航时缓存组件可能会有所帮助。它还省去了每次重新计算 PixiJS 显示。

将 router-view 包装在 keep-alive 组件中：

<keep-alive>
   <router-view></router-view>
</keep-alive>

动态 PixiJS canvas 在 vue 应用程序中首次加载后出错

Dynamic PixiJS canvas goes wrong after first load in vue app

javascript

vue.js

vuex

vue-router

pixi.js