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. It is used to display text on the canvas.
Per inizializzare questo componente, è necessario passare i seguenti parametri:
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:
- Posizionamento aggiuntivo: align e posizione con la percentuale.
Visualizza
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. Questa funzione ha i seguenti parametri:
alias: L'alias per identificare il componente.text: The text to display.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.
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);
},
]);