Pixi’VNTesto
Come visualizzare e formattare il testo sul canvas utilizzando il componente `Text`. Copre le funzioni `showText`, `TexStyle`, rimozione e posizionamento.
Il componente Text estende il componente PixiJS.Text, così puoi utilizzare tutti i metodi e le proprietà di PixiJS.Text. Viene utilizzato per visualizzare il testo sul canvas.
Per inizializzare questo componente, è necessario passare i seguenti parametri:
options: Le opzioni per il componente, la proprietàtextè obbligatoria.
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: align e posizione con la percentuale.
Visualizza
Il modo più semplice per mostrare il testo sul canvas è utilizzare la funzione showText.
Questa funzione restituisce un Text che puoi utilizzare per manipolare il componente. Questa funzione ha i seguenti parametri:
alias: L'alias per identificare il componente.text: Il testo da visualizzare.options(Opzionale): Le opzioni per il componente.
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;
},
]);Rimuovi
Come con altri componenti canvas, puoi rimuovere questo componente utilizzando la funzione canvas.remove.
Stile
Per formattare il testo, utilizza TexStyle. Questa classe consente di personalizzare la famiglia di caratteri, le dimensioni, il colore, il tratto, l'ombra e altro ancora.
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);
},
]);