显示文本

使用一个 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来设置messagexy位置:

  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或图片文件一样。