CODEWITHSUNDEEP
javascriptfabricjs
Kevin Grosgojat
Kevin Grosgojat

Reputation: 1379

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

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.

Upvotes: 1

Views: 1585

Answers (1)

melchiar
melchiar

Reputation: 2862

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

Upvotes: 4

Related Questions