我正在跟随Pixi tutorial 在 VueJS 组件中学习 PixiJS 我控制台显示此错误：
vue.runtime.esm.js?2b0e:619 [Vue 警告]：渲染错误：“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 实例？
【问题讨论】：
我注意到，当我在里面发布我的问题作为答案时，它被否决了，但我想发布我的工作代码，因为它可以帮助其他人，并且与将 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()
},
}
``
【讨论】：
好吧，您真正需要做的是按照您提供的教程进行操作。
如您所见，在创建应用程序后，您需要将其视图附加到某些东西上。
作为该教程中报告的示例document.body.appendChild(app.view);
以“Vue”的方式，一个例子可以是你可以定义的数据
data(){
return {
app: new Application(...)
}
你可以在挂载的钩子中
mounted(){
this.$el.appendChild(this.app.view)
}
这只是一个例子，按照我在挂载的钩子中说的做这不是最好的解决方案，因为如果有条件渲染它会触发，但它会起到作用。
【讨论】：
你搞定了吗？我正在尝试加载一个 pixi 对象，如下所示...没有错误，但我的目标画布元素中没有任何内容？
<template>
<div class="connections">
<canvas id="pixi"></canvas>
</div>
</template>
<script>
import { mapState } from 'vuex'
import * as PIXI from 'pixi.js'
var canvas = document.getElementById('pixi')
export default {
name: 'ConnectionsLayer',
computed: mapState({
toolmode: (state) => state.ui.mode,
}),
data() {
return {
app: new PIXI.Application({
width: window.innerWidth,
height: window.innerHeight,
antialias: true,
transparent: true,
view: canvas,
}),
}
},
methods: {},
mounted() {
let graphics = new PIXI.Graphics()
graphics.x = this.app.renderer.width / 2
graphics.y = this.app.renderer.width / 2
graphics.lineStyle(0)
graphics.beginFill(0xde3249, 1)
graphics.drawCircle(100, 250, 50)
graphics.endFill()
graphics.lineStyle(0)
graphics.beginFill(0xde3249, 1)
graphics.drawCircle(300, 250, 50)
graphics.endFill()
graphics.lineStyle(2, 0xffffff, 1)
graphics.moveTo(100, 250)
graphics.lineTo(300, 250)
graphics.lineStyle(2, 0xffffff, 1)
graphics.moveTo(0, 0)
this.app.stage.addChild(graphics)
},
}
</script>
【讨论】：