在不使用 'scale' 的情况下在 FabricJS 中调整多边形、多段线、直线的大小

Question

如何在不缩放的情况下调整 "points based" 的多边形或其他 Fabricjs 实体的大小？

缩放会增加对象的 strokeWidth，我想覆盖此行为。

我是这样处理矩形的：

/** Resize instead of scaling example */
this.on({
    'scaling': function(e) {
        var obj = this;
        obj.width = obj.scaleX * obj.width;
        obj.height = obj.scaleY * obj.height;
        obj.scaleX = 1;
        obj.scaleY = 1;
    }
});

椭圆示例：

    this.on({
        'scaling': function(e) {
            var obj = this;
            obj.width = obj.scaleX * obj.width;
            obj.height = obj.scaleY * obj.height;
            obj.ry = obj.ry * obj.scaleY;
            obj.rx =  obj.rx * obj.scaleX;
            obj.scaleX = 1;
            obj.scaleY = 1;
        }
    });

我的问题不同，因为用户可以手动编辑在 canvas 上绘制的对象属性。

例如，如果我绘制一个多边形并应用 2 的 scaleRatio，如果我将 strokewidth 值设置为 1，fabric 将在我的多边形上呈现 1*scaleRatio 边框。

这就是我正在寻找具有真实 "redraw" 行为的比例行为覆盖的原因，就像我为 fabric.Rect 或 fabric.Ellipse 所做的那样。

Answer 1

从 Fabric.js 版本 2.7.0 开始，现在有一个 strokeUniform 属性启用后，可以防止笔划宽度受到对象缩放值的影响。

obj.set('strokeUniform', true);

在不使用 'scale' 的情况下在 FabricJS 中调整多边形、多段线、直线的大小

Resize Polygons, Polylines, Lines in FabricJS without using 'scale'

javascript

fabricjs