具有笔划的矩形，缩放时笔划线被误转换

Question

我从这个网站和贡献者那里获得了很多帮助，谢谢。现在我对Fabric.js中的Rectangle有一个问题，因为我用它作为图像和文本的占位符，当我缩放它时，边框线宽也是缩放的，我认为这是一个问题，因为我想要保持边框宽度不变。

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

var el = new fabric.Rect({
    originX: "left",
    originY: "top",
    left: 5,
    top: 5,
    stroke: "#ccc",
    strokWidth: 1,
    fill: 'transparent',
    opacity: 1,
    width: 200,
    height: 200,
    cornerSize: 6
});

canvas.add (el);
canvas.renderAll ();

请参阅此处的示例http://jsfiddle.net/9yb46/，尝试水平缩放。图像也在这里，并看到左边框和右边框宽度，应该与顶部和底部边框相同，但不是：

Answer 1

可以这样做，以便您可以独立扩展。

在缩放事件中检查宽度，高度和比例因子，将高度和宽度设置为新的有效值并重置scaleX和scaleY。

这很可能会破坏与对象一起缩放的其他内容，因此您必须以类似的方式处理这些属性。

Demo Fiddle.

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

var el = new fabric.Rect({
    originX: "left",
    originY: "top",
    left: 5,
    top: 5,
    stroke: "rgb(0,0,0)",
    strokeWidth: 1,
    fill: 'transparent',
    opacity: 1,
    width: 200,
    height: 200,
    cornerSize: 6
});

el.on({
    'scaling': function(e) {
        var obj = this,
            w = obj.width * obj.scaleX,
            h = obj.height * obj.scaleY,
            s = obj.strokeWidth;

        obj.set({
            'height'     : h,
            'width'      : w,
            'scaleX'     : 1,
            'scaleY'     : 1
        });
    }
});

canvas.add (el);
canvas.renderAll ();

Answer 2

首先，您错过了小提琴中属性的名称：缺少strokWidth - e 。但这不是问题的原因，因为strokeWidth的默认值是1.

缩放的笔划问题是预期的行为，您要求做的不是。无论如何，在您检查我的代码之前，请先阅读here和here以及更多here。

然后尝试使用此代码来满足您的需求，只有将矩形的比例保持为1：1（scaleX = scaleY），这才能完美运行。

这是jsfiddle：

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

var el = new fabric.Rect({
    originX: "left",
    originY: "top",
    left: 5,
    top: 5,
    stroke: "rgb(0,0,0)",
    strokeWidth: 1,
    fill: 'transparent',
    opacity: 1,
    width: 200,
    height: 200,
    cornerSize: 6
});

el.myCustomOptionKeepStrokeWidth = 1;
canvas.on({
    'object:scaling': function(e) {
        var obj = e.target;
        if(obj.myCustomOptionKeepStrokeWidth){
            var newStrokeWidth = obj.myCustomOptionKeepStrokeWidth / ((obj.scaleX + obj.scaleY) / 2);
            obj.set('strokeWidth',newStrokeWidth);
        }
    }
});

canvas.add (el);
canvas.renderAll ();

Answer 3

Fabricjs现在在fabric.Rect上具有strokeUniform属性，可用于防止笔划宽度错误变形。

当将strokeUniform设置为false时，它将与对象缩放，如果为true，它将与笔触宽度的像素大小匹配。

var el = new fabric.Rect({
    originX: "left",
    originY: "top",
    left: 5,
    top: 5,
    stroke: "#ccc",
    strokWidth: 1,
    fill: 'transparent',
    opacity: 1,
    width: 200,
    height: 200,
    cornerSize: 6,
    strokeUniform: true
});