如何在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獲取牆的角度，將其用作窗口的角度。

祝您項目順利！