Pixi’VNText (`Text`)
How to display and style text on the canvas using the `Text` component. Covers `showText`, `TextStyle`, removal, and positioning features.
The Text component extends the PixiJS.Text component, so you can use all the methods and properties of PixiJS.Text. It is used to display text on the canvas.
import { canvas, Text } from "@drincs/pixi-vn";
const basicText = new Text({ text: "Basic text in pixi", align: 0.5 });
canvas.add("text", basicText);Compared to the PixiJS.Text component, Text adds the following features:
- Additional positioning: align and position with percentage.
Show
The simplest way to show text on the canvas is to use the showText function.
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;
},
]);Remove
As with other canvas components, you can remove this component using the canvas.remove function.
Style
To style the text, use TextStyle. This class allows you to customize font family, size, color, stroke, shadow, and more.
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);
},
]);