Seite 1 von 1

Linie sichtbar langsam zeichnen?

Verfasst: 29.03.2015, 14:23
von znieh99
Hallo Forum,
ich möchte eine Linie von (x,y) nach (x1, y1) mittels Timer langsam (zum mitsehen) zeichnen. Kennt jemand einen Algorithmus mit dem man pixelweise in die richtige Richtung kommt?
lg heinz

Re: Linie sichtbar langsam zeichnen?

Verfasst: 30.03.2015, 12:35
von wegus
Das ist geradezu prädestiniert für Transitions udn Timelines:

https://docs.oracle.com/javafx/2/animat ... ations.htm

Re: Linie sichtbar langsam zeichnen?

Verfasst: 30.03.2015, 13:30
von znieh99
Hallo wegus,
danke für den Hinweis, aber ich brauche das für JavaScript und dort gibt es das (noch?) nicht. Aber ich habe im web den "Bresenham Algorithmus" gefunden und werde es mit diesen mal versuchen. Ergebnisse werde ich gerne bekanntgeben,
lg heinz

Re: Linie sichtbar langsam zeichnen?

Verfasst: 30.03.2015, 20:16
von znieh99
Ich habe mithilfe des "Bresenham Algorithmus" auf Wikipedia eine Lösung gefunden, die ich hier gerne vorstellen möchte. Die Lösung funktioniert auf allen Oktanten und ist in JavaScript verfasst, wo die Linien auf einer HTML5-Canvas gezeichnet werden.
lg heinz

Code: Alles auswählen

  var xs, ys;                   //Startpunkt
  var xe, ye;                   //Endpunkt
  var xd, yd;                   //Differenz Start - Ziel
  var m;                        //Ausgleichswert
  var ma;                       //aktueller Ausgleichswert
  var x1, y1;                   //aktuelle Position
  var xa, ya;                   //Erweiterungswert der Achsen
  var timer;
      /*
     * Timer-gesteuerte Linienausgabe vorbereiten
     */
  function makeLine() {
    xa = (xe < xs) ? -1 : 1;      //Erweiterungsrichtung X festlegen
    xd = Math.abs(xe - xs);       //Differenz X Start - Ziel
    ya = (ye < ys) ? -1 : 1;      //Erweiterungsrichtung Y festlegen
    yd = Math.abs(ye - ys);       //Differenz Y Start - Ziel
    m = (yd > xd) ? xd / yd : yd / xd;       //Ausgleichswert
    ma = 0;                                  // aktueller Ausgleichswert
    obj = document.getElementById("canv").getContext("2d");
    setStroke(obj, "#000000", 1);           //Linienfarbe und Breite setzen
    x1 = xs;
    y1 = ys;
      // Timer aktivieren, Linie zeichnen
    timer = setInterval(function () {myTimer(obj);}, 10);
  }
    /*
     * Ein Stück der Linie zeichnen
     */
  function myTimer(obj) {
      // die längere Achse wird jedes mal verlängert
    if(yd > xd) { y1 += ya; } else { x1 += xa; }
    ma += m;                            //Ausgleichswert wird erhöht
    if(ma >= 1) {
        // die kürzere Achse wird verlängert
      if(yd > xd) { x1 += xa; } else { y1 += ya; }
      ma -= 1;
    } //end if ma
    line(obj, xs, ys, x1, y1, 3);       //Linie zeichnen
    if(yd > xd) {
      if(y1 === ye) clearInterval(timer);   //Ende erreicht
    } else {
        if(x1 === xe) clearInterval(timer); //Ende erreicht
    } //end if/else
 }  //end func myTimer