是否可以在FabricJS中進行固定縮放

Question

我在fabricjs中有矩形。 背景中有網格。 xAxis中的每個網格都是gridSizecolumn，yAxis是gridSizeRow

我如何用固定值縮放這些矩形，以使其根據背景網格增加

面臨的問題：使用以下代碼進行不適當的縮放。

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

如果要更改矩形的width和height ，則還需要在每個scale事件上重置其scaleX / scaleY ：

 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> 

注意：您沒有指定fabric.js版本，所以我假設您使用的是.getHeight() v2不再具有.getHeight() / .getWidth() ）