在 canvas 上制作缩放图片幻灯片

Question

我正在尝试使用 pixijs 在 canvas 上从像这样的三张图片制作放大图片幻灯片

我尝试过但没有成功。我的问题是如何在 pixijs 中为特定的宽度和高度添加放大或缩小图像，然后是第二张图像等等。我正在写这段代码

var pixiapp;
var pixiloader = PIXI.Loader.shared;
initpixiapp();

function initpixiapp() {
    pixiapp = new PIXI.Application({ width: 1280, height: 720 });
    document.getElementById('canvas-container').appendChild(pixiapp.view);
    pixiloader.add('images/img1.png').add('images/img2.png').add('images/img3.png').load(handleimagesload);
}
function handleimagesload() {
    var imagessprites=[]
    var img1 = new PIXI.Sprite(pixiloader.resources['images/img1.png'].texture);
    var img2 = new PIXI.Sprite(pixiloader.resources['images/img2.png'].texture);
    var img3 = new PIXI.Sprite(pixiloader.resources['images/img3.png'].texture);
    imagessprites.push(img1)
    imagessprites.push(img2)
    imagessprites.push(img3);
    for (let index = 0; index < imagessprites.length; index++) {
        const element = imagessprites[index];
        pixiapp.stage.addChild(element);
        // here will the the code to run zoom image to specific width and heigth and then move to next image,
        // here is my code, its only display zooming third image
        var ticker = new PIXI.Ticker();
        ticker.add(() => {
            console.log('ticker called')
            element.width += 1;
            element.height += 1;
            if(element.width==1500)
            {
                ticker.stop()
            }
        })
        ticker.start()
    }
}

还有一点，如何在幻灯片开始前显示一个文本框三秒钟。

Answer 1

尝试这样的事情：

var pixiapp;
var pixiloader = PIXI.Loader.shared;
initpixiapp();

function initpixiapp() {
    pixiapp = new PIXI.Application({ width: 1280, height: 720 });
    document.getElementById('canvas-container').appendChild(pixiapp.view);
    pixiloader
        .add('images/img1.png')
        .add('images/img2.png')
        .add('images/img3.png')
        .load(handleimagesload);
}

function handleimagesload() {
    var imagessprites = [];
    var img1 = new PIXI.Sprite(pixiloader.resources['images/img1.png'].texture);
    var img2 = new PIXI.Sprite(pixiloader.resources['images/img2.png'].texture);
    var img3 = new PIXI.Sprite(pixiloader.resources['images/img3.png'].texture);
    imagessprites.push(img1);
    imagessprites.push(img2);
    imagessprites.push(img3);

    // Put first image on stage:
    var currentImageIndex = 0;
    var currentImage = imagessprites[currentImageIndex];
    pixiapp.stage.addChild(currentImage);


    var ticker = new PIXI.Ticker();

    // Start "main animation loop":
    ticker.add(() => {
        currentImage.width += 1;
        currentImage.height += 1;

        if (currentImage.width >= 1500) {
            // remove current image from stage:
            pixiapp.stage.removeChild(currentImage);

            // Move to next image:
            // Increase index - but if it reached maximum then go back to 0 (to first image)
            currentImageIndex++;
            if (currentImageIndex >= imagessprites.length) {
                currentImageIndex = 0;
            }

            currentImage = imagessprites[currentImageIndex];
            // Set initial width and height of image (TODO: adjust this)
            currentImage.width = 1000;
            currentImage.height = 1000;
            // put image on stage:
            pixiapp.stage.addChild(currentImage);
        }

    });
    ticker.start()
}

在 canvas 上制作缩放图片幻灯片

Make zoom images slideshow on canvas

pixi.js