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

# 矩形

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

let rectangle = new Graphics();
1

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

rectangle.beginFill(0x66CCFF);
1

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

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

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

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

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

rectangle.endFill();
1

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个参数,分别是xy半径radius

drawCircle(x, y, radius)
1

与矩形和精灵不同,圆的xy表示的是圆中心点。 是制作半径为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);
1

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)
1

下面我们绘制一个圆角半径为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方法使您可以定义线的样式。 您可以使用moveTolineTo方法绘制线的起点和终点,就像使用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对象(如线条)具有xy属性,就像精灵一样,因此绘制它们之后,可以将它们放置在舞台上的任何位置。

# 多边形

您可以使用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类,因此它们包含精灵类的全部属性,如xywidthheightalpharotation。就像其它精灵一样,可以在舞台上调整文本的位置和大小。 例如,您可以使用position.set来设置消息的x和y位置,如下所示:

message.position.set(54, 96);
1

这默认显示的是无任何样式的文字。 但是,如果您想变它的样式,请使用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

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

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

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

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

message.text = "Text changed!";
1

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

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

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};
1

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

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

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

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

Pixi还支持位图字体 (opens new window)。可以使用Pixi的loader加载位图字体XML文件,就像加载JSON或图像文件一样。

lastUpdate: 11/16/2021, 6:11:55 AM