• 显示文本

    显示文本

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