Lock to diagonal movement

Question

How can I lock diagonal movement with FabricJS? I know it can be locked vertical and horizontal, but I can't find an easy way to lock diagonal.

What I need is the ability to move one canvas group only in the same X axis or Y axis once a time.

Answer 1

FabricJS does not have a native API hook to lock an object to follow along a diagonal line.

You will have to listen for the object's :moving events and then manually reset its x & y position to keep it on the line. Here's a function that reports which [x,y] on the line is closest to the mouse [x,y]:

// calculate the point on the line that's 
// nearest to the mouse position
// line={x0:10,y0:10,x1:100,y1:25}
function linepointNearestMouse(line,mouseX,mouseY) {
    //
    lerp=function(a,b,x){ return(a+x*(b-a)); };
    var dx=line.x1-line.x0;
    var dy=line.y1-line.y0;
    var t=((mouseX-line.x0)*dx+(mouseY-line.y0)*dy)/(dx*dx+dy*dy);
    var lineX=lerp(line.x0, line.x1, t);
    var lineY=lerp(line.y0, line.y1, t);
    return({x:lineX,y:lineY});
};