查找坐标以在行尾绘制箭头(等腰三角形) [英] Find coordinates to draw arrow head (isoscele triangle) at the end of a line
问题描述
我正在尝试创建一个函数,该函数将返回要在行尾绘制的箭头(等腰三角形)的三点坐标。
I am trying to create a function that will return the 3 points coordinates of arrow head (isoscele triangle) that I want to draw at the end of a line.
面临的挑战是线条的方向(角度)可能会在象限内0到360度之间变化。
The challenge is in the orientation (angle) of the line that can vary between 0 and 360 degree in the quadrant.
我有以下值:
I have the following values:
//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 ;
直到现在,这个函数返回三角形底部的两个点坐标:
This is my function until now that returns the two point coordinates of the base of the triangle:
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
}
如何根据线的角度确定三角形顶部的坐标?
How can I determine the coordinates of the top of the triangle considering the angle of the line?
推荐答案
箭头将与箭头的主体位于同一条线上。因此,(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来获取头点。一些伪代码:
The head of the arrow will lie along the same line as the body of the arrow. Therefore, the slope of the line segment between (x1, y1) and (head_x, head_y) will be the same as the slope of the line segment between(x0, y0) and (x1, y1). Let's say that dx = head_x - x1 and dy = head_y - y1 and slope = (y1 - y0) / (x1 - x0). Therefore, dy / dx = slope. We also know that dx^2 + dy^2 = h^2. We can solve for dx in terms of slope and h. Then, dy = dx * slope. Once you have dx and dy, you can just add those to x1 and y1 to get the head point. Some pseudocode:
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
这篇关于查找坐标以在行尾绘制箭头(等腰三角形)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!