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