PixiJS学习之如何实现文字的绘制.docxVIP

第

PixiJS学习之如何实现文字的绘制

目录TextBitMapText结尾大家好，我是前端西瓜哥，今天我们来学pixijs如何绘制文字。pixijs版本为7.1.2。

使用原生的WebGL来绘制文字是非常繁琐的，pixijs对此进行了高层级的封装，提供了Text类和BitMapText类来绘制文字。

Text

最基本的写法，这里没有设置样式：

constapp=newPIXI.Application({width:640,height:360,background:0xffffff});

document.body.appendChild(app.view);

//创建文本

consttext=newPIXI.Text(前端西瓜哥);

text.x=100;

text.y=50;

app.stage.addChild(text);

效果：

可以设置文字样式，需要用TextStyle类。

consttextStyle=newPIXI.TextStyle({

fill:#FF0044,

fontSize:32,

strokeThickness:1,

fontWeight:bold,

consttext=newPIXI.Text(前端西瓜哥,textStyle);

text.x=100;

text.y=50;

也可以通过给text.style赋值的方式来设置样式。

效果：

更多文字样式，读者可自行前往官方提供的交互式网页，尝试设置不同样式看看渲染效果：

https://pixijs.io/pixi-text-style/#

通过Text类绘制文字，会将文字内容从头到位进行解析并光栅化，如果你要通过transform改变文字的大小，会导致一些失真，建议修改字体大小的方式去绘制。

文字内容如果比较多，且变化得比较频繁，可能造成一些性能上的问题。这种情况下，可以考虑能不能用BitMapText来优化。

BitMapText

BitMap就是位图的意思，它会将一些字体的单个字符先预渲染。当然这个预渲染的是指定了特定的样式的。然后在绘制的时候，pixijs就可以将一个个预渲染的字符拼接在一起，而不是重新计算绘制点并光栅化，效率很高。

缺点是样式是固定的，如果样式一直变，就比较难命中缓存，不太适合使用了。

另外，BitMap更适合拉丁语系，因为字符集有限，而像是中文这种象形文字，字符集太多了，做缓存性价比不高。

下面是官方示例。

constapp=newPIXI.Application({background:#1099bb});

document.body.appendChild(app.view);

PIXI.Assets.load(./desyrel.xml).then(()={

constbitmapFontText=newPIXI.BitmapText(

bitmapfontsaresupported!\nWooyay!,{

fontName:Desyrel,

fontSize:55,

align:left,

bitmapFontText.x=50;

bitmapFontText.y=200;

app.stage.addChild(bitmapFontText);

});

pixijs从desyrel.xml文件中提取信息，desyrel.xml关联了一个png图片，里面放了一些位图字体。感觉有点像SpriteSheet。

绘制的结果为：

将字体的转换为位图，可以用一个名为msdf-bmfont-xml的npm库工具去实现。

结尾

总结一下，

如果文本量少，或者字体经常发生样式的变化，用Text。

如果字符集有限，字体样式变化少但内容经常变化，用BitMapText。