Encuentra coordenadas para dibujar la punta de flecha (triángulo isoscele) al final de una línea
Estoy tratando de crear una función que devuelva las coordenadas de 3 puntos de la punta de flecha (triángulo isoscele) que quiero dibujar al final de una línea.
El desafío está en la orientación (ángulo) de la línea que puede variar entre 0 y 360 grados en el cuadrante.
Tengo los siguientes valores:
//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 ;
Esta es mi función hasta ahora que devuelve las coordenadas de dos puntos de la base del triángulo:
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
}
¿Cómo puedo determinar las coordenadas de la parte superior del triángulo considerando el ángulo de la línea?