Javascript 锁定到对角线运动
如何使用FabricJS锁定对角线运动?我知道它可以垂直和水平锁定,但我找不到一个简单的方法来锁定对角线Javascript 锁定到对角线运动,javascript,html,fabricjs,Javascript,Html,Fabricjs,如何使用FabricJS锁定对角线运动?我知道它可以垂直和水平锁定,但我找不到一个简单的方法来锁定对角线 我需要的是一次只能在同一X轴或Y轴上移动一个画布组。FabricJS没有本机API钩子来锁定沿着对角线的对象 您必须侦听对象的:移动事件,然后手动重置其x&y位置以使其保持在线。这里有一个函数,用于报告线上哪个[x,y]最靠近鼠标[x,y]: // calculate the point on the line that's // nearest to the mouse position
我需要的是一次只能在同一X轴或Y轴上移动一个画布组。FabricJS没有本机API钩子来锁定沿着对角线的对象 您必须侦听对象的:移动事件,然后手动重置其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});
};
我想象着阅读文档之类的事情。非常感谢您确认您可以将y2:line.top设置为水平锁定