Javascript 用鼠标沿矢量拖动点

在过去的几天里，我一直在尝试三角学，并且想出了一个你在一些游戏中发现的整洁的统计五边形。（）

我真的希望允许拖动内部多边形的顶点来更改stat值。我的鼠标功能运行良好，但是用鼠标拖动线上的点的最佳方式是什么？

我已经创建了一张图片来形象化我的问题；红色多边形是“当前”多边形，粉色线表示新多边形，粉色圆强调顶点的新点，蓝色线表示向量切线，绿色圆表示光标。

我以前写过一个处理向量的程序，但我不知道如何将它应用到这种情况

下面是一些代码（在循环函数中）：

for（变量i=0；i

---

非常感谢D

此功能将为您提供在任何给定线上离鼠标最近的点：

// given a line defined like this
var line={x0:50,y0:50,x1:150,y1:150};

// calculate the closest point on the line to [x,y]
function getClosestPointOnLine(line,x,y) {
    //
    lerp=function(a,b,x){ return(a+x*(b-a)); };
    var dx=line.x1-line.x0;
    var dy=line.y1-line.y0;
    var t=((x-line.x0)*dx+(y-line.y0)*dy)/(dx*dx+dy*dy);
    t=Math.min(1,Math.max(0,t));
    var lineX=lerp(line.x0, line.x1, t);
    var lineY=lerp(line.y0, line.y1, t);
    return({x:lineX,y:lineY});
};

然后只需重新绘制内部多边形，以连接到上面找到的点

---

有趣的应用程序…祝你好运

太棒了，正是我需要的！请问这个功能是如何工作的？我不太确定lerp应该做什么。当然！此函数用于计算直线上最靠近鼠标的点。它通过计算从鼠标到直线的切线并确定该切线沿原始直线的距离来完成此操作。“t”是0.00到1.00之间的值（如百分比），表示切线沿原始直线的距离。“Lerp”表示“线性插值”，用于计算x&y，即从直线的起点和终点算起的“t”百分比。干杯啊，现在这就更有意义了。我刚开始工作，它运行得很好！非常感谢你的帮助。

// given a line defined like this
var line={x0:50,y0:50,x1:150,y1:150};

// calculate the closest point on the line to [x,y]
function getClosestPointOnLine(line,x,y) {
    //
    lerp=function(a,b,x){ return(a+x*(b-a)); };
    var dx=line.x1-line.x0;
    var dy=line.y1-line.y0;
    var t=((x-line.x0)*dx+(y-line.y0)*dy)/(dx*dx+dy*dy);
    t=Math.min(1,Math.max(0,t));
    var lineX=lerp(line.x0, line.x1, t);
    var lineY=lerp(line.y0, line.y1, t);
    return({x:lineX,y:lineY});
};