查找坐标以在直线的末端绘制箭头（等腰三角形）

Question

我正在尝试创建一个函数，该函数将 return 我想在直线末端绘制的箭头（等腰三角形）的 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 ;

到目前为止，这是我的函数 returns 三角形底部的两点坐标：

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
}

如何根据直线的角度确定三角形顶部的坐标？

Answer 1

箭头与箭身在同一条直线上。因此，(x1, y1) 和 (head_x, head_y) 之间的线段的斜率将与 (x0, y0) 和 (x1, y1) 之间的线段的斜率相同).假设 dx = head_x - x1 和 dy = head_y - y1 和斜率 = (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

Answer 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度的向量，在二维中很容易得到：

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 沿基向量

的平移

查找坐标以在直线的末端绘制箭头（等腰三角形）

Find coordinates to draw arrow head (isoscele triangle) at the end of a line

javascript

math

geometry

drawing

algebra