ImageSprite

Il componente ImageSprite estende il componente PixiJS.Sprite, così puoi utilizzare tutti i metodi e le proprietà di PixiJS.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. If you have initialized the asset matrix, you can use the alias of the 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. If you have initialized the asset matrix, you can use the alias of the 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. If you have initialized the asset matrix, you can use the alias of the 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.