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

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

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（）时，图像必须在changesImage中更改。

来源

2017-07-24 Vishnu Paspunoor

我做了个小例子，你可以使用:)

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

来源

2017-07-24 17:57:10 gMirian

谢谢@gMirian –

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

回答

相关问题