如何在HTML5 Canvas中查找线的坐标

Question

我正在开发HTML5中的建筑平面图应用程序。 为此，我需要将门窗放在墙上。 通常，墙壁（线）不是直的。 在移动门图像时，如何查找鼠标是否触摸了墙壁（线条）。 此外，我应该找到要绘制的门的X，Y和角度。 请帮忙...

Answer 1

这是一种方法：

将所有线段（墙）保存为阵列。

var walls=[];

var wall={x0:50,y0:50,x1:150,y1:150};

walls.push(wall);

将窗口拖动到位时，将鼠标位置与每个线段（墙）上的最近点进行比较。 将窗口放在最靠近鼠标的墙壁上。

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

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

并且此函数将返回2个点之间的距离（这2个点是鼠标位置和墙上计算出的点）。

// get distance between 2 points

function distance(x0,y0,x1,y1){
    var dx=x1-x0;
    var dy=y1-y0;
    return(Math.sqrt(dx*dx+dy*dy));
}

最后，用谷歌内置的JavaScript Math.atan2获取墙的角度，将其用作窗口的角度。

祝您项目顺利！