0
我有一个应放置在FabricJS Canvas上的对象数组。 我遍历数组,查看Canvas应该放置哪些对象,如果该对象不存在并创建画布并将对象放置在那里,则创建该画布。它可以很好地处理文本和几何形状,但它将图像放置在最后一张幻灯片上。 当我调试它打破了上线 “fabric.Image.fromURL(SRC,函数(oImg){” 和进入下一个迭代javascript for循环不会循环结束
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
}
]
}
到回调被调用时,循环已经在其第二迭代和“左”等的值已经改变。 – 2014-10-08 11:27:38