小编Sek*_*nda的帖子

我打算使用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(); …