前情回顾

上回链接：《2D WebGL renderer Pixi.js v4 入门【第四回】》

上回我们说了精灵的编组以及Container和ParticleContainer。

这次我们来说说WebGL的图形绘制吧。

图形绘制的方法

如果懂canvas自带的图形绘制功能的话，大可跳过这里。

首先使用PIXI.Graphics，描绘各种图形。

// 画矩形
var rectangle = new Graphics();

// lineStyle(width, color , alpha透明度)
rectangle.lineStyle(4, 0xFF3300, 1);

rectangle.beginFill(0x66CCFF);

// drawRect(x, y, width, height)
rectangle.drawRect(0, 0, 64, 64);

rectangle.endFill();

// 位置（基于矩形左上角）
rectangle.x = 170;
rectangle.y = 170;
stage.addChild(rectangle);

// 画圆
var circle = new Graphics();
circle.beginFill(0x9966FF);

// drawCircle(x, y, radius半径)
circle.drawCircle(0, 0, 32);
circle.endFill();

// 位置（基于圆的中心）
circle.x = 64;
circle.y = 130;
stage.addChild(circle);

// 画椭圆
var ellipse = new Graphics();
ellipse.beginFill(0xFFFF00);

// drawEllipse(x, y, width, height);
ellipse.drawEllipse(0, 0, 60, 20);
ellipse.endFill();

// 位置（基于中心点）
ellipse.x = 180;
ellipse.y = 130;
stage.addChild(ellipse);

// 画圆角矩形
var roundBox = new Graphics();
roundBox.lineStyle(4, 0x99CCFF, 1);
roundBox.beginFill(0xFF9933);

// drawRoundedRect(x, y, width, height, cornerRadius)
roundBox.drawRoundedRect(0, 0, 84, 36, 10)
roundBox.endFill();

// 位置（基于矩形左上角）
roundBox.x = 48;
roundBox.y = 190;
stage.addChild(roundBox);

// 画直线
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);

// 画三角形
var triangle = new Graphics();
triangle.beginFill(0x66FF33);

triangle.drawPolygon([
    -32, 64,             //最初的坐标点
    32, 64,              //第二个坐标点
    0, 0                 //第三个坐标点
    
]);

triangle.endFill();

// 位置（基于最初的坐标点）
triangle.x = 180;
triangle.y = 22;

stage.addChild(triangle);

完成效果如下，和canvas并没有多大区别。

<点击查看效果>

文字

使用PIXI.Text function。绘制方法和canvas也类似。

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

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

中途可以再次定义样式和文本。

message.text = "Text changed!";
message.style = {font: "16px PetMe64", fill: "pink"};

在canvas的时候比较困扰的文字换行部分，这里也可以用样式来指定。

message.style = {wordWrap: true, wordWrapWidth: 5, align: "left"};

这里有一个注意点。

在英语的情况下，无法拆分单个单词（手写或者用word的时候，换行普遍会使用‘-’，但是这里不行）。

单词会在结束之前全部输出。具体可以看下面的例子。

<点击查看效果>

反过来说，中文的情况下，不会使用半角空格去拆分单词，所以要换行的话就不得不使用半角空格。

PS1 如果中途要改变style的话会覆盖上面的设定，所以要重新定义fill。

PS2 pixi.js可以使用BitmapText，但是深入研究后发型并不简单，非常抱歉，这里先掠过。

这里姑且先放上pixi.js官方文档。

Class: BitmapText

下回将会有涉及到游戏相关的东西！

敬请期待。

本文翻译自：2D WebGL renderer Pixi.js v4【連載第五回】
翻译者：广树
转载请注明出处！

《2D WebGL renderer Pixi.js v4 入门【最终回】》