Javascript 确定点是否位于(或足够接近)线段上

Javascript 确定点是否位于(或足够接近)线段上,javascript,geometry,Javascript,Geometry,我想确定鼠标点击点是否位于SVG多段线上。我发现要确定一个点是否位于其他两个点之间,并用JavaScript重新实现了它 function isOnLine(xp, yp, x1, y1, x2, y2){ var p = new Point(x, y); var epsilon = 0.01; var crossProduct = (yp - y1) * (x2 - x1) - (xp - x1) * (y2 - y1); if(Math.abs(cross

我想确定鼠标点击点是否位于SVG多段线上。我发现要确定一个点是否位于其他两个点之间,并用JavaScript重新实现了它

function isOnLine(xp, yp, x1, y1, x2, y2){

    var p = new Point(x, y);
    var epsilon = 0.01;

    var crossProduct = (yp - y1) * (x2 - x1) - (xp - x1) * (y2 - y1);
    if(Math.abs(crossProduct) > epsilon)
        return false;
    var dotProduct = (xp - x1) * (x2 - x1) + (yp - y1)*(y2 - y1);
    if(dotProduct < 0)
        return false;
    var squaredLengthBA = (x2 - x1)*(x2 - x1) + (y2 - y1)*(y2 - y1);
    if(dotProduct > squaredLengthBA)
        return false;

    return true;
}
函数等值线(xp、yp、x1、y1、x2、y2){
var p=新点(x,y);
varε=0.01;
var叉积=(yp-y1)*(x2-x1)-(xp-x1)*(y2-y1);
if(数学绝对值(叉积)>ε)
返回false;
var点积=(xp-x1)*(x2-x1)+(yp-y1)*(y2-y1);
if(dotProduct<0)
返回false;
var squaredLengthBA=(x2-x1)*(x2-x1)+(y2-y1)*(y2-y1);
if(点积>平方长度BA)
返回false;
返回true;
}
但它并没有按我想要的方式工作,因为我永远不会让鼠标指针精确地在直线上。所以我需要像“想象中的粗线”这样的东西来获得一些误差:

有什么想法吗?

除以直线的长度,得到点与直线的距离。因此,只需将其与某个阈值进行比较:

function isOnLine (xp, yp, x1, y1, x2, y2, maxDistance) {
    var dxL = x2 - x1, dyL = y2 - y1;  // line: vector from (x1,y1) to (x2,y2)
    var dxP = xp - x1, dyP = yp - y1;  // point: vector from (x1,y1) to (xp,yp)

    var squareLen = dxL * dxL + dyL * dyL;  // squared length of line
    var dotProd   = dxP * dxL + dyP * dyL;  // squared distance of point from (x1,y1) along line
    var crossProd = dyP * dxL - dxP * dyL;  // area of parallelogram defined by line and point

    // perpendicular distance of point from line
    var distance = Math.abs(crossProd) / Math.sqrt(squareLen);

    return (distance <= maxDistance && dotProd >= 0 && dotProd <= squareLen);
}
除以直线的长度得到点到直线的距离。因此,只需将其与某个阈值进行比较:

function isOnLine (xp, yp, x1, y1, x2, y2, maxDistance) {
    var dxL = x2 - x1, dyL = y2 - y1;  // line: vector from (x1,y1) to (x2,y2)
    var dxP = xp - x1, dyP = yp - y1;  // point: vector from (x1,y1) to (xp,yp)

    var squareLen = dxL * dxL + dyL * dyL;  // squared length of line
    var dotProd   = dxP * dxL + dyP * dyL;  // squared distance of point from (x1,y1) along line
    var crossProd = dyP * dxL - dxP * dyL;  // area of parallelogram defined by line and point

    // perpendicular distance of point from line
    var distance = Math.abs(crossProd) / Math.sqrt(squareLen);

    return (distance <= maxDistance && dotProd >= 0 && dotProd <= squareLen);
}