vue 앱에서 처음 로드한 후 다이내믹 PixiJ 캔버스가 잘못됨

vue 앱에서 처음 로드한 후 다이내믹 PixiJ 캔버스가 잘못됨

Vue.js로 웹사이트를 구축하고 PixiJs를 사용하여 큰 json 파일에서 가져온 데이터로 캔버스를 동적으로 그립니다.캔버스는 컴포넌트로 생성되어 뷰에서 사용됩니다.

처음으로 캔버스를 사용하여 뷰로 이동하면 모든 것이 정상으로 보입니다.하지만 뷰 사이를 이동하기 시작하면, 그림이 엉망이고 스프라이트는 다 있지만, 모두 뒤죽박죽으로 보입니다.그런 다음 페이지를 새로 고치면 캔버스는 다시 정상으로 표시됩니다.다음은 이미지입니다.

무슨 문제인지는 모르겠지만 여러 가지가 복합적으로 작용한 것 같아요.사용하고 있는 10만 회선 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

이 일을 어떻게 진전시킬지 아는 사람?내가 이걸 어떻게 하는지 다시 생각해봐야 할까?

모든 것이 첫 번째 부하로 동작하기 때문에 컴포넌트를 캐시하면 루트 사이를 이동할 때 도움이 될 수 있습니다.또, PixiJ 표시를 매번 재계산할 필요도 없습니다.

를 랩하다router-view컴포넌트:

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

언급URL : https://stackoverflow.com/questions/65047665/dynamic-pixijs-canvas-goes-wrong-after-first-load-in-vue-app