Trouver les coordonnées pour dessiner la tête de la flèche (triangle isoscele) à la fin d'une ligne

Question

J'essaie de créer une fonction qui va retourner les coordonnées de 3 points de la tête de flèche (triangle isoscele) que je veux dessiner à la fin d'un ligne. Le défi est dans l'orientation (angle) de la ligne qui peut varier entre 0 et 360 degrés dans le quadrant.

Je les valeurs suivantes:

//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 ; 

C'est ma fonction jusqu'à présent qui renvoie les deux coordonnées du point de la base du 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 
} 

Comment puis-je déterminer les coordonnées de le haut du triangle en considérant l'angle de la ligne?

Answer 1

La tête de la flèche se trouve sur la même ligne que le corps de la flèche. Par conséquent, la pente du segment de droite entre (x1, y1) et (head_x, head_y) sera la même que la pente du segment de droite entre (x0, y0) et (x1, y1). Disons que dx = head_x - x1 et dy = head_y - y1 et slope = (y1 - y0)/(x1 - x0). Par conséquent, dy/dx = pente. Nous savons aussi que dx^2 + dy^2 = h^2. Nous pouvons résoudre pour dx en termes de pente et h. Ensuite, dy = dx * pente. Une fois que vous avez dx et dy, vous pouvez simplement ajouter ceux à x1 et y1 pour obtenir le point de tête. Certains 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 

Answer 2

je vois comme ceci:

A=(x0,y0) , B=(x1,y1) sont la ligne connu noeuds finaux
dir=B-A; dir/=|dir|; est le vecteur unitaire de la direction de la ligne (|| est la taille du vecteur)

dir.x=B.x-A.x;' 
dir.y=B.y-A.y; 
dir/=sqrt((dir.x*dir.x)+(dir.y*dir.y)); 

donc vous pouvez l'utiliser et sa rotation de 90 degrés comme vecteurs de base. Laissez-q être les 90 degrés vecteur rotation, en 2D, il est facile d'obtenir:

q.x=+dir.y 
q.y=-dir.x 

maintenant vous pouvez calculer vos points recherchés:

C=B-(h*dir)+(w*q/2.0); 
D=B-(h*dir)-(w*q/2.0); 

il est juste traduction par h et w/2 le long base vecteurs