Finde die Koordinaten, um die Pfeilspitze (gleichschenkliges Dreieck) am Ende einer Linie zu zeichnen
Ich versuche, eine Funktion zu erstellen, die die 3-Punkt-Koordinaten der Pfeilspitze (gleichschenkliges Dreieck) zurückgibt, die ich am Ende einer Linie zeichnen möchte.
Die Herausforderung liegt in der Ausrichtung (Winkel) der Linie, die im Quadranten zwischen 0 und 360 Grad variieren kann.
Ich habe die folgenden Werte:
//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 ;
Dies ist meine bisherige Funktion, die die zwei Punktkoordinaten der Basis des Dreiecks zurückgibt:
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
}
Wie kann ich die Koordinaten der Spitze des Dreiecks unter Berücksichtigung des Winkels der Linie bestimmen?