注：本文仅简单介绍pixijs在vue中的一些基础使用。
PIXI的引入
npm install pixi.js
import * as PIXI from 'pixi.js'
复制代码需要注意，pixi4 的参考文章不一定适用于pixi5， 并且以不同方式引入 之后的使用方法也有所不同，最好按照官方文档走
初始化一个 Application
<div id="px-render"></div>
mounted () {
this.app = new PIXI.Application({
width: 300,
height: 300,
antialias: true,
transparent: false,
resolution: 1,
backgroundColor: 0x1e90ff
})
let dom = document.getElementById('px-render');
dom.appendChild(this.app.view);
// this.createVideo();
},
复制代码初始化一个application，并将其插入到 id='px-render'的div块中, 此时我们创建了一个宽高为300px的正方形
在pixi中绘图
const circle = new PIXI.Graphics();
circle.beginFill(0xfb6a8f);
circle.drawCircle(0, 0, 32);
circle.endFill();
circle.x = 130;
circle.y = 130;
this.app.stage.addChild(circle);
复制代码
在pixi中插入图片并添加动画/事件
const avatar = new PIXI.Sprite.from(require('./test.jpg'));
avatar.scale.set(0.5, 0.5);
// 设置位置为 中心
avatar.x = this.app.renderer.width / 2;
avatar.y = this.app.renderer.height / 2;
// 设置缩放比例为0.5
avatar.anchor.set(0.5, 0.5);
// 允许绑定事件
avatar.interactive = true;
绑定click事件
avatar.on('click', () => {
// 透明度为0.5
avatar.alpha = 0.5;
});
this.app.stage.addChild(avatar);
// 添加旋转动画
this.app.ticker.add(() => {
avatar.rotation += 0.01;
})
复制代码
在pixijs中插入视频 并控制播放 关闭
const texture = PIXI.Texture.from(require('./video.mp4'));
let avatar = new PIXI.Sprite(texture);
avatar.scale.set(0.5, 0.5);
let videoSource = texture.baseTexture.resource.source;
console.warn(texture.baseTexture)
avatar.interactive = true;
let pixiBtn = document.getElementById("play");
let pauseBtn = document.getElementById("pause");
pixiBtn.addEventListener("click", function () {
videoSource.play();
});
pauseBtn.addEventListener("click", function () {
videoSource.pause()
});
avatar.anchor.set(0.5, 0.5);
this.app.stage.addChild(avatar);
复制代码参考文章
附录 vue文件代码
<template>
<div class="hello">
<button id="play">播放</button>
<button id="pause">暂停</button>
<button id="create" @click="createVideo">creatVideo</button>
<button @click="createCircle">画圆</button>
<button @click="createImg">引入图片</button>
<button @click="createContainer">容器加载图片</button>
<button @click="loadImg">load加载图片</button>
<div id="px-render"></div>
</div>
</template>
<script>
/*eslint-disable*/
import * as PIXI from 'pixi.js'
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
app: null,
}
},
mounted () {
this.app = new PIXI.Application({
width: 300,
height: 300,
antialias: true,
transparent: false,
resolution: 1,
backgroundColor: 0x1e90ff
})
let dom = document.getElementById('px-render');
dom.appendChild(this.app.view);
// this.createVideo();
},
methods: {
loadImg () {
let loader = new PIXI.Loader();
loader.add('bill', 'http://pic.deepred5.com/bilibili.jpg').load(setup);
loader.onProgress.add((loader) => {
console.warn('loaderProgress', loader.progress);
})
const _this = this;
function setup() {
let bill = new PIXI.Sprite(loader.resources['bill'].texture);
console.warn(bill)
bill.width = _this.app.renderer.width / 2;
bill.height = _this.app.renderer.height / 2;
_this.app.stage.addChild(bill);
}
},
createContainer() {
let myContainer = new PIXI.Container();
myContainer.position.set(50, 50);
let rectangle = new PIXI.Graphics();
rectangle.beginFill(0x000000);
rectangle.drawRect(0, 0, 64, 64);
rectangle.endFill();
let rectangle2 = new PIXI.Graphics();
rectangle2.beginFill(0xFFFFFF);
rectangle2.drawRect(0, 0, 64, 64);
rectangle2.endFill();
rectangle2.position.set(20, 20);
myContainer.addChild(rectangle);
myContainer.addChild(rectangle2);
this.app.stage.addChild(myContainer);
},
createCircle () {
const circle = new PIXI.Graphics();
circle.beginFill(0xfb6a8f);
circle.drawCircle(0, 0, 32);
circle.endFill();
circle.x = 130;
circle.y = 130;
this.app.stage.addChild(circle);
},
createImg () {
const avatar = new PIXI.Sprite.from(require('./test.jpg'));
avatar.scale.set(0.5, 0.5);
avatar.x = this.app.renderer.width / 2;
avatar.y = this.app.renderer.height / 2;
avatar.anchor.set(0.5, 0.5);
// 绑定事件
avatar.interactive = true;
avatar.on('click', () => {
avatar.alpha = 0.5;
});
this.app.stage.addChild(avatar);
this.app.ticker.add(() => {
avatar.rotation += 0.01;
})
},
createVideo () {
const texture = PIXI.Texture.from(require('./video.mp4'));
let avatar = new PIXI.Sprite(texture);
avatar.scale.set(0.5, 0.5);
let videoSource = texture.baseTexture.resource.source;
console.warn(texture.baseTexture)
avatar.interactive = true;
let pixiBtn = document.getElementById("play");
let pauseBtn = document.getElementById("pause");
pixiBtn.addEventListener("click", function () {
videoSource.play();
});
pauseBtn.addEventListener("click", function () {
videoSource.pause()
});
avatar.anchor.set(0.5, 0.5);
this.app.stage.addChild(avatar);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
#px-render {
margin-top: 20px;
}
</style>
复制代码文件结构如下
注意
再说一次 不同版本的实现方式可能有区别 不要盲目参考
