Pixi’VNText (`Text`)
Wie Text auf dem Canvas mit der `Text`-Komponente angezeigt und gestaltet wird. Behandelt `showText`, `TextStyle`, das Entfernen und Positionierungsfunktionen.
Die Text-Komponente erweitert die PixiJS.Text-Komponente, sodass Sie alle Methoden und Eigenschaften von PixiJS.Text verwenden können. Sie dient dazu, Text auf dem Canvas anzuzeigen.
import { canvas, Text } from "@drincs/pixi-vn";
const basicText = new Text({ text: "Basic text in pixi", align: 0.5 });
canvas.add("text", basicText);Im Vergleich zur PixiJS.Text-Komponente fügt Text die folgenden Funktionen hinzu:
- Zusätzliche Positionierung: Ausrichten und Positionieren mit Prozentangaben.
Anzeigen
Der einfachste Weg, Text auf dem Canvas anzuzeigen, ist die Verwendung der Funktion 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;
},
]);Entfernen
Wie bei anderen Leinwand-Komponenten kann diese Komponente mit der Funktion canvas.remove entfernt werden.
Stil
Um den Text zu gestalten, verwenden Sie TextStyle. Diese Klasse ermöglicht es Ihnen, Schriftfamilie, Größe, Farbe, Kontur, Schatten und vieles mehr anzupassen.
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);
},
]);