• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

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

salazar

New member
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:
Code:
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:
ss1.png
Screenshot 2:
ss2.png

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:
ss3.png

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

Besten Dank und VG
 
Zuletzt bearbeitet von einem Moderator:
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
 
Zurück
Oben