用途:在 PixiJS v8 中渲染文本。该技能比较五类文本对象的样式保真度、性能与动画能力,帮助按场景选型。Text 通过 canvas 渲染,样式还原度高,适合标题、菜单、对话框、错误提示等静态或不常更新的标签;更新需重绘 canvas 并上传 GPU,代价高。BitmapText 读取预生成的字形图集,逐帧更新只需重排四边形,适合分数、计时器、玩法标签等每帧变化的内容;样式受限,固定图集,缩放清晰需用 MSDF。HTMLText 通过 SVG foreignObject 渲染 HTML 片段,支持 b、i、br 等真实标签;渲染异步,有一帧延迟,更新代价与 Text 相近。SplitText 与 SplitBitmapText 分别包装前两者,暴露按字符、按词、按行的容器以便逐字动画;SplitText 每个字符都是完整 Text,长字符串代价高,SplitBitmapText 适合长字符串或大量实例,但继承 BitmapText 的图集限制。所有文本类都是叶子节点,allowChildren 为 false,需用 Container 组合多个文本。用法:v8 文本类均用选项对象构造,如 new Text({ text, style }),已移除 v7 的 (string, style) 形式。Text 与 HTMLText 支持 style.tagStyles 实现内联标签着色。自定义字体先经 Assets.load({ src: 'font.woff2', data: { family: 'MyFont' } }) 加载,再设置 style.fontFamily。BitmapFont.install 可预生成图集;MSDF 字体需外部工具生成,经 Assets.load('font.fnt') 加载,自定义构建需 import 'pixi.js/text-bitmap'。CJK、阿拉伯文或 emoji 较多的文本应使用 Text 或 HTMLText,因字形集过大不适合 BitmapText。限制:每帧更新字符串只应用 BitmapText 或 SplitBitmapText,否则整串重新栅格化;移动、旋转、缩放对各类文本都是普通容器变换代价;具体字体、图集与 MSDF 工具细节见对应参考文档。
pixijs-scene-text
前端与建站
更新于 10-16 03:42