Pixi’VNContainer (`ImageContainer`)
Verwendung und Funktionen der ImageContainer-Komponente in Pixi’VN zum Gruppieren und Bearbeiten mehrerer Bilder als einzelne Canvas-Komponente.
Die ImageContainer-Komponente erweitert die Container-Komponente, sodass Sie alle Methoden und Eigenschaften von Container verwenden können. Sie ermöglicht es, mehrere Bilder zu einer einzelnen Komponente zusammenzufassen und sie gemeinsam zu bearbeiten.
Die Kindelemente von ImageContainer sind ImageSprite-Komponenten.
import { canvas, ImageContainer } from "@drincs/pixi-vn";
let james = new ImageContainer(
{
anchor: { x: 0.5, y: 0.5 },
x: 100,
y: 100,
},
["m01-body", "m01-eyes", "m01-mouth"],
);
await james.load();
canvas.add("james", james);Im Vergleich zur Container-Komponente fügt ImageContainer folgende Funktionen hinzu:
load: Lädt alle Bild-URLs und setzt die resultierenden Texturen in den Kindelementen.- Zusätzliche Positionierung: Ausrichten und Positionieren mit Prozentangaben.
Anzeigen
Die einfachste Methode, eine Gruppe von Bildern auf dem Canvas anzuzeigen, ist die Verwendung der Funktion showImageContainer. Diese Funktion kombiniert load und canvas.add.
import {
canvas,
ImageContainer,
newLabel,
showImageContainer,
} from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
async () => {
let james = await showImageContainer(
"james",
["m01-body", "m01-eyes", "m01-mouth"],
{
xAlign: 0.5,
yAlign: 1,
},
);
},
() => {
canvas.removeAllTickers();
let tickerId = canvas.animate<ImageContainer>("james", {
xAlign: 0,
yAlign: 1,
});
},
]);Hinzufügen
Um eine Gruppe von Bildern zum Canvas hinzuzufügen, verwenden Sie die Funktion addImageCointainer. Diese Funktion fügt die Komponente lediglich zur Leinwand hinzu; sie zeigt sie nicht an und lädt auch keine Textur. Sie nutzt canvas.add, um die Komponente zur Leinwand hinzuzufügen.
import {
addImageCointainer,
canvas,
ImageContainer,
newLabel,
} from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
() => {
let james = await addImageCointainer(
"james",
["m01-body", "m01-eyes", "m01-mouth"],
{
xAlign: 0.5,
yAlign: 1,
},
);
},
async () => {
let james = canvas.find<ImageContainer>("james");
james && (await james.load());
},
]);Entfernen
Wie bei anderen Leinwand-Komponenten kann diese Komponente mit der Funktion canvas.remove entfernt werden.