Resizing Objects in Fabric.js

Question

I'm planning on using Frabic.js to build a room layout. It's based around a grid layout (grid size: 25) with the objects snapping into position.

I'm trying to override resize events to make the width a multiple of the grid size (25). However it seems to be randomly resizing the the element.

Code

   var canvas = new fabric.Canvas('section', { selection: true }); fabric.Object.prototype.transparentCorners = false;
   var canvasWidth = 600;
   var canvasGrid = 25;

   canvas.on('object:modified', function(options) {
        options.target.set({opacity: 1}); // Return the opacity back to 1 after moving

        var newWidth = (Math.round(options.target.getWidth() / canvasGrid)) * canvasGrid;
        console.log("Width:" + options.target.getWidth());
        console.log("Desired width: " + newWidth);

        if(options.target.getWidth() !== newWidth) {
            console.log("alter the width");
            options.target.set({ width: newWidth });
            console.log("Width changed to: " + options.target.getWidth());
        }

        console.log("Final width: " + options.target.getWidth());
    });

The objects are added on the fly by the end user, the code for it is below.

    $("#addBlock").click(function(e){
        e.preventDefault();

        var block = new fabric.Rect({
            left: canvasGrid,
            top: canvasGrid,
            width: canvasGrid,
            height: canvasGrid,
            fill: 'rgb(127, 140, 141)',
            originX: 'left',
            originY: 'top',
            centeredRotation: false,
            lockScalingX: false,
            lockScalingY: false,
            lockRotation: false,
            hasControls: true,
            cornerSize: 8,
            hasBorders: false,
            padding: 0
        });

        canvas.add(block);
    });

Console Output

Width:170
Desired width: 175
alter the width
Width changed to: 238.00000000000003
Final width: 238.00000000000003

The desired width is what I would like the shapes/blocks to be resized to rather than it's final width.

Answer 1

Probably you can solve resetting the scale factor of your modified object:

options.target.set({ width: newWidth, height: newHeight, scaleX: 1, scaleY: 1, });

try yourself in the snippet below if can fit for your needs:

 $(function () { var canvas = new fabric.Canvas('canvas', { selection: true }); fabric.Object.prototype.transparentCorners = false; var canvasWidth = 600; var canvasGrid = 50; canvas.on('object:modified', function (options) { options.target.set({ opacity: 1 }); var newWidth = (Math.round(options.target.getWidth() / canvasGrid)) * canvasGrid; var newHeight = (Math.round(options.target.getHeight() / canvasGrid)) * canvasGrid; if (options.target.getWidth() !== newWidth) { options.target.set({ width: newWidth, height: newHeight, scaleX: 1, scaleY: 1, }); } }); $("#addBlock").click(function (e) { e.preventDefault(); var block = new fabric.Rect({ left: canvasGrid, top: canvasGrid, width: canvasGrid, height: canvasGrid, fill: 'rgb(127, 140, 141)', originX: 'left', originY: 'top', centeredRotation: false, lockScalingX: false, lockScalingY: false, lockRotation: false, hasControls: true, cornerSize: 8, hasBorders: false, padding: 0 }); canvas.add(block); }); }); 

 canvas { border: 1px dashed #333; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="canvas" width="500" height="500"></canvas> <input type="button" id="addBlock" value="add" />