Pixi’VNTexte (`Text`)
Comment afficher et styliser du texte sur le canvas avec le composant `Text`. Couvre `showText`, `TextStyle`, la suppression et les fonctionnalités de positionnement.
Le composant Text étend le composant PixiJS.Text, vous pouvez donc utiliser toutes les méthodes et propriétés de PixiJS.Text. Il est utilisé pour afficher du texte sur le canvas.
import { canvas, Text } from "@drincs/pixi-vn";
const basicText = new Text({ text: "Basic text in pixi", align: 0.5 });
canvas.add("text", basicText);Par rapport au composant PixiJS.Text, Text ajoute les fonctionnalités suivantes :
- Positionnement supplémentaire : alignement et positionnement en pourcentage.
Afficher
La façon la plus simple d'afficher du texte sur le canvas est d'utiliser la fonction 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;
},
]);Supprimer
Comme pour les autres composants du canvas, vous pouvez supprimer ce composant en utilisant la fonction canvas.remove.
Style
Pour styliser le texte, utilisez TextStyle. Cette classe vous permet de personnaliser la famille de polices, la taille, la couleur, le contour, l'ombre et bien plus encore.
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);
},
]);