Ok, antes que nada, estoy usando esta función para redondear:

 var round = function (num, precision) { // function used for round numbers num = parseFloat(num); if (!precision) return num; return (Math.round(num / precision) * precision); };

Al dibujar una línea, se ajusta a la cuadrícula sin ningún tipo de problema:

 function startDrawingLine(o) { if(mouseDown===true) { let pointer = canvas.getPointer(oe); pointer.x = round(pointer.x, 10); // these two lines will cause the pointer to snap every 10 lines even. pointer.y = round(pointer.y, 10); line.set({ x2: pointer.x, y2: pointer.y }); canvas.requestRenderAll(); // Will actually render the line drawn } }

Pero al mover la línea, simplemente... no se ajusta a la cuadrícula y no estoy muy seguro de lo que hice mal. Al leer y demás, pensé que el código sería algo como esto ... pero parece que no puedo encontrar la respuesta correcta o la implementación de esto:

 canvas.on('object:moving', function(options) { options.target.set({ left: Math.round(options.target.left / grid) * grid, top: Math.round(options.target.top / grid) * grid });

Aquí es donde creo que la línea que se actualiza debe tener la capacidad de ajustarse a la cuadrícula, pero tal vez me equivoque... (No escribí este código, estaba siguiendo un tutorial y he estado haciendo mis propias modificaciones).

 canvas.on({ // this is so that when you move the line, the dblclick circles on the ends move with it. 'object:moved': updateNewLineCoordinates, 'selection:created': updateNewLineCoordinates, 'selection:updated': updateNewLineCoordinates, 'mouse:dblclick': addingControlPoints }); let newLineCoords = {}; function updateNewLineCoordinates(o) { newLineCoords = {}; let obj = o.target; if(obj.id==='added-line') { let centerX = obj.getCenterPoint().x; // Gets the X coordinate of the center of the line drawn let centerY = obj.getCenterPoint().y; // Gets the Y coordinate of the center of the line drawn let x1offset = obj.calcLinePoints().x1; // Now calculate the end beginng and ending of each line to place the red circle for editing the line (so you can drag and make the line bigger or shorter) let y1offset = obj.calcLinePoints().y1; // The offset is just the number of pixels from the center of the line to the end of the line. let x2offset = obj.calcLinePoints().x2; let y2offset = obj.calcLinePoints().y2; newLineCoords = { // places circle at the end of each line x1, y1 being the beginning of the line x1: centerX+x1offset, y1: centerY+y1offset, x2: centerX+x2offset, y2: centerY+y2offset } obj.set({ x1: centerX+x1offset, y1: centerY+y1offset, x2: centerX+x2offset, y2: centerY+y2offset }); obj.setCoords(); } }