PIXI 基本图形-PIXI文档翻译(6)

1、基本图形
使用图像纹理是制作精灵的最有用的方法之一，但Pixi也有自己的低级绘图工具。您可以使用它们来制作矩形，形状，线条，复杂的多边形和文本。并且，幸运的是，它使用与Canvas绘图API几乎相同的API，所以，如果你已经熟悉canvas，这里没有什么真正新的学习。但是最大的优点是，与Canvas绘图API不同，您使用Pixi绘制的形状是由GPU上的WebGL渲染的。Pixi允许您访问所有未使用的性能功率。让我们快速浏览如何制作一些基本形状。这里是我们将在代码中提出的所有形状。




(1)矩形

所有形状都是先创建 Pixi 的 Graphics 实例来实现

var rectangle = new Graphics();

使用 beginFill 十六进制代码值填充矩形的内部颜色，填充浅蓝色如下：

rectangle.beginFill(0x66CCFF);

如果你想给形状一个外边框，使用lineStyle方法。这里是如何给矩形一个4像素宽的红色轮廓，alpha 值为1。

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

使用drawRect方法来绘制矩形。它的四个参数x，y，width和height。

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

完成后需要调用endFill方法

rectangle.endFill();

它就像Canvas绘图API！这里是所有的代码，你需要绘制一个矩形，改变其位置，并将其添加到舞台上。

var 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;
stage.addChild(rectangle);

此代码使用一个64 x 64的蓝色矩形，其红色边框的x和y位置为170。

(2) 圆形
使用drawCircle方法创建一个圆。它的三个论点是 x，y和radius

drawCircle(x, y, radius)

与矩形和子画面不同，圆的x和y位置也是其中心点。以下是如何制作一个半径为32像素的紫色圆圈。

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

(3)椭圆
作为一个在画布绘图API，Pixi允许你用该drawEllipse方法绘制一个椭圆。

drawEllipse(x, y, width, height);

x / y位置定义椭圆的左上角（假设椭圆被一个不可见的矩形边框包围 - 该框的左上角将表示椭圆的x / y锚点位置）。这是一个黄色椭圆形，宽50像素，高20像素。

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

(4) 圆角矩形
Pixi还允许你使用drawRoundedRect 方法做圆角矩形。最后一个参数cornerRadius是一个以像素为单位的数字，用于确定角点应舍入多少。

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

以下是如何制作一个圆角矩形，圆角半径为10像素。

var 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;
stage.addChild(roundBox);

(5)直线
你在上面的例子中看到，该lineStyle方法允许你定义一行。您可以使用moveTo和lineTo方法来绘制线的起点和终点，就像使用Canvas Drawing API一样。这里是如何绘制一个4像素宽，白色对角线。

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

PIXI.Graphics对象，像线，有x和y值，就像精灵，所以你可以将它们放置在舞台上的任何地方，当你绘制它们。

(6)多边形
您可以将线连接在一起并使用颜色填充它们，以使用该drawPolygon方法来创建复杂的形状。drawPolygon的参数是一个x / y点的路径数组，用于定义形状上每个点的位置。

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

graphicsObject.drawPolygon(path);

drawPolygon将这三个点合在一起做出形状。以下是如何使用drawPolygon将三条线连接在一起，制作一个带有蓝色边框的红色三角形。三角形在位置0,0处绘制，然后使用其x和y属性移动到舞台上的位置 。

var 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;

stage.addChild(triangle);

(6)显示文本
使用Textobject（PIXI.Text）在舞台上显示文本。构造函数接受两个参数：要显示的文本和定义字体属性的样式对象。这里是如何显示单词“Hello Pixi”，在白色，32像素高Arial字体。

var message = new Text(
  "Hello Pixi!",
  {fontFamily: "Arial", fontSize: 32, fill: "white"}
);

message.position.set(54, 96);
stage.addChild(message);

PIXI的文本对象从继承Sprite类，所以它们包含都喜欢相同的属性x，y，width，height， alpha，和rotation。在舞台上定位和调整文本大小，就像你会有任何其他sprite。

如果要在创建文本对象后更改其内容，请使用该text属性。

message.text = "Text changed!";

style如果要重新定义字体属性，请使用属性。

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

Pixi通过使用Canvas绘图API将文本渲染为不可见和临时的画布元素来创建文本对象。它然后将画布变成WebGL纹理，以便它可以映射到精灵。这就是为什么文本的颜色需要包装在一个字符串：它是一个Canvas绘图API颜色值。与任何画布颜色值一样，您可以使用常用颜色（例如“红色”或“绿色”）或使用rgba，hsla或十六进制值。

您可以包括的其他样式属性包括stroke字体轮廓颜色和strokeThickness轮廓粗细。将文本的dropShadow属性设置true为使文本显示阴影。使用dropShadowColor设置阴影的十六进制颜色值，可以使用dropShadowAngle设置阴影的弧度角度，并使用dropShadowDistance设置阴影的像素高度。还有更多：查看Pixi的文本文档的完整列表。

Pixi也可以包装长行的文本。将文本的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");
}

将此@font-face规则添加到HTML页面的CSS样式表。

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