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

只愿长相守 提交于 2020-03-26 06:43:29

问题


How can I resize polygons or other Fabricjs entities that are "points based" without scaling them?

Scaling increases the strokeWidth of objects and I'd like to override this behavior.

I did it for rectangles this way:

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

An example for an ellipse:

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

My question is different because users can edit manually object properties drawn on canvas.

For example if I draw a polygon and apply a scaleRatio of 2, if I set the strokewidth value at 1, fabric will render a 1*scaleRatio border on my polygon.

That's the reason I'm searching for an override to the scale behavior with a real "redraw" behavior as I did for fabric.Rect or fabric.Ellipse.


回答1:


As of Fabric.js version 2.7.0 there is now a strokeUniform property that when enabled, prevents the stroke width from being affected by the object's scale values.

obj.set('strokeUniform', true);


来源:https://stackoverflow.com/questions/55743486/resize-polygons-polylines-lines-in-fabricjs-without-using-scale

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!