带笔画的矩形，缩放时笔画线变形错误答案

【问题标题】：Rect with stroke, the stroke line is mis-transformed when scaled带笔画的矩形，缩放时笔画线变形错误
【发布时间】：2013-12-25 00:56:15
【问题描述】：

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

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/，尝试水平缩放它。这里也有一张图片，看左边框和右边框的宽度，应该和上下边框一样，但不一样：

【问题讨论】：

标签： javascript fabricjs

【解决方案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 ();

【讨论】：

还有两个问题（尝试将笔画设置为 10）： 1. 移动左上手柄，看到右下角也移动。 2. 移动任何手柄，使宽度和/或高度变为 0 - 如果您随后非常缓慢地移动手柄，则对象会突然移动而不是调整大小。我只想提一下。不幸的是，我没有足够的知识来改进您的解决方案。
技术不错，但不能在多边形上正常工作。

【解决方案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 ();

【讨论】：

@Tom - 如果有帮助，最好将其标记为答案。谢谢
谢谢，这几天比较忙。

【解决方案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
});

【讨论】：