一篇带给你Pixi.js 入门 （一）：绘制图形

简单入门 pixi.js。

pixi.js 是一个快速、灵活的 2D WebGL 渲染引擎。

该库基于 Canvas 封装，默认优先使用 WebGL 进行二维图形绘制，充分利用 GPU 硬件加速能力。如果不支持，会回退到 2D 模式，因为 2D 模式是上层的抽象，所以性能会差一些。

开始

首先创建一个 Application 实例。

我们使用 PIXI.Application 类创建一个新 PixiJS 应用。

import * as PIXI from "pixi.js";

const app = new PIXI.Application({ width: 640, height: 360 });
document.body.appendChild(app.view);

// 绘制内容
// ...

该类可以传入配置对象，比如画布宽高（width / height）、背景色（backgroudColor，默认为黑色）、挂载的 canvas 元素（view，不提供 PixiJS 会创建一个）等。

app.view 可以得到 PixiJS 应用挂载的 Canvas 元素。

绘制图形

绘制图形需要先创建 Graphics 实例，然后调用其下的方法。

一个 Graphics 代表一个图形，当然也可以在单个 Graphics 绘制多个图形。

绘制红色矩形：

const rect = new PIXI.Graphics();

rect.beginFill(0xff0044); // 填充色
rect.lineStyle({ width: 2, color: 0x0000ff }); // 描边
rect.drawRect(10, 10, 100, 50);
rect.endFill();

app.stage.addChild(rect);

app.stage 是图形渲染的根节点，我们创建的 graphics 需要添加到 stage 下，这样才会被渲染出来。

绘制圆形：

const circle = new PIXI.Graphics();

circle.beginFill(0x00ff00);
circle.drawCircle(200, 10, 50);
circle.endFill();

app.stage.addChild(circle);

绘制精灵：

const bunny = PIXI.Sprite.from('examples/assets/bunny.png');

bunny.anchor.set(0.5); // 设置精灵图中心点

bunny.x = app.screen.width / 2; // 将精灵图绘制在画布正中央
bunny.y = app.screen.height / 2;

app.stage.addChild(bunny);

绘制曲线不支持 SVG 的那种方便的 指令字符串 写法：

// 不支持
const trackPath = new Path2D("M10 10 h 80 v 80 h -80 Z");

只能用类似原生 Canvas 写法那样，一步步绘制了。个人觉得很繁琐，指令字符串言简意赅多好的抽象。

const path = new PIXI.Graphics();
path.lineStyle({ width: 1, color: 0x0000ff });
path.moveTo(10, 10);
path.lineTo(20, 100);
path.bezierCurveTo(40, 120, 60, 120, 80, 100)
app.stage.addChild(path);

容器 Container

使用容器，可以将多个图形进行组合，然后在其上添加位移、旋转等属性，其下的图形会得到这些效果。

Container 不绘制图形，它组合图形，类似 SVG 的 group 元素。

const container = new PIXI.Container();
container.x = 80;
container.y = 80;
container.addChild(rect, circle);
app.stage.addChild(container);

结尾

一些基本的用法。