如何在 Vuejs 中加载 Pixi 实例？

Question

我正在按照Pixi 教程在 VueJS 组件内学习 PixiJS ，控制台显示此错误：

vue.runtime.esm.js?2b0e:619 [Vue warn]: 渲染错误：“TypeError: 将循环结构转换为 JSON

<template>
  <div>
    {{ displayPixi() }}
  </div>
</template>

<script>
  import * as PIXI from 'pixi.js'

  export default {
    name: 'HelloWorld',

    methods: {
      displayPixi() {
        return new PIXI.Application({width: 256, height: 256})
      }
    }
  }
</script>

如何在 VueJS 中加载 Pixi 实例？

Answer 1

我注意到，当我在里面发布我的问题作为答案时，它被否决了，但我想发布我的工作代码，因为它可能会帮助其他人，并且与在 vue 组件中获取 Pixijs 的概念相同。这也是使用 vue ui 创建应用程序

<template>
  <div class="connections">
    <canvas id="pixi"></canvas>
  </div>
</template>

<script>
import * as PIXI from 'pixi.js'

export default {
  name: 'ConnectionsLayer',
 
  methods: {
    drawPixi() {
      var canvas = document.getElementById('pixi')

      const app = new PIXI.Application({
        width: window.innerWidth,
        height: window.innerHeight,
        antialias: true,
        transparent: true,
        view: canvas,
      })

      let graphics = new PIXI.Graphics() 
      graphics.lineStyle(8, 0x000000)

      //start
      graphics.moveTo(300, 250)
      //end
      graphics.lineTo(500, 250)

      app.stage.addChild(graphics)
    },
  },

  mounted() {
    this.drawPixi()
  },
}
``

Answer 2

那么，您真正需要做的就是按照您提供的教程进行操作。

正如您所看到的，创建应用程序后，您需要将其视图附加到某些东西。

作为该教程中报告的示例document.body.appendChild(app.view);

以“Vue”方式，一个例子可以是在数据中您可以定义

data(){
 return {
   app: new Application(...)
 }

在你安装的挂钩中你可以

 mounted(){
   this.$el.appendChild(this.app.view)
 }

这只是一个例子，按照我在安装的钩子中所说的操作，这不是最好的解决方案，因为如果有条件渲染它会触发，但它会起到作用。