使用loader加载图片
引用自gpt
- 首先需要使用 PIXI 的
Loader
类或PIXI.Loader.shared
加载图片资源。这可以通过以下代码实现:
import * as PIXI from 'pixi.js';
// 创建 PIXI Loader 实例
const loader = PIXI.Loader.shared;
// 添加要加载的图片资源
loader.add('image', 'path/to/image.png');
// 监听加载完成事件
loader.load(() => {
console.log('图片资源加载完成');
});
- 创建 Sprite 对象在加载完成事件中,可以创建
PIXI.Sprite
对象来表示加载完成的图片资源。以下是一个示例代码: -
// 在加载完成事件中创建 Sprite 对象 const texture = loader.resources.image.texture; const sprite = new PIXI.Sprite(texture);
- 设置 Sprite 对象的属性在创建
Sprite
对象后,可以设置其在舞台中显示的位置、缩放比例、旋转角度等属性。以下是一些常用的属性设置方法:sprite.anchor.set(0.5, 0.5); // 设置锚点 sprite.position.set(100, 100); // 设置位置 sprite.scale.set(0.5, 0.5); // 设置缩放比例 sprite.rotation = 0.5; // 设置旋转角度
- 将 Sprite 对象添加到舞台中最后,将创建好的
Sprite
对象添加到 PIXI 应用的舞台中,这可以使用PIXI.Application
实例中的stage
属性来实现:const app = new PIXI.Application(/* options */); // 将 Sprite 对象添加到舞台中 app.stage.addChild(sprite);
在上述步骤完成后,图片就会被渲染到屏幕上了。完整代码如下:
import * as PIXI from 'pixi.js';
const app = new PIXI.Application({
width: 800,
height: 600,
});
document.body.appendChild(app.view);
const loader = PIXI.Loader.shared;
loader.add('image', 'path/to/image.png');
loader.load(() => {
const texture = loader.resources.image.texture;
const sprite = new PIXI.Sprite(texture);
sprite.anchor.set(0.5, 0.5);
sprite.position.set(app.screen.width / 2, app.screen.height / 2);
app.stage.addChild(sprite);
});
原因:pixijs的版本不对 原来他们是6.2.0,虽然现在的package.json里面也是6.2.0但,package-lock.json里还有一些东西。卸载pixijs再重新安装就行了