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(); 
    } 
};