Изменение размера объектов в Fabric.js

Question

Я планирую использовать Frabic.js для построения макета помещения. Он основан на макете сетки (размер сетки: 25), когда объекты привязаны к месту.

Я пытаюсь переопределить события изменения размера, чтобы ширина была кратной размеру сетки (25). Однако, похоже, это случайное изменение размера элемента.

Код

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()); 
    }); 

Объекты добавляются на лету конечным пользователем, код для него ниже.

$("#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); 
    }); 

Консоль Выход

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

желаемой ширины, что я хотел бы, чтобы формы/блоков, чтобы быть изменен до, а не его окончательной ширины.

Answer 1

Возможно, вы можете решить сброс масштабного коэффициента измененного объекта:

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

попробовать себя в фрагменте кода ниже, если может соответствовать вашим потребностям:

$(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" />