Größenänderung von Objekten in Fabric.js

Ich bin der Planung über die Verwendung Frabic.js zu bauen, ein Zimmer-layout. Es handelt sich um ein grid-layout (raster-Größe: 25) mit den Objekten das einrasten in position.

Ich versuche zu überschreiben, ändern der Größe von Veranstaltungen, um die Breite ein Vielfaches der Rastergröße (25). Allerdings scheint es nach dem Zufallsprinzip ändern der Größe des Elements.

Code

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

Objekte Hinzugefügt werden on-the-fly durch den Endbenutzer, der code ist unten.

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

Die Ausgabe Der Konsole

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

Die gewünschte Breite ist das, was ich möchte, dass die Formen/Bausteine geändert werden kann, um eher als die endgültige Breite.

InformationsquelleAutor Sekonda | 2015-08-24
Schreibe einen Kommentar