Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

89
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda