Pixi’VNTesto (`Text`)
Come visualizzare e stilizzare il testo sul canvas usando il componente `Text`. Tratta `showText`, `TextStyle`, la rimozione e le funzionalità di posizionamento.
Il componente Text estende il componente PixiJS.Text, quindi è possibile utilizzare tutti i metodi e le proprietà di PixiJS.Text. Viene utilizzato per visualizzare testo sul canvas.
import { canvas, Text } from "@drincs/pixi-vn";
const basicText = new Text({ text: "Basic text in pixi", align: 0.5 });
canvas.add("text", basicText);Rispetto al componente PixiJS.Text, Text aggiunge le seguenti funzionalità:
- Posizionamento aggiuntivo: allineamento e posizione con percentuale.
Mostrare
Il modo più semplice per mostrare testo sul canvas è utilizzare la funzione 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;
},
]);Rimuovere
Come per gli altri componenti del canvas, puoi rimuovere questo componente usando la funzione canvas.remove.
Stile
Per stilizzare il testo, utilizzare TextStyle. Questa classe consente di personalizzare la famiglia di caratteri, la dimensione, il colore, il contorno, l'ombra e molto altro.
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);
},
]);