//在我们的html模板中有我们的代码块 主要使用ref属性 来进行动态添加canvas节点<div class="Index_container" id="Index_container" ref="container">//首先在Vue项目中导入我们的PIXI库import * as PIXI from "pixi.js"//可以在mounted中调用我们的方法createCanvas来初始化PIXI画布；mounted(){this.createCanvas()}createCanvas() {this.App = new PIXI.Application({width: 750, //宽height: 1200, //高transparent: true, //开启背景透明antialias: true, //开启抗锯齿 不开启部分机型显示不清晰resolution: 1 //像素比 不为1的话部分安卓手机会有兼容问题// forceCanvas: true, //js-legacy或@pixi/canvas-renderer模块可用 只用canvas 不用webGl//招行APP是内置浏览器一般不用担心这个问题});//将canvas添加到dom中this.$refs.container.appendChild(this.App.view);},
如果只是添加一张图片那么我们可以直接创建一个精灵Sprite；
方法一：
在实例化Sprite时构造参数只能是一个纹理对象texture或者是调用静态方法from传入一个require方法导入的文件//addPicture() {let bgSpirit = new PIXI.Sprite.from(require("../assets/img/green/1.png"));// bgSpirit.width = 80; //也可以设置宽度和高度// bgSpirit.height = 160;// bgSpirit.position.set(60, 60); //设置图片在画布中的初始位置或也可以直接通过.x 与.y来设置如下// bgSpirit.x = 60; // bgSpirit.y = 60；//bgSpirit.interactive = true; //监听该精灵的事件//bgSpirit.on("touchstart", () => {//bgSpirit.x += 10;//});//this.App.stage.addChild(bgSpirit); //可以直接将我们的精灵添加的场景中，//也可以创建一个容器，该容器类似于一个group组，控制容器可以控制容器中所有的精灵let container = new PIXI.Container();//将精灵添加到容器中，可以添加多个精灵container.addChild(bgSpirit);//将容器渲染到画布中this.App.stage.addChild(container1)// container1.addChild(bgSpirit2);// container1.setChildIndex(bgSpirit, 0);// container1.setChildIndex(bgSpirit2, 0);// this.App.stage.addChild(container1);}
方法二：
在构造sprite时构造参数传入一个PIXI.Loader.shared.resources[require("../assets/img/green/1.png")].texture纹理对象require后面的文件名要和下方的一致，因为下面的resources是从缓存中取的//在loader读完文件后会执行load方法回调，因此在load回调中传一个函数等待回调PIXI.Loader.shared.add(require("../assets/img/green/1.png")).load(setup);let self = this;function setup() {let bgSprite = new PIXI.Sprite(PIXI.Loader.shared.resources[require("../assets/img/green/1.png")].texture);bgSprite.width = 600;//可以设置该sprite的宽高bgSprite.height = 600;self.App.stage.addChild(bgSprite);}
动画帧的创建
animationFrame() {//创建一个纹理对象const feed = this.createAnimatedTexture(40, "feed"); //将纹理对象创建动画帧精灵this.feed = new PIXI.AnimatedSprite(feed); //设置动画帧的速度，默认为1this.feed.animationSpeed = 0.2;//是否需要无限循环，默认为truethis.feed.loop = false;// this.feed,play()//开始动画// this.feed.stop() //结束动画//每次从指定位置开始动画帧this.feed.gotoAndPlay(0) // 如指定从0开始动画帧// this.feed.gotoAndStop(xxxx) //指定位置结束动画帧//监听该动画帧的完成事件，只有当loop为false时该事件才会执行this.feed.onComplete = () => {//做些什么，可以用来移除场景中的精灵等工作};// 将这个动画帧添加到场景中this.App.stage.addChild(this.feed);},/*** 创建序列帧动画* @frames 帧数* @imgUrl 序列帧文件名**/createAnimatedTexture(frames, imgUrl) {// 创建动画帧文理对象数组const framesTextures = [];for (let i = 1; i <= frames; i++) {let imgSprArrItem = PIXI.Texture.from(require(`../assets/img/${imgUrl}/${i}.png`));framesTextures.push(imgSprArrItem);}return framesTextures;}
还可以针对sprite添加事件监听
//将我们精灵示例的interactive属性设置为true就可以开启对其的事件监听，默认为false 不监听我们的精灵.interactive = true;//监听之后处理事件js.on("pointertap", (e)=>{//做些什么});
鼠标常用事件
只能通过鼠标操作触发的事件
