Pixi’VNИзображение (`ImageSprite`)
Руководство по использованию компонента ImageSprite в Pixi'VN, включая инициализацию, загрузку, добавление, отображение и удаление изображений на холсте.
Компонент 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 добавляет следующие возможности:
load: Загружает URL изображения и устанавливает полученную текстуру в компонент.- Дополнительное позиционирование: выравнивание и позиционирование в процентах.
Отображение
Простейший способ показать изображение на холсте — использовать функцию 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.