FabricJS:使用画布上的对象控件来调整大小,但不是缩放

Question

问题是更新实际object.width, object.height并保持object.scaleX = 1和object.scaleY = 1使用画布上的可视控件.

问题的根源是当使用控件操作对象时,fabric.js会改变对象的比例,以及缩放路径的笔划,我希望它始终具有相同的宽度.

所以我想让它更像Adobe Illustrator,而不是缩放笔画的宽度以及rectalngular的宽度.

Answer 1

我找到了一个以不同方式提出的问题的解决方案:

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

我们的想法是使用新的比例因子计算新的可能宽度和高度,设置新尺寸并将比例因子重置为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
    });
}
});

Answer 2

从 Fabric.js 版本 2.7.0 开始，您可以strokeUniform在对象上启用一个属性，该属性将始终与为笔画宽度输入的精确像素大小匹配。

var circle2 = new fabric.Circle({
    radius: 65,
    fill: '#4FC3F7',
    left: 110,
    opacity: 0.7,
    stroke: 'blue',
    strokeWidth: 3,
    strokeUniform: true
});

http://fabricjs.com/stroke-uniform