Question

我有以下代码来舍入图像的角落：

$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);，但没有效果。

有没有办法删除所有＆＃34;用户指标＆＃34;从图像中只保存一个没有所有额外笔划的纯图像？

先谢谢。

Answer 1

您是否尝试过以下操作：

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

Answer 2

添加行

public partial class LabourMainWindow : Window
{
    public LabourMainWindow()
    {
        InitializeComponent();
        DataContext = new LabourViewModel();

    }

行前

$scope.rect.setStrokeWidth(0);

这只是在保存图像之前将笔画宽度设置为0 px。

FabricJS - 从用于保存

2 个答案: