Pixi.js中文网

使用图像纹理是制作精灵最有用的方法之一，但是Pixi也有自己的底层绘制工具。您可以使用它们制作矩形，形状，线，复杂的多边形和文本。而且，幸运的是，它使用了与Canvas Drawing API几乎相同的API，因此，如果您已经熟悉canvas，就没有什么真正的新知识了。但是最大的好处是，与Canvas Drawing API不同，Pixi通过WebGL在GPU上高性能的渲染和绘制形状。让我们学习如何绘制基本形状。下图就我们将在后面的代码中完成的所有形状。

# 矩形

所有形状的绘制，都先从创建Pixi的Graphics类(Pixi.Graphics)的实例开始。

let rectangle = new Graphics();

调用beginFill方法，给它传入一个16进制的颜色参数来设置矩形的填充颜色。这里我们设置的是淡蓝色。

rectangle.beginFill(0x66CCFF);

如果你想给形状一个外边框outline，使用lineStyle方法。下面我们给矩形一个4像素宽的红色轮廓，透明度alpha设为1。

rectangle.lineStyle(4, 0xFF3300, 1);

然后使用drawRect方法绘制矩形。它的四个参数是x、y、宽度和高度。

rectangle.drawRect(x, y, width, height);

最后，调用endFill方法，来结束绘制。

rectangle.endFill();

It s just like the Canvas Drawing API! Here s all the code you need to draw a rectangle, change its position, and add it to the stage.

跟Canvas绘图API非常像!下面就是绘制一个矩形，改变它的位置，并把它添加到舞台的全部代码：

let rectangle = new Graphics();
rectangle.lineStyle(4, 0xFF3300, 1);
rectangle.beginFill(0x66CCFF);
rectangle.drawRect(0, 0, 64, 64);
rectangle.endFill();
rectangle.x = 170;
rectangle.y = 170;
app.stage.addChild(rectangle);

1
2
3
4
5
6
7
8

这段代码绘制了一个x坐标170，y坐标170，64x64像素大小，带有红色边框的的蓝色矩形。

# 圆形

drawCircle方法用来绘制圆形，它有3个参数，分别是x、y、半径radius。

drawCircle(x, y, radius)

与矩形和精灵不同，圆的x和y表示的是圆中心点。是制作半径为32像素的紫色圆形的代码。

let circle = new Graphics();
circle.beginFill(0x9966FF);
circle.drawCircle(0, 0, 32);
circle.endFill();
circle.x = 64;
circle.y = 130;
app.stage.addChild(circle);

1
2
3
4
5
6
7

# 椭圆

drawEllipse方法用来绘制椭圆。

drawEllipse(x, y, width, height);

x / y位置定义了椭圆的左上角位置（假设椭圆被一个不可见的矩形边界框包围-该框的左上角将代表椭圆的x / y锚点位置）。下面我们绘制一个宽50像素，高20像素的黄色椭圆。

let ellipse = new Graphics();
ellipse.beginFill(0xFFFF00);
ellipse.drawEllipse(0, 0, 50, 20);
ellipse.endFill();
ellipse.x = 180;
ellipse.y = 130;
app.stage.addChild(ellipse);

1
2
3
4
5
6
7

# 圆角矩形

使用drawRoundedRect方法绘制圆角矩形。最后一个参数，圆角半径cornerRadius是一个以像素为单位的数字，它决定了圆角的大小。

drawRoundedRect(x, y, width, height, cornerRadius)

下面我们绘制一个圆角半径为10像素的矩形。

let roundBox = new Graphics();
roundBox.lineStyle(4, 0x99CCFF, 1);
roundBox.beginFill(0xFF9933);
roundBox.drawRoundedRect(0, 0, 84, 36, 10)
roundBox.endFill();
roundBox.x = 48;
roundBox.y = 190;
app.stage.addChild(roundBox);

1
2
3
4
5
6
7
8

# 线

在上面的示例中，您已经看到lineStyle方法使您可以定义线的样式。您可以使用moveTo和lineTo方法绘制线的起点和终点，就像使用Canvas Drawing API一样。下面我们绘制一个4像素宽的白色对角线。

