Pixi’VNКонтейнер (`ImageContainer`)
Использование и возможности компонента ImageContainer в Pixi’VN для группировки и управления несколькими изображениями как единым компонентом холста.
Компонент ImageContainer расширяет компонент Container, поэтому вы можете использовать все методы и свойства Container. Он позволяет объединить несколько изображений в один компонент и управлять ими как единым целым.
Дочерние элементы ImageContainer являются компонентами ImageSprite.
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);По сравнению с компонентом Container, ImageContainer добавляет следующие возможности:
load: загружает все URL изображений и устанавливает полученные текстуры в дочерние элементы.- Дополнительное позиционирование: выравнивание и позиционирование в процентах.
Отображение
Самый простой способ отобразить группу изображений на холсте — использовать функцию showImageContainer. Эта функция объединяет load и 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,
});
},
]);Добавление
Чтобы добавить группу изображений на холст, используйте функцию addImageCointainer. Эта функция только добавляет компонент на холст; она не отображает его и не загружает его текстуру. Для добавления компонента на холст она использует canvas.add.
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());
},
]);Удалить
Как и другие компоненты холста, данный компонент можно удалить с помощью функции canvas.remove.