代码之家 › 专栏 › 技术社区 › Diablo3093

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

preloadjs easeljs createjs

Diablo3093 · 技术社区 · 7 年前

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

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中更改。

1 回复 | 直到 7 年前

gMirian 7 年前

我举了一个你可以使用的小例子:)

<!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>

推荐文章

Ali Ok · 使用EaselJS StageGL高效绘制网格

7 年前

John · easeljs背景图像矩形-封面

7 年前

Unnamed · 为什么easeljs的舞台。getBounds()返回null?

7 年前

Diablo3093 · 使用preloadjs加载图像时,如何更改createjs中的位图图像?

7 年前

user3055135 · Easeljs中的Tween旋转:控制旋转方向

7 年前

RobSeg · EaselJS:为什么缓存会降低渲染速度?

8 年前

Eric M. · EaselJS-是否可以在线条中添加模糊过滤器?

8 年前

leetom · 如何使用createjs获得真正的FPS

10 年前

C.J. Morrison · 是否可以使用图像数据设置easejs命中区域?

10 年前

Jim Peeters · 如何在我的CreateJS形状中获得随机颜色?

10 年前