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.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wahrscheinlich lösen können Sie das zurücksetzen der Skalierungsfaktor der geänderten Objekt:
versuchen Sie sich in dem snippet unten, wenn kann fit für Ihre Bedürfnisse:
JS:
CSS:
HTML: