如何在 Vuejs 中加载 Pixi 实例？

Question

我正在按照 Pixi tutorial 在 VueJS 组件中学习 PixiJS 我的控制台显示此错误：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Converting circular structure to 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

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

如您所见，创建应用程序后，您需要将其视图附加到某物。

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

以 "Vue" 的方式，例如您可以在数据中定义

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

在你挂载的挂钩中你可以

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

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

Answer 2

我注意到，当我 post 将我的问题作为答案输入时，它被否决了，但我想 post 我的工作代码，因为它可能对其他人有帮助，并且与获取 Pixijs 的概念相同在一个 vue 组件中。这也是使用 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()
  },
}
``

如何在 Vuejs 中加载 Pixi 实例？

How to load a Pixi instance in Vuejs?

vue.js

pixi.js