PIXI 基本圖形-PIXI文檔翻譯(6)

1、基本圖形
使用圖像紋理是製作精靈的最有用的方法之一，但Pixi也有自己的低級繪圖工具。您可以使用它們來製作矩形，形狀，線條，複雜的多邊形和文本。並且，幸運的是，它使用與Canvas繪圖API幾乎相同的API，所以，如果你已經熟悉canvas，這裏沒有什麼真正新的學習。但是最大的優點是，與Canvas繪圖API不同，您使用Pixi繪製的形狀是由GPU上的WebGL渲染的。Pixi允許您訪問所有未使用的性能功率。讓我們快速瀏覽如何製作一些基本形狀。這裏是我們將在代碼中提出的所有形狀。


[img]http://dl2.iteye.com/upload/attachment/0123/3474/5880245c-bdcf-3381-bbe1-be1d1a94e149.png[/img]

(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);

[img]http://dl2.iteye.com/upload/attachment/0123/3476/474209bd-bd96-3412-9b74-0fe27b5cc44e.png[/img]

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或圖像文件一樣。