如何找到一条线的HTML5画布的坐标(How to find the coordinates of

我正在开发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让你的墙的角度为你的窗口的角度来使用。

祝你的项目！

文章来源: How to find the coordinates of a line in HTML5 Canvas