是否可以在FabricJS中进行固定缩放

Question

I have rectangle in fabricjs. There are grids in background. Each grid in xAxis is gridSizecolumn and yAxis is gridSizeRow

How can i scale these rectangle with fixed values, so that it increases according to background grids

problems faced : un apropriate scaling with below code.

areasCanvas.on('object:scaling', onObjectScaled);

function onObjectScaled(e){
    fabric.Object.prototype.objectCaching = false;
    var obj = e.target;

    avoidCrossingBoundaries(obj)
    console.log(obj)


    obj.set({
        left: Math.round(obj.left / gridSizeColumn) * gridSizeColumn,
        top: Math.round(obj.top / gridSizeRow) * gridSizeRow,
        // height: Math.round(obj.getHeight() / gridSizeRow) * gridSizeRow,
        // width: Math.round(obj.getWidth() / gridSizeColumn) * gridSizeColumn
    });
    obj.setHeight(Math.round(obj.getHeight() / gridSizeRow) * gridSizeRow)
    obj.setWidth(Math.round(obj.getWidth() / gridSizeColumn) * gridSizeColumn)

}

Answer 1

If you want to change the rects' width and height , you also need to reset their scaleX / scaleY on each scale event:

 const canvas = new fabric.Canvas("c") const img = new fabric.Rect({ left: 20, top: 20, width: 100, height: 100, fill: 'red' }) canvas.add(img) function onObjectScaled(e){ const gridSizeColumn = 20 const gridSizeRow = 20 fabric.Object.prototype.objectCaching = false; var obj = e.target; // avoidCrossingBoundaries(obj) // console.log(obj) obj.set({ left: Math.round(obj.left / gridSizeColumn) * gridSizeColumn, top: Math.round(obj.top / gridSizeRow) * gridSizeRow, // height: Math.round(obj.getHeight() / gridSizeRow) * gridSizeRow, // width: Math.round(obj.getWidth() / gridSizeColumn) * gridSizeColumn }); obj.set({ // set new width and height width: Math.round(obj.getHeight() / gridSizeRow) * gridSizeRow, height: Math.round(obj.getWidth() / gridSizeColumn) * gridSizeColumn, // reset scaleX and scaleY scaleX: 1, scaleY: 1 }) } canvas.on('object:scaling', onObjectScaled); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script> <canvas id='c' width="500" height="400"></canvas> 

Note: you didn't specify the fabric.js version so I assumed you're using v1.xx (v2 doesn't have .getHeight() / .getWidth() anymore)