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.
To initialize this component, you must pass the following parameters:
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à:
- Additional positioning: align and position with percentage.
Show
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. This function has the following parameters:
alias: The alias to identify the component.text: Il testo da visualizzare.options(Optional): The options for the component.
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.
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", [
() => {
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);
},
]);