我想将 Pixi.js 添加到我的 VueJs 组件之一，但它不起作用。我现在想做的是实现 Pixi.js 网站的基本示例之一。
问题是，使用与网站上相同的代码，我只能在屏幕上看到背景颜色。
这是我的 VueJS 组件：
<template>
<body>
<div id='change'>
<router-link class="changepage" to='/OrdreCouches'> >Retour </router-link>
</div>
<div id="pixi"></div>
</body>
</template>
<script>
import * as PIXI from 'pixi.js'
export default {
name: 'Visualisation',
data(){
return{
app: new PIXI.Application()
}
},
methods: {
init: function() {
const app = new PIXI.Application({
width: 800, height: 600, backgroundColor: 0x1099bb, resolution: window.devicePixelRatio || 1,
});
document.body.appendChild(app.view);
const container = new PIXI.Container();
app.stage.addChild(container);
// Create a new texture
const texture = PIXI.Texture.from('./assets/blob.png');
// Create a 5x5 grid of bunnies
for (let i = 0; i < 25; i++) {
const bunny = new PIXI.Sprite(texture);
bunny.anchor.set(0.5);
bunny.x = (i % 5) * 40;
bunny.y = Math.floor(i / 5) * 40;
container.addChild(bunny);
}
// Move container to the center
container.x = app.screen.width / 2;
container.y = app.screen.height / 2;
// Center bunny sprite in local container coordinates
container.pivot.x = container.width / 2;
container.pivot.y = container.height / 2;
// Listen for animate update
app.ticker.add((delta) => {
// rotate the container!
// use delta to create frame-independent transform
container.rotation -= 0.01 * delta;
});
}
},
mounted() {
this.init();
}
}
</script>
<style>
.changepage{
position: absolute;
color: rgb(0, 0, 0);
font-size: 30px;
}
.changepage:hover{
position: absolute;
color: rgb(53, 20, 199);
font-size: 30px;
}
</style>
你能帮我解决这个问题吗？
谢谢！！
const texture = PIXI.Texture.from('./src/assets/blob.png');