Brian FabricJS, Javascript, Web Dev

FabricJS – Prevent flipping an object when scaling

I found an issue with my FabricJS app in that when a user scaled the image using the default controls (dragging from the corners), it was possible that the image would flip upside down.  Technically speaking, the flipX and flipY properties were getting set to true.

Prevent an image from flipping when scaling in FabricJS
Prevent flipping an image when scaling by setting the lockScalingFlip attribute to true on an image object.

There is a simple fix that is not really documented at this time – there is an attribute that prevents this from happening.

Set lockScalingFlip to true and you should be all set.

To demonstrate this, you can check out this JSFIDDLE: FabricJS – Prevent flip on scale

One little catch (of course), this was released some time after FabricJS 1.4.0  I’ve tested 1.4.11 and it works in that version, but I’m not sure how far back it goes.

 

 Reference