ImageSprite
Guida all'utilizzo del componente ImageSprite in Pixi'VN, inclusa l'inizializzazione, il caricamento, l'aggiunta, la visualizzazione e la rimozione delle immagini sul canvas.
Il componente ImageSprite
estende il componente Sprite
, così puoi utilizzare tutti i metodi e le proprietà di Sprite
. Viene utilizzato per visualizzare una singola immagine sul canvas.
Per inizializzare questo componente, è necessario passare i seguenti parametri:
options
(Opzionale): Le opzioni per il componente.imageUrl
(Opzionale): L'URL o il percorso. Se hai inizializzato la matrice delle risorse, puoi utilizzare l'alias della texture.
import { canvas, ImageSprite } from "@drincs/pixi-vn"
let alien = new ImageSprite({
anchor: { x: 0.5, y: 0.5 },
x: 100,
y: 100,
}, 'https://pixijs.com/assets/eggHead.png')
await alien.load()
canvas.add("alien", alien)
Rispetto al componente Sprite
, ImageSprite
aggiunge le seguenti funzionalità:
load()
: Carica l'URL dell'immagine e imposta la texture risultante sul componente.- Posizionamento aggiuntivo: align e posizione con la percentuale.
Visualizza
Il modo più semplice per mostrare un'immagine sul canvas è utilizzare la funzione showImage
. Questa funzione combina load
e canvas.add
.
Questa funzione restituisce un ImageSprite
che è possibile utilizzare per manipolare il componente. Questa funzione ha i seguenti parametri:
alias
: L'alias per identificare il componente.imageUrl
(Opzionale): L'URL o il percorso. Se hai inizializzato la matrice delle risorse, puoi utilizzare l'alias della texture. Se non si specifica l'URL, verrà utilizzato l'alias come URL.options
(Opzionale): Le opzioni per il componente.
import { newLabel, showImage } from "@drincs/pixi-vn";
export const startLabel = newLabel("start_label", [
async () => {
let alien1 = await showImage("alien");
let alien2 = await showImage("alien2", "alien", {
xAlign: 0.5,
});
let alien3 = await showImage("alien3", "https://pixijs.com/assets/eggHead.png", {
xAlign: 1,
});
},
]);
Aggiungi
Per aggiungere un'immagine al canvas, utilizzare la funzione addImage
. Questa funzione aggiunge solo il componente al canvas; non lo mostra né ne carica la texture. Utilizza canvas.add
per aggiungere il componente al canvas.
Questa funzione restituisce un ImageSprite
che è possibile utilizzare per manipolare il componente. Questa funzione ha i seguenti parametri:
alias
: L'alias per identificare il componente.imageUrl
(Opzionale): L'URL o il percorso. Se hai inizializzato la matrice delle risorse, puoi utilizzare l'alias della texture. Se non si specifica l'URL, verrà utilizzato l'alias come URL.options
(Opzionale): Le opzioni per il componente.
import { addImage, canvas, ImageSprite, newLabel } from "@drincs/pixi-vn";
export const startLabel = newLabel("start_label", [
() => {
let alien1 = addImage("alien");
let alien2 = addImage("alien2", "alien", {
xAlign: 0.5,
});
let alien3 = addImage("alien3", "https://pixijs.com/assets/eggHead.png", {
xAlign: 1,
});
},
async () => {
let alien1 = canvas.find<ImageSprite>("alien");
let alien2 = canvas.find<ImageSprite>("alien2");
let alien3 = canvas.find<ImageSprite>("alien3");
// Load the textures
alien1 && (await alien1.load());
alien2 && (await alien2.load());
alien3 && (await alien3.load());
},
]);
Rimuovi
Come con altri componenti canvas, puoi rimuovere questo componente utilizzando la funzione canvas.remove
.