=
3.228.220.31

Daschmi's Notizblog

Logo des Etikators - Tool um online drucken von Etiketten für selbst angefertigte Tinkturen

Gleichschenkliges Dreieck auf Gerade um Punkt (Pfeil)

Erstellt in Sonstiges am 25. März 2020

Mit folgender Funktion kann man ein gleichschenkliges Dreieck mit BC = hc auf ein Canvas zeichnen. Dei Position des Dreieckes ist durch die zwei Punkte A und D bestimmt, die die Strecke von A nach D definieren.

Die Funktion kann rechts getestet werden. Der Javascript Code folgt hier:

let canvas = document.getElementById('canvas');
        
function arrow(Ex, Ey, Tx, Ty) {

    let ctx = canvas.getContext('2d'); 

    let ET = Math.sqrt(Math.pow(Tx - Ex, 2) + Math.pow(Ey - Ty, 2));
    let EL = Math.sqrt(Math.pow(ET / 2, 2) + Math.pow(ET, 2));
    let Alpha = Math.acos(ET / EL);
    let Alpha2 = Math.asin((Ey - Ty) / ET);

    let x_L = EL * Math.cos(Alpha + Alpha2);
    let y_L = EL * Math.sin(Alpha + Alpha2);

    let x_R = EL * Math.cos(Alpha - Alpha2);
    let y_R = EL * Math.sin(Alpha - Alpha2);

    let Rx = Ex + ((Tx > Ex)?1:-1) * x_R;
    let Ry = Ey + y_R;

    let Lx = Ex + ((Tx > Ex)?1:-1) * x_L;
    let Ly = Ey - y_L; 

    ctx.clearRect(0, 0, 300, 300);

    ctx.beginPath();
    ctx.moveTo(Ex, Ey);
    ctx.lineTo(Rx, Ry);
    ctx.lineTo(Lx, Ly);
    ctx.lineTo(Ex, Ey);
    ctx.stroke(); 

}

canvas.addEventListener('mousemove', function(e) { 
    
    arrow(150, 150, e.offsetX, e.offsetY);

});