How can I disable scaling points of canvas elements using fabric.js?

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.