[GELÖST] Frage zu Linie zeichnen mit Bresenham-Algorithmus

[salazar]

Hi in die Runde,

ich hätte da eine Frage. Komme hier aktuell nicht weiter. Ich benutze folgende function zum zeichnen von Linien. Gegeben sind immer 2 Punkte, bzw. zwei Koordinaten Paare ( x1, y1 und x2, y2 ) und für die Farbe die Werte r, g, b und a. Hier die function:

function drawLine( x1, y1, x2, y2, r, g, b, a ) {

  var dx = Math.abs( x2 - x1 );
  var dy = Math.abs( y2 - y1 );

  var sx = ( x1 < x2 ) ? 1 : -1;
  var sy = ( y1 < y2 ) ? 1 : -1;
  
  var err = dx - dy;

  var lx = x1;
  var ly = y1;    

  while ( true ) {

    if ( lx > 0 && lx < w && ly > 0 && ly < h ) {

      setPixel( lx, ly, r, g, b, a );

    }

    if ( ( lx === x2 ) && ( ly === y2 ) )
      break;

    var e2 = 2 * err;

    if ( e2 > -dx ) { 

      err -= dy; 
      lx += sx; 

    }

    if ( e2 < dy ) { 

      err += dx; 
      ly += sy; 

    }

  }

};

In der function selbst gibt es noch die beiden Variablen w und h. Diese beinhalten die Werte für die Breite und Höhe der Canvas. Das ist nur dafür gut um zu schauen ob die zu zeichnenden Pixel sich auf der Canvas befinden. Für dieses Beispiel hier nicht so wichtig.

Das Ganze funktioniert schon sehr gut und sehr performant. Siehe Screenshots:
Screenshot 1:

Screenshot 2:


Jetzt zu meiner Idee/Frage. ich hätte gerne, wenn die Distanz zwischen den Punkten größer ist als die Distanz über die Grenzen der Canvas hinweg (wie im zweiten Screenshot zu sehen), dass die Punkte wie folgt mit einer Linie miteinander verbunden werden. Nicht wie gehabt, sondern z.B. so:
Screenshot 3:


Hat einer von euch eine Idee wie man das umsetzen könnte?

Besten Dank und VG

 

[tsseh]

Hat einer von euch eine Idee wie man das umsetzen könnte?

irgendwie sehe ich dein problem nicht.
um rauszufinden, dass die "Distanz zwischen den Punkten größer ist als die Distanz über die Grenzen der Canvas hinweg" musst du ja die Punkte berechnen, die als verlängerung der linie auf den grenzen liegen, nennen wir sie Pug und Pog zusammen mit den bisherigen punkten, nennen wir sie P1 und P2, zeichnest du jetzt einfach anstelle einer linie zw P1 und P2 zwie linien, eine zw P1 und Pog und die andere zw. P2 und Pug

 

[salazar]

Oh man. Natürlich. Wie recht du hast.
Danke für das Brett vorm Kopf entfernen!