Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

87
Vistas
Fabric 4.6 How to make selection snap to grid

Ok, so first of all, I'm using this function for rounding:

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

When drawing a line it snaps to grid without any sort of issue:

function startDrawingLine(o) {
    if(mouseDown===true) {
        
        let pointer = canvas.getPointer(o.e); 
        
        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
    }
}

But when moving the line, it's just... not snapping to the grid and I'm not quite sure what I've done wrong. From reading and such, I thought the code would be something like this... but I cannot seem to find the correct answer or implementation of this:

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

Here is where I believe the line being updated needs to have the ability to snap to grid, but perhaps I am wrong... (I didn't write this code, I was following a tutorial and have been making my own modifications).

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();
    }
}
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda