显示文本

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

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

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

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

TextStyle函数来自定义文字效果。下面展示如何操作：

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

style对象。所有样式属性，see here。 style对象作为Text函数的第二个参数来应用样式到文本上，就像这样：

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

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或十六进制值。 wordWrap 样式属性到 true，然后设置wordWrapWidth到一行文字应该到的最大像素。调用align属性来设置多行文本的对齐方式。

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

align 不会影响单行文本。） ``规则来链接字体文件到Pixi应用运行的HTML页面。

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

``语句到你的HTML页面的CSS里面。 Pixi也支持位图字体。你可以使用Pixi的加载器来加载XML位图文件，就像你加载JSON或图片文件一样。