沿着矢量拖动点与鼠标

Question

过去几天我一直在尝试三角测量，并想出了一些你在某些游戏中找到的那些整齐的五边形。 （fiddle!）

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

我创建了一张图片来形象化我的问题;红色多边形是＆＃34;当前＆＃34;多边形，粉色线代表新的多边形，粉色圆圈强调顶点的新点，蓝色线条是矢量切线，绿色圆圈是光标。

我之前编写了一个处理矢量的程序，但我不确定如何将它应用于这种情况。

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

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

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

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