小伙伴们好，我就是前面西瓜哥，今天我们就来学 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 取值的方式去设定款式。
实际效果：
大量文字样式，阅读者可前往官方网所提供的互动式网页页面，试着设定不一样款式看一下渲染效果：
pixijs.io/pixi-text-s…
根据 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(
'bitmap fonts are supported!\nWoo yay!',{
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。
我就是前面西瓜哥，请关注我，了解更多的前端知识。