Pixi'VN - Text (`Text`)

如何使用 `Text` 组件在画布上显示和设置文本样式。涵盖 `showText`、`TextStyle`、删除和定位功能。

Text 组件继承自 PixiJS.Text 组件，因此你可以使用 PixiJS.Text 的所有方法和属性。它用于在画布上显示文本。

main.ts

import { canvas, Text } from "@drincs/pixi-vn";

const basicText = new Text({ text: "Basic text in pixi", align: 0.5 });

canvas.add("text", basicText);

与 PixiJS.Text 组件相比，Text 新增了以下功能：

额外定位功能：按百分比对齐和定位。

显示

在画布上显示文本最简单的方法是使用 showText 函数。

import { newLabel, showText } from "@drincs/pixi-vn";

export const startLabel = newLabel("start", [
    async () => {
        let text = await showText("text", "Hello World!", {
            xAlign: 0.5,
            yAlign: 0.5,
        });
        text.style.fontSize = 30;
    },
]);

Open Sandbox

移除

与其他画布组件一样，你可以使用 canvas.remove 函数移除该组件。

样式

要设置文本样式，请使用 TextStyle。此类允许你自定义字体家族、大小、颜色、描边、阴影等。

import { canvas, newLabel, Text, TextStyle } from "@drincs/pixi-vn";

export const startLabel = newLabel("start", [
    () => {
        const skewStyle = new TextStyle({
            fontFamily: "Arial",
            dropShadow: {
                alpha: 0.8,
                angle: 2.1,
                blur: 4,
                color: "0x111111",
                distance: 10,
            },
            fill: "#ffffff",
            stroke: { color: "#004620", width: 12, join: "round" },
            fontSize: 60,
            fontWeight: "lighter",
        });

        const skewText = new Text({
            text: "SKEW IS COOL",
            style: skewStyle,
            align: 0.5,
            skew: { x: 0.65, y: -0.3 },
        });

        canvas.add("text", skewText);
    },
]);

Open Sandbox

文本 (`Text`)

显示

移除

样式

本页内容