我有一个对象数组,应该放在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
}
]
}