使用Fabric.js，當縮放圖像時，如何將其替換爲其他圖像？

我正在使用FabricJS構建我的在線T恤設計師的新版本，以取代我幾年前創建的現有Flash。使用Fabric.js，當縮放圖像時，如何將其替換爲其他圖像？

我遇到了一個我需要幫助的問題。我使用的所有圖像都是光柵圖像。在縮放圖像或對其進行更改（如重新着色）時，我會調用服務器以創建新圖像，然後我需要能夠替換畫布上的現有圖像。

我一直能弄清楚如何做到這一點的唯一方法是使用canvas方法getActiveObject（）。這工作正常，但如果您選擇了多個對象，則不知道要更新哪個對象。

當圖像最初添加到畫布時，我將onModified事件處理程序附加到畫布上。只有在圖像的比例發生變化時，纔可以調用服務器端腳本來生成新圖像。我目前使用的代碼如下所示。任何幫助將不勝感激。

感謝

fabric.Image.fromURL(previewPath, function (img) { 
var sprite = img.set({ left: leftX, top: topY, angle: angle, borderColor: 'black', cornerColor: 'red', cornerSize: 6, transparentCorners: false }); 
$scope.canvas.add(sprite); 
$scope.canvas.renderAll(); 
sprite.on('modified', function() { 
    // Modified event is only executed for scaling 
    if (1 != sprite.scaleX.toString() || 1 != sprite.scaleY.toString()) { 

     fabric.Image.fromURL(previewPath, function (img) { 
      var newSprite = img.set({ left: leftX, top: topY, angle: angle, width: width, height: height }); 

      // Replaces visible object on canvas 


      // Since new image is replacing old one, need to set the scale back to 1 
      sprite.scale(1); 

      $scope.canvas.renderAll(); 
     }); 


    } 
});

來源

2015-07-05 Lonnie

其實原來是非常簡單的。只需將新圖像url傳遞給圖像對象的setSrc方法，如下所示。

sprite.setSrc(previewPath, function (img) { 
    sprite.scale(1); 
    $scope.canvas.renderAll(); 
});

來源

2015-07-07 18:30:28 Lonnie

不知道如果我正確地讀出來，但是你不能夠創建表明它是什麼，當額外的屬性添加到布料對象，然後使用弄清楚要刪除哪個對象？

例如在上面，你會做sprite.objectName =「tshirtSleeves」，然後當你得到新的T恤袖子，獲取與objectName =「tshirtSleeves」結構對象，並刪除它。

來源

2015-07-05 12:27:53 potatopeelings

您可以遍歷畫布上的所有對象，檢查它是否爲圖像，然後根據需要更改圖像。

當然，如果畫布上有很多非圖像對象，這個選項當然會有效率問題。但這是一個選擇。

當然你需要做一個renderAll。

var objects = document.getElementById('canvasId').fabric._objects; 

jQuery.each(objects, function(key, eachObject) { 
    if(eachObject.type == "image") { 
    //Perform scale and image replacement as needed here 
    } 
}); 

$scope.canvas.renderAll();

來源

2015-07-06 02:05:59 PromInc

使用Fabric.js，當縮放圖像時，如何將其替換爲其他圖像？

回答

相關問題