javascript - FabricJS:在 Canvas 上使用对象控件来调整大小，但不能缩放

Question

问题是更新实际的 object.width, object.height 并保持 object.scaleX = 1 和 object.scaleY = 1 在 Canvas 上使用视觉控件时。

问题的根源是在使用控件操纵对象时，fabric.js 更改了对象的比例，以及缩放路径的笔触，我希望它始终具有相同的宽度。

所以我想让它更像 Adob​​e Illustrator，而不是缩放笔划的宽度以及矩形的宽度，例如。

Answer 1

我在这里找到了以不同方式提出的问题的解决方案:

Rect with stroke, the stroke line is mis-transformed when scaled

想法是使用新的比例因子计算新的预期宽度和高度，设置新尺寸并将比例因子重置为 1。

这是该答案的代码示例:

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