Fabric.js图像在选择之前在画布上不可见

Question

我正在创建一个基于用户单击事件可以添加图像的画布。但是，单击元素并添加图像时，图像就在那里（鼠标悬停显示它），但在画布上不可见，直到元素第二次单击。

var canvas = new fabric.Canvas("designer"); 

    $(".shape-option").click(function() { 
    event.stopPropagation(); 
    var shapeSelected = $(this); 
    var shapeId = shapeSelected.attr("id"); 
    var assetObject = new Image(); 

    assetObject.src = "/images/" + shapeId + ".png"; 
    shape = new fabric.Image(assetObject); 
    shape.set({ top: 0, height: 300, width: 300 }); 
    canvas.add(shape); 
    }); 

有没有人遇到过这样或类似的问题？

Answer 1

您正在执行映像加载后立即在src更改后触发重新加载，因此当您在执行新fabric时，图像元素尚未准备好。

所以，请改变逻辑的那些方法之一：

$(".shape-option").click(function() { 
    event.stopPropagation(); 
    var shapeSelected = $(this); 
    var shapeId = shapeSelected.attr("id"); 
    var assetObject = new Image(); 
    assetObject.onLoad = function() { 
      shape = new fabric.Image(assetObject); 
      shape.set({ top: 0, height: 300, width: 300 }); 
      canvas.add(shape); 
    } 
    assetObject.src = "/images/" + shapeId + ".png"; 
    }); 

或让织物处理异步加载：

$(".shape-option").click(function() { 
    event.stopPropagation(); 
    var shapeSelected = $(this); 
    var shapeId = shapeSelected.attr("id"); 
    fabric.Image.fromURL('/images/' + shapeId + '.png', function(oImg) { 
     img.set({ top: 0, height: 300, width: 300 }); 
     canvas.add(img); 
    }); 
}); 

Answer 2

问题显然已具有定时做。经过测试几个变化，以下工作相当不错。

首先，我需要添加对canvas.renderAll（）的调用以在更改后呈现画布。但是，我发现调用canvas.renderAll（）函数需要包装在setTimeout中，以允许canvas和DOM在渲染前注册更改。这固定了可见性。

其次，我发现对象的可选区域与对象本身的位置不匹配。随后，我不得不调用canvas.calcOffset（）来确保操作后对象路径的坐标是正确的。我的解决方案如下：

$(document).ready(function() { 
    Designer.initialize(); 
}); 

var Designer = Designer || { 

    canvas: null, 

    initialize: function() { 
     Designer.canvas = new fabric.Canvas("designer"); 
     Designer.bindShapeOptionClickEvent(); 
    }, 

    bindShapeOptionClickEvent: function() { 
     $(".shape-option").click(function() { 
      event.stopPropagation(); 
      var shapeSelected = $(this); 
      var shapeId = shapeSelected.attr("id"); 
      var assetObject = new Image(); 

      assetObject.src = "/images/" + shapeId + ".png"; 
      shape = new fabric.Image(assetObject); 
      shape.set({ top: 0, height: 300, width: 300 }); 
      Designer.canvas.add(shape); 
      Designer.updateCanvas(); 
     }); 
    }, 

    updateCanvas: function() { 
     setTimeout(function() { Designer.canvas.renderAll(); }, 50); 
     Designer.canvas.calcOffset(); 
    } 
};