Pixi’VN图像 (`ImageSprite`)
在 Pixi'VN 中使用 ImageSprite 组件的指南，包括在画布上初始化、加载、添加、显示和移除图像。
ImageSprite 组件继承自 Sprite 组件，因此你可以使用 Sprite 的所有方法和属性。 它用于在画布上显示单张图像。
import { canvas, ImageSprite } from "@drincs/pixi-vn";
let alien = new ImageSprite(
{
anchor: { x: 0.5, y: 0.5 },
x: 100,
y: 100,
},
"alien",
);
await alien.load();
canvas.add("alien", alien);与 Sprite 组件相比，ImageSprite 新增了以下功能：
显示
在画布上显示图像最简单的方式是使用 showImage 函数。 该函数将 load 和 canvas.add 合并为一步。
import { newLabel, showImage } from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
async () => {
// Show the images on the canvas
let alien1 = await showImage("alien");
// Show the image with a different alias and position
let alien2 = await showImage("alien2", "alien", {
xAlign: 0.5,
});
},
]);添加
若要将图像添加到画布，请使用 addImage 函数。 该函数仅将组件添加到画布，不会显示它或加载其纹理。 它通过 canvas.add 将组件添加到画布。
import { addImage, canvas, ImageSprite, newLabel } from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
() => {
// Add the images to the canvas
let alien1 = addImage("alien");
// Add the image with a different alias and position
let alien2 = addImage("alien2", "alien", {
xAlign: 0.5,
});
},
async () => {
let alien1 = canvas.find<ImageSprite>("alien");
let alien2 = canvas.find<ImageSprite>("alien2");
// Load the textures
alien1 && (await alien1.load());
alien2 && (await alien2.load());
},
]);移除
与其他画布组件一样，你可以使用 canvas.remove 函数移除该组件。