如何解决Vuex Store + PixiJ使用Mounted渲染太早了吗?
如果我在代码上进行编辑,则连接会突然在浏览器中呈现,但是在浏览器中的初始加载时,它们将不显示,并且它的数组configConnections尚未就绪/为空,因此我需要调用drawPixi( )以后以某种方式?也许使用nexttick?还是我在这里错过了一些东西?
<template>
<div class="connections">
<canvas id="pixi"></canvas>
</div>
</template>
<script>
import { mapState } from 'vuex'
import * as PIXI from 'pixi.js'
export default {
name: 'ConnectionsLayer',computed: mapState({
configConnections: (state) => state.configConnections,}),methods: {
drawPixi() {
var i
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,0xcab6ff)
for (i = 0; i < Object.keys(this.configConnections).length; i++) {
//start
graphics.moveTo(
this.configConnections[i].x_pos_start,this.configConnections[i].y_pos_start
)
//end
graphics.lineTo(
this.configConnections[i].x_pos_end,this.configConnections[i].y_pos_end
)
}
app.stage.addChild(graphics)
},},mounted() {
this.drawPixi()
},}
</script>
解决方法
<div class="connections">
<canvas ref="pixi" id="pixi"></canvas>
</div>
</template>
<script>
import { mapState } from 'vuex'
import * as PIXI from 'pixi.js'
export default {
name: 'ConnectionsLayer',computed: mapState({
configConnections: (state) => state.configConnections,}),watch: {
configConnections: {
deep: true,handler() {
this.drawPixi()
},},methods: {
drawPixi() {
var i
this.canvas = this.$refs.pixi
const stage = this.PIXIApp.stage
let graphics = new PIXI.Graphics()
graphics.lineStyle(8,0xcab6ff)
for (i = 0; i < Object.keys(this.configConnections).length; i++) {
//start
graphics.moveTo(
this.configConnections[i].x_pos_start,this.configConnections[i].y_pos_start
)
//end
graphics.lineTo(
this.configConnections[i].x_pos_end,this.configConnections[i].y_pos_end
)
}
for (var j = stage.children.length - 1; j >= 0; j--) {
stage.removeChild(stage.children[j])
}
stage.addChild(graphics)
},mounted() {
const canvas = this.$refs.pixi
this.PIXIApp = new PIXI.Application({
width: window.innerWidth,height: window.innerHeight,antialias: true,transparent: true,view: canvas,})
this.drawPixi()
},}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。