用鼠标沿矢量拖动点

Question

过去几天我一直在试验三角函数，想出了一些游戏中常见的整齐的统计五边形之一。 (fiddle!)

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

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

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

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

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

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

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

用鼠标沿矢量拖动点

Dragging point along vector with mouse

html

javascript

canvas