1

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.

Cody Gray - on strike
  • 239,200
  • 50
  • 490
  • 574
Kevin Grosgojat
  • 1,386
  • 8
  • 13
  • Possible duplicate of [Fabricjs How to scale object but keep the border (stroke) width fixed](https://stackoverflow.com/questions/39548747/fabricjs-how-to-scale-object-but-keep-the-border-stroke-width-fixed) – Durga Apr 18 '19 at 10:06
  • Thx @Durga that solve my problem for rendering the object drawed after a scale. But i prefer a solution wich redraw the entire object. In my application, users can edit object properties like strokeWidth, and if i set strokeWidth value at "1"' on a sclaed object, fabric will apply a 1 * scaleRatio strokewidth. – Kevin Grosgojat Apr 18 '19 at 11:22
  • After scaling complete, `object:modified` event will fire, reset values there. – Durga Apr 18 '19 at 12:01

1 Answers1

4

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);
melchiar
  • 2,782
  • 16
  • 27