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

亦凉 2021-09-12 05:34 1644阅读 0赞

## 一.文本 ##

文本对象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);

效果图：

![Center][]

## 二.画笔 ##

画笔工具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);

效果图：  
![Center 1][]

[Center]: /images/20210813/cd1c523ec591495bb1b3aaa9b5688377.png
[Center 1]: /images/20210813/586bae91bb2b4fcfb5963f6aa8ddcba6.png