Pixi’VNText
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.
To initialize this component, you must pass the following parameters:
options: The options for the component, thetextproperty is required.
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.
This function returns a Text that you can use to manipulate the component. Cette fonction accepte les paramètres suivants:
alias: The alias to identify the component.text: The text to display.options(Optional): The options for the component.
import { newLabel, showText } from "@drincs/pixi-vn";
export const startLabel = newLabel("start_label", [
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_label", [
() => {
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);
},
]);