显示文本

使用一个 Text 对象 (PIXI.Text)在舞台上展示文本。简单来说，你可以这样使用它：

  1. let message = new Text("Hello Pixi!");
  2. app.stage.addChild(message);

这将会在画布上展示文本“Hello, Pixi”。Pixi的文本对象继承自Sprite类，所以它包含了所有相同的属性，像x, y, width, height,
alpha, 和 rotation。你可以像处理其他精灵一样在舞台上定位或调整文本。例如，你可以像下面这样使用position.set来设置message的x和y位置：

  1. message.position.set(54, 96);

Displaying text

这样你会得到基础的未加修饰的文本。但是如果你想要更绚丽的文字，使用Pixi的TextStyle函数来自定义文字效果。下面展示如何操作：

  1. let style = new TextStyle({
  2.   fontFamily: "Arial",
  3.   fontSize: 36,
  4.   fill: "white",
  5.   stroke: '#ff3300',
  6.   strokeThickness: 4,
  7.   dropShadow: true,
  8.   dropShadowColor: "#000000",
  9.   dropShadowBlur: 4,
  10.   dropShadowAngle: Math.PI / 6,
  11.   dropShadowDistance: 6,
  12. });

这将创建一个新的包含所有你想用的样式的style对象。所有样式属性，see here。

添加style对象作为Text函数的第二个参数来应用样式到文本上，就像这样：

  1. let message = new Text("Hello Pixi!", style);

Displaying text

如果你想要在你创建文本对象之后改变它的内容，使用text属性。

  1. message.text = "Text changed!";

如果你想要重新定义样式属性，使用style属性。

  1. message.style = {fill: "black", font: "16px PetMe64"};

Pixi通过调用Canvas绘画api将文本渲染成不可见或临时的canvas元素来创建文本对象。它之后会将画布转化为WebGL纹理，所以可以被映射到精灵上。这就是为什么文本的颜色需要被包裹成字符串：那是Canvas绘画api的颜色值。与任何canvas颜色值一样，你可以使用“red”或“green”等常用颜色的单词，或使用rgba，hsla或十六进制值。

Pixi也能包裹文本的长段。设置文本的 wordWrap 样式属性到 true，然后设置wordWrapWidth到一行文字应该到的最大像素。调用align属性来设置多行文本的对齐方式。

  1. message.style = {wordWrap: true, wordWrapWidth: 100, align: center};

（注意：align 不会影响单行文本。）

如果你想要使用自定义的字体文件，使用CSS的@font-face规则来链接字体文件到Pixi应用运行的HTML页面。

  1. @font-face {
  2.   font-family: "fontFamilyName";
  3.   src: url("fonts/fontFile.ttf");
  4. }

添加这个@font-face语句到你的HTML页面的CSS里面。

Pixi也支持位图字体。你可以使用Pixi的加载器来加载XML位图文件，就像你加载JSON或图片文件一样。