fabricjs在画布上的图像放置不一致

我有一系列4张图片,我试图将它们放置在fabricjs中的指定坐标处,并且当页面加载时,我有时会将它们放置得不一致.刷新一次或两次通常会给出正确的布局.试图阻止这种情况发生.

谁知道怎么解决这个问题？这是我的代码:

var objects = [
    { type: "image", filename : "tv.png" , x: 688, y: 184, angle: 0, zIndex: 10 },
    { type: "image", filename : "polaroid.jpg" , x: 347, y: 515 },
    { type: "image", filename : "polaroid.jpg" , x: 138, y: 643 },
    { type: "image", filename : "polaroid.jpg" , x: 429, y: 803 },
    { type: "text", text: "Your favorite band", x: 1168, y: 1163, angle: -17, canvasRef: null,zIndex: 50 }
];

for (var i=0; i

我还应该提一下,这个代码都没有发生在window.ready之后,并且在所有Fabric都试图加载到canvas之后的图像已经使用imagesloaded插件预加载了.

我还要提一下,我已经尝试在每次加载(而不是循环)之间使用setTimeout延迟每个连续图像的加载,并将canvas.renderAll()保存到循环之后,但没有成功.甚至尝试在将项目放置在屏幕上之后运行循环来重新定位项目.以下是问题的图像 - 分别是正确的和不正确的.





1> MidnightLigh..：
看起来您在不同订单中加载的图像中存在竞争条件.

该fabric.Image.fromURL()方法使用一个回调函数,该函数在图像加载后触发,因此您不能保证按照您调用它的相同顺序触发该内部函数.但是curObject每次调用函数时都会使用向上递增,这假定它们是按顺序调用的.并且objRef可以在图像加载时将其重新分配给新对象,这将是x/y/rotate值关闭的原因(使用数组中其他对象的值).

因此,不要img.set()在图像加载后使用,而是使用Image.fromURL()方法的第三个参数传入属性:

for (var i=0; i