Pixijs框架使用
2020-10-12 本文已影响0人
pengjielele
创建Pixi应用程序
- 使用默认参数
// 创建一个Pixi应用程序（宽默认800，高默认600，背景色值默认为16进制0x000000）
var app = new PIXI.Application();
// 添加到页面中
document.body.appendChild(app.view);
完整代码见 src/01.html
- 设置参数
// 创建一个Pixi应用程序（宽1000，高900，背景色值为16进制0x1099bb，即#1099bb）
var app = new PIXI.Application({
width: 1000,
height: 900,
backgroundColor: 0x1099bb,
forceCanvas: true, //强制使用canvas引擎绘制
});
// 添加到页面中
document.body.appendChild(app.view);
// 完整参数见http://pixijs.download/release/docs/PIXI.Application.html
完整代码见 src/02.html
- 设置全屏
<style>
* {padding: 0; margin: 0}
</style>
// 创建一个铺满全屏的Pixi应用程序
var app = new PIXI.Application({backgroundColor: 0x1099bb});
app.renderer.view.style.position = "absolute";
app.renderer.view.style.display = "block";
app.renderer.autoResize = true;
app.renderer.resize(window.innerWidth, window.innerHeight);
// 添加到页面中
document.body.appendChild(app.view);
完整代码见 src/03.html
- 更改背景颜色
// 创建一个Pixi应用程序（宽默认800，高默认600，背景色值默认为16进制0x000000）
var app = new PIXI.Application();
// 添加到页面中
document.body.appendChild(app.view);
var colors = ['0x1099bb', '0xffa631', '0xa3d900', '0x065279'];
document.querySelector('#change').onclick = function(){
var idx = parseInt(Math.random() * colors.length,10);
app.renderer.backgroundColor = colors[idx];
}
完整代码见 src/04.html
创建容器/创建图像
// 创建一个容器，并设置居中
var container = new PIXI.Container();
container.x = app.screen.width / 2;
container.y = app.screen.height / 2;
app.stage.addChild(container);
// 创建一个图像，并添加到容器中
var head = PIXI.Sprite.fromImage('images/head.png');
head.anchor.set(0.5); //设置锚点为中心
app.stage.addChild.addChild(head);
完整代码见 src/05.html
实现图像拖动
var head = PIXI.Sprite.fromImage('images/head.png');
// 实现头像拖动
head.interactive = true; //设置为可交互的
head.degrees = 0; //设置旋转初始为0
head
.on('touchstart', onDragStart)
.on('touchend', onDragEnd)
.on('touchmove', onDragMove)
function onDragStart(event) {
this.data = event.data;
this.alpha = 0.5;
this.dragging = true;
}
function onDragEnd() {
this.alpha = 1;
this.dragging = false;
this.data = null;
}
function onDragMove() {
if (this.dragging) {
this.position = this.data.getLocalPosition(this.parent);
}
}
完整代码见 src/06.html
实现图像放大/缩小/旋转
var head = PIXI.Sprite.fromImage('images/head.png');
// 放大
head.scale.x *= 1.25;
head.scale.y *= 1.25;
// 缩小
head.scale.x /= 1.25;
head.scale.y /= 1.25;
// 向左旋转
head.degrees = head.degrees - 10;
head.rotation = head.degrees * Math.PI / 180;
// 向右旋转
head.degrees = head.degrees + 10;
head.rotation = head.degrees * Math.PI / 180;
完整代码见 src/06.html
绘制场景
var SCENES = ["../images/scene1.png", "../images/scene2.png"]
function drawScene(idx) {
var scene = PIXI.Sprite.fromImage(SCENES[idx]);
scene.width = app.screen.width;
scene.height = app.screen.height;
scene.interactive = true;
scene.buttonMode = true;
scene.zIndex = 100;
app.stage.addChild(scene);
}
drawScene(0);
drawScene(1);
完整代码见 src/07.html
绘制虚线
function drawDash(x0, y0, x1, y1, linewidth) {
var dashed = new PIXI.Graphics();
dashed.lineStyle(1, 0x59e3e8, 1); // linewidth,color,alpha
dashed.moveTo(0, 0);
dashed.lineTo(linewidth, 0);
dashed.moveTo(linewidth * 1.5, 0);
dashed.lineTo(linewidth * 2.5, 0);
var dashedtexture = dashed.generateCanvasTexture(1, 1);
var linelength = Math.pow(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2), 0.5);
var tilingSprite = new PIXI.extras.TilingSprite(dashedtexture, linelength, linewidth);
tilingSprite.x = x0;
tilingSprite.y = y0;
tilingSprite.rotation = angle(x0, y0, x1, y1) * Math.PI / 180;
tilingSprite.pivot.set(linewidth / 2, linewidth / 2);
return tilingSprite;
function angle(x0, y0, x1, y1) {
var diff_x = Math.abs(x1 - x0),
diff_y = Math.abs(y1 - y0);
var cita;
if (x1 > x0) {
if (y1 > y0) {
cita = 360 * Math.atan(diff_y / diff_x) / (2 * Math.PI);
} else {
if (y1 < y0) {
cita = -360 * Math.atan(diff_y / diff_x) / (2 * Math.PI);
} else {
cita = 0;
}
}
} else {
if (x1 < x0) {
if (y1 > y0) {
cita = 180 - 360 * Math.atan(diff_y / diff_x) / (2 * Math.PI);
} else {
if (y1 < y0) {
cita = 180 + 360 * Math.atan(diff_y / diff_x) / (2 * Math.PI);
} else {
cita = 180;
}
}
} else {
if (y1 > y0) {
cita = 90;
} else {
if (y1 < y0) {
cita = -90;
} else {
cita = 0;
}
}
}
}
return cita;
}
}
完整代码见 src/08.html
绘制矩形
function drawRect(x,y,width,height,linewidth){
var rect = new PIXI.Container();
var top = drawDash(x,y,x+width,y,linewidth); //top border
var bottom = drawDash(x,y+height,x+width,y+height,linewidth);//bottom border
var left = drawDash(x,y,x,y+height,linewidth); //left border
var right = drawDash(x+width,y,x+width,y+height,linewidth); //right border
rect.addChild(top);
rect.addChild(bottom);
rect.addChild(left);
rect.addChild(right);
return rect;
}
完整代码见 src/08.html
