javascript - 锁定对 Angular 线运动

Question

如何使用 FabricJS 锁定对 Angular 线移动？我知道它可以垂直和水平锁定，但我找不到锁定对 Angular 线的简单方法。

我需要的是一次仅在同一 X 轴或 Y 轴上移动一个 Canvas 组的能力。

Answer 1

FabricJS 没有本地 API Hook 来锁定对象以沿着对 Angular 线移动。

您必须监听对象的 :moving 事件，然后手动重置其 x 和 y 位置以使其保持在直线上。这是一个报告线上哪个 [x,y] 最接近鼠标 [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});
};