前端动画渲染引擎pixi.js系列（5）Text文本和Graphics画笔工具

一.文本

文本对象PIXI.Text是指创建一行或多行文字，可以使用'\n'来实现换行，文本对象PIXI.Text的继承关系是：

PIXI.Text->PIXI.Sprite

文本PIXI.Text的创建代码如下：

var text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'});

（注）其中参数1是文本内容，参数2是文本样式。

PIXI.Text修改文本的函数是：

setText(text)

PIXI.Text修改样式的函数是：

setStyle(style)

创建文本的完整参考代码如下：

var app = new PIXI.Application(800, 600, {
	backgroundColor: 0x1099bb
});
document.body.appendChild(app.view);

var basicText = new PIXI.Text('默认效果文本');
basicText.x = 30;
basicText.y = 90;
app.stage.addChild(basicText); //将显示精灵添加进显示容器

var style = {
	fontFamily: 'Arial',
	fontSize: '36px',
	fontStyle: 'italic',
	fontWeight: 'bold',
	fill: '#F7EDCA',
	stroke: '#4a1850',
	strokeThickness: 5,
	dropShadow: true,
	dropShadowColor: '#000000',
	dropShadowAngle: Math.PI / 6,
	dropShadowDistance: 6,
	wordWrap: true, //是否允许换行
	wordWrapWidth: 440 //换行执行宽度
};

var richText = new PIXI.Text('带自定义效果文本', style);
richText.x = 330;
richText.y = 90;
app.stage.addChild(richText);

效果图：

二.画笔

画笔工具PIXI.Graphics是指通过绘制线条、圆形、方形等最终得出相对简单形状的工具。画笔工具的继承关系如下：

PIXI.Graphics->PIXI.Container

文本PIXI.Graphics的创建代码如下：

new PIXI.Graphics(nativeLines)

（注）当nativeLines设为true时，表示用gl.LINES模式代替gl.TRIANGLE_STRIP模式绘制，默认为gl.TRIANGLE_STRIP模式绘制。

PIXI.Graphics的函数有：

lineColor[String]：设置画笔绘制线条时线条的颜色。

lineWidth[number]：设置画笔绘制线条时线条的宽度。

nativeLines[boolean]：当nativeLines设为true时，表示用gl.LINES模式代替gl.TRIANGLE_STRIP模式绘制。

PIXI.Graphics的事件有：

arc(cx, cy, radius, startAngle, endAngle, anticlockwise)[number,number,number,number,number,boolean]：绘制扇形，cx, cy表示圆心的坐标；radius表示半径；startAngle，endAngle表示起始弧度和终点弧度，其中起始弧度设为0，表示在3点钟位置方位；anticlockwise设为true时表示顺时针绘制。

beginFill(color, alpha)[number,number]：填充画笔颜色。

bezierCurveTo(cpX, cpY, cpX2, cpY2, toX, toY)[number...]：计算贝塞尔曲线的点，然后绘制它。

clear()：清楚已绘制的图形，重设颜色的填充和线条的样式。

clone()：克隆一个已绘制的图形。

drawCircle(x, y, radius)[number...]：绘制圆形，参数分别为圆心坐标和半径。

drawEllipse(x, y, width, height)[number...]：绘制椭圆形。

drawPolygon(array)[Array.<PIXI.Point>]：绘制多边形。

drawRect(x, y, width, height)：绘制矩形。

drawRoundedRect(x, y, width, height, radius)：绘制圆角矩形。

drawShape(shape)[PIXI.Circle | PIXI.Ellipse | PIXI.Polygon | PIXI.Rectangle | PIXI.RoundedRectangle]：绘制形状。

endFill()：结束绘制。

lineStyle(lineWidth, color, alpha)：设置线条样式。

lineTo(x, y)：绘制线条至当前点。

moveTo(x, y)：将画笔绘制点移动至x，y坐标。

创建画笔的完整参考代码如下：

var stage = new PIXI.Container();
app.stage.interactive = true;

var graphics = new PIXI.Graphics();
graphics.beginFill(0xFF3300); //填充色，如不设填充色，则为透明
graphics.lineStyle(14, 0xffd900); //边框色

// 画形状
graphics.moveTo(50, 50);
graphics.lineTo(250, 50);
graphics.lineTo(100, 100);
graphics.lineTo(50, 50);
graphics.endFill();

// 画方形
graphics.lineStyle(2, 0x0000FF);
graphics.beginFill(0xFF700B, 1);
graphics.drawRect(50, 250, 120, 120);

// 画带弧边的方形
graphics.lineStyle(2, 0xFF00FF);
graphics.beginFill(0xFF00BB, 0.25);
graphics.drawRoundedRect(350, 280, 300, 100, 15);
graphics.endFill();

// 画圆型
graphics.lineStyle(0);
graphics.beginFill(0xFFFF0B, 0.5);
graphics.drawCircle(470, 90, 60);
graphics.endFill();

app.stage.addChild(graphics);

效果图：