文本样式

¥Text Style

TextStyle 类封装了文本的所有视觉样式属性。你可以定义颜色、字体系列、描边、阴影、对齐方式、行距、自动换行等等。

¥The TextStyle class encapsulates all visual styling properties for text. You can define colors, font families, stroke, shadows, alignment, line spacing, word wrapping, and more.

TextStyle 实例可以在多个 Text 对象之间复用，从而使代码更简洁，并提高内存效率。

¥A TextStyle instance can be reused across multiple Text objects, making your code cleaner and improving memory efficiency.

import { TextStyle } from 'pixi.js';

const style = new TextStyle({
    fontFamily: 'Arial',
    fontSize: 30,
    fill: '#ffffff',
    stroke: '#000000',
    strokeThickness: 3,
    dropShadow: {
        color: '#000000',
        blur: 5,
        distance: 4,
        angle: Math.PI / 4,
        alpha: 0.5,
    },
});

const label = new Text({
    text: 'Score: 1234',
    style,
});

填充和描边

¥Fill and Stroke

填充和描边的使用与 Graphics 类相同。你可以在图形填充部分找到更多详细信息。

¥Using fills and strokes are identical to that of the Graphics class. You can find more details about them in the Graphics Fills section.

// Using a number
const fill = 0xff0000;

// Using a hex string
const fill = '#ff0000';

// Using an array
const fill = [255, 0, 0];

// Using a Color object
const color = new Color();
const obj4 = color;

// Using a gradient
const fill = new FillGradient({
    type: 'linear',
    colorStops: [
        { offset: 0, color: 'yellow' },
        { offset: 1, color: 'green' },
    ],
});

// Using a pattern
const txt = await Assets.load<Texture>('https://pixi.nodejs.cn/assets/bg_scene_rotate.jpg');
const fill = new FillPattern(txt, 'repeat');

// Use the fill in a TextStyle
const style = new TextStyle({
    fontSize: 48,
    fill: fill,
    stroke: {
        fill,
        width: 4,
    },
});

阴影

¥Drop Shadow

在 v8 中，dropShadow 及其属性现在是对象。要更新阴影，你可以直接在 dropShadow 对象上设置属性。

¥In v8 dropShadow and its properties are now objects. To update a drop shadow, you can set the properties directly on the dropShadow object.

const style = new TextStyle({
    dropShadow: {
        color: '#000000',
        alpha: 0.5,
        angle: Math.PI / 4,
        blur: 5,
        distance: 4,
    },
});

style.dropShadow.color = '#ff0000'; // Change shadow color

API 参考

¥API Reference

填充和描边​

阴影​

API 参考​

填充和描边

阴影

API 参考