Pixi’VNТекст (`Text`)
Как отображать и стилизовать текст на canvas с помощью компонента `Text`. Рассматриваются `showText`, `TextStyle`, удаление и функции позиционирования.
Компонент Text расширяет компонент PixiJS.Text, поэтому вы можете использовать все методы и свойства PixiJS.Text. Он используется для отображения текста на canvas.
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 добавляет следующие возможности:
- Дополнительное позиционирование: выравнивание и позиционирование в процентах.
Отображение
Самый простой способ отобразить текст на canvas — использовать функцию 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;
},
]);Удалить
Как и другие компоненты холста, данный компонент можно удалить с помощью функции 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);
},
]);