let line = new Graphics();
line.lineStyle(4, 0xFFFFFF, 1);
line.moveTo(0, 0);
line.lineTo(80, 50);
line.x = 32;
line.y = 32;
app.stage.addChild(line);

1
2
3
4
5
6
7

PIXI.Graphics对象（如线条）具有x和y属性，就像精灵一样，因此绘制它们之后，可以将它们放置在舞台上的任何位置。

# 多边形

您可以使用drawPolygon方法将线连接在一起并用颜色填充它们，以制作复杂的形状。 drawPolygon的参数是由位置(x / y点确定一个位置)组成的路径数组。

let path = [
  point1X, point1Y,
  point2X, point2Y,
  point3X, point3Y
];

graphicsObject.drawPolygon(path);

1
2
3
4
5
6
7

下面我们来绘制一个蓝色边框的三角形。这个三角形默认绘制在了0,0位置处，我们通过设置它的x和y属性改变它在舞台上的位置。

let triangle = new Graphics();
triangle.beginFill(0x66FF33);

//Use `drawPolygon` to define the triangle as
//a path array of x/y positions

triangle.drawPolygon([
    -32, 64,             //First point
    32, 64,              //Second point
    0, 0                 //Third point
]);

//Fill shape's color
triangle.endFill();

//Position the triangle after you've drawn it.
//The triangle's x/y position is anchored to its first point in the path
triangle.x = 180;
triangle.y = 22;

app.stage.addChild(triangle);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 显示文字

使用Text对象（PIXI.Text）在舞台上显示文字。最简单的做法如下：

let message = new Text("Hello Pixi!");
app.stage.addChild(message);

1
2

这将在画布上显示“Hello, Pixi”。Pixi的Text对象继承自Sprite类，因此它们包含精灵类的全部属性，如x、y、width、height、alpha和rotation。就像其它精灵一样，可以在舞台上调整文本的位置和大小。例如，您可以使用position.set来设置消息的x和y位置，如下所示：

message.position.set(54, 96);

这默认显示的是无任何样式的文字。但是，如果您想变它的样式，请使用Pixi的TextStyle函数来定义自定义文本样式。就是这样：

let style = new TextStyle({
  fontFamily: "Arial",
  fontSize: 36,
  fill: "white",
  stroke: '#ff3300',
  strokeThickness: 4,
  dropShadow: true,
  dropShadowColor: "#000000",
  dropShadowBlur: 4,
  dropShadowAngle: Math.PI / 6,
  dropShadowDistance: 6,
});

1
2
3
4
5
6
7
8
9
10
11
12

这样，你就创建了一个自定义的文本样式对象。你可以在这里查看所有的允许设置的样式属性。

为了把样式应用于文本，请将style对象添加到Text函数的第二个参数，如下所示：

let message = new Text("Hello Pixi!", style);

如果希望在创建文本对象之后更改它的文本内容，请使用text属性。

message.text = "Text changed!";

如果要重新定义样式属性，请使用style属性。

message.style = {fill: "black", font: "16px PetMe64"};

Pixi通过使用Canvas绘图API将文本呈现到一个不可见的临时canvas元素来生成文本对象。然后将canvas转换为WebGL纹理，这样就可以将其映射到精灵。这就是为什么文本的颜色是一个字符串:它是Canvas绘制API颜色值。与任何canvas颜色值一样，您可以使用'red'、'green'等常见颜色的单词，或者使用rgba、hsla或十六进制值。

Pixi也可以对超长字符串换行。把text的这个样式属性wordWrap设置为true，然后设置wordWrapWidth这个最大宽度像素值。使用align属性设置多行文本的对齐方式。

message.style = {wordWrap: true, wordWrapWidth: 100, align: center};

(注意:align对单行文本不生效。)

如果希望使用自定义字体文件，请使用CSS @font-face规则将字体文件链接到正在运行Pixi应用程序的HTML页面。

@font-face {
  font-family: "fontFamilyName";
  src: url("fonts/fontFile.ttf");
}

1
2
3
4

把@font-face添加到页面的CSS中去。

Pixi还支持位图字体。可以使用Pixi的loader加载位图字体XML文件，就像加载JSON或图像文件一样。

← 精灵分组碰撞检测 →