Pixi'VN - Container (`ImageContainer`)

在 Pixi’VN 中使用 ImageContainer 组件对多张图片进行分组并将其作为单个画布组件进行操作的用法与功能。

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,
        });
    },
]);

Open Sandbox

添加

要将一组图片添加到画布，请使用 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());
    },
]);

Open Sandbox

移除

与其他画布组件一样，你可以使用 canvas.remove 函数移除该组件。

容器（`ImageContainer`）

显示

添加

移除

本页内容