Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

88
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!