我正在尝试创建一个函数,它将返回我想在一行末尾绘制的箭头(等速三角形)的3点坐标。
挑战在于线的方向(角度),在象限中可以在0到360度之间变化。
我有以下数值:
//start coordinates of the line
var x0 = 100;
var y0 = 100;
//end coordinates of the line
var x1 = 200;
var y1 = 200;
//height of the triangle
var h = 10;
//width of the base of the triangle
var w = 30 ;
这是我的函数,直到现在它返回三角形底边的两个点坐标:
var drawHead = function(x0, y0, x1, y1, h, w){
var L = Math.sqrt(Math.pow((x0 - x1),2)+Math.pow((y0 - y1),2));
//first base point coordinates
var base_x0 = x1 + (w/2) * (y1 - y0) / L;
var base_y0 = y1 + (w/2) * (x0 - x1) / L;
//second base point coordinates
var base_x1 = x1 - (w/2) * (y1 - y0) / L;
var base_y1 = y1 - (w/2) * (x0 - x1) / L;
//now I have to find the last point coordinates ie the top of the arrow head
}
如何根据直线的角度确定三角形顶部的坐标?
答案 0 :(得分:3)
箭头将与箭头的主体位于同一条线上。因此,(x1,y1)和(head_x,head_y)之间的线段的斜率将与(x0,y0)和(x1,y1)之间的线段的斜率相同。假设dx = head_x-x1和dy = head_y-y1和slope =(y1-y0)/(x1-x0)。因此,dy / dx =斜率。我们也知道dx ^ 2 + dy ^ 2 = h ^ 2。我们可以用斜率和h来求解dx。然后,dy = dx *斜率。一旦你有dx和dy,你可以将它们添加到x1和y1以获得头点。一些伪代码:
if x1 == x0: #avoid division by 0
dx = 0
dy = h
if y1 < y0:
dy = -h #make sure arrow head points the right way
else:
dy = h
else:
if x1 < x0: #make sure arrow head points the right way
h = -h
slope = (y1 - y0) / (x1 - x0)
dx = h / sqrt(1 + slope^2)
dy = dx * slope
head_x = x1 + dx
head_y = y1 + dy
答案 1 :(得分:2)
我认为是这样的:
A=(x0,y0) , B=(x1,y1)
是已知的线路端点
dir=B-A; dir/=|dir|;
是行方向的单位向量(||
是向量大小)
dir.x=B.x-A.x;'
dir.y=B.y-A.y;
dir/=sqrt((dir.x*dir.x)+(dir.y*dir.y));
所以你可以使用它和它的90度旋转作为基础向量。设q
为90度旋转矢量,在2D中很容易获得:
q.x=+dir.y
q.y=-dir.x
所以现在你可以计算你想要的点数:
C=B-(h*dir)+(w*q/2.0);
D=B-(h*dir)-(w*q/2.0);
只是h
和w/2
沿基础向量