Pixijs框架使用

创建Pixi应用程序

1. 使用默认参数

// 创建一个Pixi应用程序（宽默认800，高默认600，背景色值默认为16进制0x000000）
var app = new PIXI.Application();

// 添加到页面中
document.body.appendChild(app.view);

完整代码见 src/01.html

2. 设置参数

// 创建一个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

3. 设置全屏

<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

4. 更改背景颜色

// 创建一个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

项目实战

万圣节装扮