KineticJS多个图像

KineticJS Multiple Images

本文关键字：图像 KineticJS      更新时间：2023-09-26

我在使用KineticJS时遇到了一个奇怪的问题。我正在尝试加载多个图像并简单地在画布上绘制它们。

JSFiddle在这里：http://jsfiddle.net/riyuk/DbHuV/

奇怪的是，Kinetic 只加载一个图像（始终是数组中的最后一个）。如果我取消注释代码并对 Kinetic.Rect 执行相同的操作，则一切正常。

var obj = new Kinetic.Rect({
                        x: opts.x,
                        y: opts.y,
                        width: opts.width,
                        height: opts.height,
                        fill: 'green',
                        stroke: 'black',
                        strokeWidth: 4
                    });
                    cb(obj);

任何 - 工作 - 建议？

问候

下面是一个备用图像加载器：

这将加载推送到 imageURL 数组中的所有图像。

完全加载所有图像后，将调用 start（） 函数。

在开始时，imgs[] 数组以与 imageURLs[] 相同的顺序保存图像

// image loader
var imageURLs=[];
var imagesOK=0;
var imgs=[];
imageURLs.push("");
loadAllImages(start);
function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];
    }      
}
function start(){
    // the imgs[] array holds fully loaded images
    // the imgs[] are in the same order as imageURLs[]
}
相关文章：