javascript - rect with stroke，笔划线在缩放时会被错误转换

Question

我从这个网站和这里的贡献者那里得到了很多帮助，谢谢。现在我有一个关于 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/ ，尝试水平缩放它。还有一张图片，看左边框和右边框的宽度，应该和上下边框一样，但不是:

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 ();