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

Question

我有一系列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<objects.length;i++){

    var objRef = objects[i];

    switch(objRef.type){
        case 'image':
            var url = "img/" + objRef.filename;

            fabric.Image.fromURL(url, function(img) {
                var objRef = objects[curObject];
                img.set({
                    left: objRef.x,
                    top: objRef.y,
                    angle: objRef.angle,
                    hasBorders: false,
                    hasControls: false,
                    hasRotatingPoint: false,
                    lockMovementX: true,
                    lockMovementY: true
                });
                canvas.add(img).renderAll();
                img.moveTo(objRef.zIndex);
                curObject++;
                //canvas.setActiveObject(img);
            });

            break;

        case 'text':
            var text = objRef.text;
            var fabricText = new fabric.Text(text, {
                left: objRef.x,
                top: objRef.y,
                angle: objRef.angle,
                hasBorders: false,
                hasControls: false,
                hasRotatingPoint: false,
                lockMovementX: true,
                lockMovementY: true
            });
            objRef.canvasRef = fabricText;
            addTextListeners(fabricText);
            canvas.add(fabricText);
            break;
    }

}

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

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

Answer 1

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

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

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

for (var i=0; i<objects.length;i++){
  var objRef = objects[i];
  switch(objRef.type){
    case 'image':
      var url = "img/" + objRef.filename;
      fabric.Image.fromURL(url, function(img) {
        canvas.add(img).renderAll();
      }, {
        left: objRef.x,
        top: objRef.y,
        angle: objRef.angle,
        hasBorders: false,
        hasControls: false,
        hasRotatingPoint: false,
        lockMovementX: true,
        lockMovementY: true
      });
      break;

    case 'text':
      // ...
      break;
  }
}