在 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

所需宽度是我希望 shapes/blocks 调整到的宽度，而不是最终宽度。

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

在 Fabric.js 中调整对象大小

Resizing Objects in Fabric.js

javascript

fabricjs