FabricJS - 從圖像中刪除筆畫用於保存

我有四捨五入的圖像的角上的以下代碼：FabricJS - 從圖像中刪除筆畫用於保存

$scope.startRoundedCorners = function(e) { 
    if ($rootScope.activePanel === 'round') return; 

    $rootScope.openPanel('round', e); 

    $scope.rect = new fabric.Rect({ 
     width: canvas.original.width, 
     height: canvas.original.height, 
     rx: $scope.radius, 
     ry: $scope.radius, 
     opacity: 1, 
     fill: 'transparent', 
     name: 'rounding-rect', 
     stroke: '#fff', 
     strokeDashArray: [5, 5], 
     selectable: false, 
     evented: false, 
     ignore: true, 
    }); 

    canvas.fabric.add($scope.rect); 
    canvas.fabric.renderAll(); 
}; 

$scope.adjustPreview = function() { 
    if (! $scope.rect) return; 

    $scope.rect.set({ 
     rx: $scope.radius, ry: $scope.radius 
    }); 
    canvas.fabric.renderAll(); 
}; 

$scope.apply = function() { 
    $rootScope.editorCustomActions.roundCorners = angular.copy($scope.radius); 

    canvas.fabric.remove($scope.rect); 
    canvas.zoom(1); 

    canvas.fabric.clipTo = function(ctx) { 
     $scope.rect.render(ctx); 
     canvas.fabric.clipTo = false; 
    }; 
    var data = canvas.fabric.toDataURL(); //canvas.getDataURL(); 
    canvas.fabric.clear(); 
    $scope.cancel();

的問題是，所定義的行程也呈現給最終圖像。我希望在保存之前刪除筆畫，筆畫僅用於預覽。我試圖在Apply函數的開頭添加$scope.rect.setStrokeWidth(0);，但沒有效果。

有什麼辦法從圖像中刪除所有「用戶指示器」，並且只保存沒有所有額外筆劃的純圖像？

謝謝先進。

來源

2017-05-05 nfsmaniac

你有沒有嘗試以下方法：

canvas.fabric.deactivateAll().renderAll();

來源

2017-05-05 15:44:23 shershen

謝謝，我剛試過在$ scope.apply = function（）{'後面加上它，但是沒有效果。保存的圖像仍然是虛線輪廓。 – nfsmaniac

這應該在創建圖像之前完成，因此在canvas.fabric.toDataURL（）之前完成（ – shershen

）即使這樣也沒有幫助。當然試圖清除瀏覽器的緩存。 – nfsmaniac

添加行

$scope.rect.setStrokeWidth(0);

線

var data = canvas.fabric.toDataURL();

這只是設置筆觸的寬度設置爲0像素右側保存圖像前前。

來源

2017-05-06 13:48:31 nfsmaniac

FabricJS - 從圖像中刪除筆畫用於保存

回答

相關問題