javascript for循环不会循环结束

时间:2014-10-08 11:23:07

标签: javascript fabricjs

我有一个对象数组,应该放在FabricJS Canvas上。 我遍历数组,查看应该放置对象的Canvas,如果它不存在则创建画布并将对象放在那里。它适用于文本和几何形状,但它放在最后一张幻灯片上的图像。 当我调试它时,在Line" fabric.Image.fromURL(src,function(oImg){"并进入下一次迭代。

function dataIsLoaded(){
    for (var i=0; i<myObj.objects.length; i++){
        var slideIndex= myObj.objects[i].canvas;
        try{
            var canvas = document.getElementById('slide_'+slideIndex).fabric;
        } catch(e){     
            createCanvas(slideIndex);
            var canvas = document.getElementById('slide_'+slideIndex).fabric;
        }       
        var type= myObj.objects[i].type;
        if(type =="image"){
            var src = myObj.objects[i].src;
            var top = myObj.objects[i].top;
            var left = myObj.objects[i].left;
            var angle = myObj.objects[i].angle;
            var scaleX = myObj.objects[i].scaleX;
            var scaleY = myObj.objects[i].scaleY;
            fabric.Image.fromURL(src, function(oImg){
                oImg.set({
                    left: left, 
                    top: top, 
                    angle: angle,
                    scaleX: scaleX,
                    scaleY:scaleY           
                });
                canvas.add(oImg);

            });         
        }
    }
}

myObj看起来像:

var myObj ={
    'objects': [
        {
            'type': 'image',
            'canvas': '0',
            'src': 'file:///D:/Flyingblocks/designer/4.png',
            'top': 0,
            'left': 0,
            'angle': 0,
            'originX': 'left',
            'originY': 'top',
            'scaleX': 1.50195,
            'scaleY': 1.50195
        },{
        'type': 'text',
        'text': 'Hallo',
        'canvas': '1',
        'top': 221,
        'left': 162,
        'angle': 0,
        'scaleX': 1,
        'scaleY': 1,
        'originX': 'left',
        'originY': 'top',
        'fill': 'rgba(0,0,0,1.0)',
        'fontFamily': 'Aharoni',
        'fontSize': 40
    }
    ]
}

1 个答案:

答案 0 :(得分:0)

您无法在javascript中加载任何本地图片或文件,会出现CORS问题。 你可以提供任何图像的任何实时网址,这将是有用的