跳过主体内容
版本：v8.x

文本

无论是高分还是图表标签，文本往往是向项目中传达信息的最优方式。令人惊讶的是，利用 WebGL 将文本绘制到屏幕上是一个非常复杂的过程 - 对此根本没有内置的支持。PixiJS 提供的一个值是隐藏这种复杂性，让你能够用几行代码绘制出各种样式、字体和颜色的文本。此外，这些文本块和精灵一样都是场景对象 - 你可以给文本着色、旋转、进行 Alpha 混合，并像其他图形对象一样进行处理。

让我们深入了解其工作原理。

文本有三种​

由于在 WebGL 中使用文本时存在挑战，PixiJS 提供了三种截然不同的解决方案。在本指南中，我们将详细介绍这两种方法，以帮助你为项目的需要做出正确的选择。选择错误的文本类型可能对项目的效果和外观产生很大的负面影响。

文本对象​

为了将文本绘制到屏幕上，可以使用 Text 对象。在此类中，会利用浏 览器的普通文本渲染功能将文本绘制到非屏幕缓冲区，然后使用该非屏幕缓冲区作为绘制文本对象的源。事实上，这意味着每当你创建或更改文本时，PixiJS 都会创建一个该文本的新栅格图像，然后将它当作精灵来处理。这种方法允许真正丰富的文本显示，同时保持较高的渲染速度。

因此，在使用文本对象时，有两组选项——标准的显示对象选项（如位置、旋转等），这些选项在文本在内部光栅化之后起作用；以及在光栅化时使用的文本样式选项。由于呈现后的文本基本上只是一个精灵，因此没有必要回顾标准选项。相反，让我们专注于文本的样式。

查看文本示例代码。

文本样式​

提供了许多文本样式选项（见TextStyle），但它们可以归为 5 个主要组

字体：fontFamily 以选择要使用的 Web 字体，fontSize 以指定要绘制的文本的大小，以及字体粗细、样式和变体的选项。

外观：使用 fill 设置颜色或添加 stroke 轮廓，包括渐变填充选项。

阴影：使用 dropShadow 设置阴影，带有一系列相关选项来指定偏移、模糊、不透明度等。

布局：使用 wordWrap 和 wordWrapWidth 启用，然后自定义 lineHeight 和 align 或 letterSpacing

实用工具：如果需要，添加 padding 或 trim 额外空间以处理奇特的字体系列。

要对文本样式功能进行交互式测试，查看此工具。

加载和使用字体​

为了让 PixiJS 构建文本对象，你需要确保要使用的字体已被浏览器加载。这可以用我们的好朋友Assets轻松完成

// load the fonts
await Assets.load('short-stack.woff2');

// now they can be used!

const text = new Text({
  text:'hello',
  style:{
    fontFamily:'short-stack'
  }
})

警告和陷阱​

虽然 PixiJS 简化了文本操作，但有些事情需要留意。

首先，更改现有的文本字符串需要重新生成该文本的内部渲染，这是一个缓慢的操作，如果在每一帧都更改许多文本对象，则可能会影响性能。如果你的项目需要屏幕上同时出现大量频繁更改的文本，请考虑使用 BitmapText 对象（如下所述），该对象使用定点位图字体，文本更改时不需要重新生成。

第二，要注意文字缩放。将文字对象的缩放值设置为 > 1.0 将导致模糊/像素化显示，因为文字并没有在更清晰的高分辨率下重新渲染——它仍然是生成时的相同分辨率。为了解决这个问题，可以先渲染更大的初始尺寸然后缩小。这会占用更多内存，但能让你的文字始终清晰可辨。

位图文字​

除了通过标准文字方法将文字添加到你的项目中之外，PixiJS 还支持位图字体。位图字体与 TrueType 或其他通用字体截然不同，它们由一张图像组成，其中包含你要使用的每个字母的预渲染版本。当使用位图字体绘制文字时，PixiJS 不需要将字体字形渲染到一个临时缓冲区——它可以简单地从主字体图像中复制并冲压出一条字符串的每个字符。

这种方法的主要优点是速度——频繁更改文字的成本更低，由于共享源纹理，渲染每一额外部分的文字的速度也更快。

查看位图文字示例代码。

位图字体​

  • 第三方解决方案
  • BitmapFont 自动生成

选择正确的方法​

文本

  • 静态文字
  • 文字对象数量少
  • 高保真文字渲染（例如字距调整）
  • 文字布局（行距和字距）

位图文字

  • 动态文字
  • 文字对象数量多
  • 更低内存

HTMLText

  • 静态文字
  • 需要 HTML 格式