How can I disable scaling points of canvas element

Question

By default fabric.js elements come with 8 points to scale any objects. But the app I'm working specifically requires that stretching should not be allowed on a single axis (horizontally or vertically). I only want the corner points, not the ones on sides.

Is it that possible with fabric.js?

Answer 1

Yes,

you can use object.setControlsVisibility(): http://fabricjs.com/docs/fabric.Object.html#setControlsVisibility

this.setControlsVisibility({
    mt: false, // middle top disable
    mb: false, // midle bottom
    ml: false, // middle left
    mr: false, // I think you get it
});

JsFiddle example: http://jsfiddle.net/Colmea/GjjJ8/1/ (note there is a minor bug with 'mr' control in 1.4.0 version, fixed in 1.4.1).

Or you can use object.setControlVisible() :

object. setControlVisible('mt', false); // disable middle top control

Note: This only hides controls and avoid dragging them. But to avoid any scale: use lockScalingX and lockScalingY properties.

Answer 2

   imgInstance.setControlsVisibility({
         mt: false, 
         mb: false, 
         ml: false, 
         mr: false, 
         bl: false,
         br: false, 
         tl: false, 
         tr: false,
         mtr: false, 
    });

change "imgInstance" to be your object.

@http://fabricjs.com/docs/fabric.Image.html

Answer 3

You can use object.lockUniScaling = true.
Also, you can customize your corners: http://fabricjs.com/customization

Answer 4

Use it:

object.hasControls = object.hasBorders = false;

See http://fabricjs.com/customization

Answer 5

By default you can't make it. But you can create some functions like : if width = x then height = y with some relation between x and y on some event(like "on:scaling"), you can always make the width and height to be in certain ratio.