Question

我使用队列中的图像创建了一个位图。接下来，我试图通过更新image.src属性来更改图像，但它不起作用，因为它需要一个到图像位置的路径。在这种情况下，如何将第一张图像更改为第二张图像。我假设转换将是平滑的，因为图像已经加载。

var queue = new createjs.LoadQueue();
queue.on("complete", loaded);
queue.loadManifest([{
        id: "one",
        src: "image1.png"
    },
    {
        id: "two",
        src: "image2.png"
    }
]);
var stage = new createjs.Stage('canvas'),
    img1 = queue.getResult("one"),
    img2 = queue.getResult("two");

var changingImage = new createjs.Bitmap(img1);
stage.addChild(childImage);
stage.update();

function changeImage() {
    changingImage.image.src = img2;
    stage.update();
}

在调用函数changeImage（）时，图像必须在changingImage中更改。

Answer 1

我做了一个小例子你可以使用：）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
var stage,queue;
function init() 
{
    stage = new createjs.Stage("canvas");
    createjs.Ticker.setFPS(12);  //set some FPS
    createjs.Ticker.addEventListener("tick", stage); //set autiomatic refresh, so we don't need to use stage.update() frequently

    queue = new createjs.LoadQueue();
    queue.on("complete", loaded);
    queue.loadManifest(
    [
        {
            id: "one",
            src: "image1.png"
        },
        {
            id: "two",
            src: "image2.png"
        }
    ]);
}

function loaded()
{
    var img1 = queue.getResult("one");
    var img2 = queue.getResult("two");

    var someBitmap = new createjs.Bitmap(img1);
    stage.addChild(someBitmap); //first image is visible now

    //let's wait for a second and then call the function
    //img2 is reference to the second image
    setTimeout(function(){changeImage(someBitmap,img2)},1000);
}

function changeImage(bitmap,img)
{
    bitmap.image=img; //so image is changed
}
</script>
</head>
<body onload="init();">
    <canvas id="canvas" width="600" height="400"></canvas>
</body>
</html>

如何在使用preloadjs加载图像时更改createjs中的位图图像？

1 个答案: