pixi.js 的官网和pixi中文网站都有基本的图像加载到纹理缓存的例子,但是有时候我们需要使用图片数组加载到纹理缓存中如何实现呢
核心代码:
methods: {
// 渲染器 loader 加载图片资源 函数
loadTexture() {
var loader = new PIXI.loaders.Loader();
//this.manifest 是你自己存放的数组,名字自定义
loader.add(this.manifest);
loader.on("progress", () => {});
loader.load((e) => {
//保存到this.resources
this.resources = e.resources;
});
},
}
data() 中数据最好给一个别名 ,方便操作,我这里给他一个name的别名
data(){
return{
manifest: [
// 删除 缩放 旋转按钮
// require 填写你自己的路径,记得不需要加~
{name: "delete_btn",url: require("@/assets/images/p2/delete_btn.png"),},
{name: "rotate_btn",url: require("@/assets/images/p2/rotate_btn.png"),},
{name: "scale_btn", url: require("@/assets/images/p2/scale_btn.png") },
]
}
}
Sprite 使用纹理的话直接
//this.resources['填写你需要加载的name 和 data中定义的名字一致']
new PIXI.Sprite(this.resources["delete_btn"].texture);