用鼠标沿矢量拖动点

Question

在过去的几天里，我一直在试验三角学，并想出了你在某些游戏中发现的那些简洁的五边形统计数据之一。 (fiddle!)

我真的很想让内部多边形的顶点可以拖动以更改统计值。我的鼠标功能运行良好，但是用鼠标在线上拖动点的最佳方法是什么？

我创建了一张图片来可视化我的问题；红色多边形是“当前”多边形，粉色线条代表新多边形，粉色圆圈强调顶点的新点，蓝色线条是矢量切线，绿色圆圈是光标。强>

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

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

for(var i = 0; i < innerPolygonKnobs.length; i ++){
    var knob = innerPolygonKnobs[i];
    distX = knob.x-mouse.x;
    distY = knob.y-mouse.y;
    distTotal = Math.sqrt(distX*distX + distY*distY);
    if(distTotal < 8){
        if(!knob.over)change = true;
        knob.over = true;
        if(mouse.down){
            // What goes here?
        }
    } else {
        if(knob.over)change = true;
        knob.over = false;
    }
}
if(change)redraw();

提前非常感谢！ :D

Answer 1

此函数将为您提供任何给定行上离鼠标最近的点：

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

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

有趣的应用...祝你好运！