JavaScript/Canvas/Transformationen

Eine weitere Möglichkeit der Bildmanipulation stellt die Verwendung von sogenannten Transformationen dar. Eine Transformation (von lat. transformare: umformen, umwandeln) ist dabei ein Muster (die sogenannte Transformationsmatrix), mit dessen Hilfe jedem Ursprungspunkt ein neuer Zielpunkt zugewiesen wird. Mögliche Transformationen sind z. B. die einfache Verschiebung (Translation), Rotation, Streckung (Skalierung) u. Ä.

Zur Verwendung solcher Transformationen stehen folgende Memberfunktionen zur Verfügung:

• translate(tx, ty): Verschiebt alles, was nach dem Aufrufen von translate gezeichnet wird, um die angegebenen Koordinaten. Dies bedeutet, dass allen folgenden x-Koordinaten der Wert tx bzw. allen y-Koordinaten ty hinzuaddiert wird. Wird die Funktion mehrmals aufgerufen, so werden die einzelnen tx bzw. ty addiert. Der Funktionsaufruf ist identisch mit transform(1, 0, 0, 1, tx, ty).
• rotate(w): Rotiert alles, was nach dem Aufrufen von rotate gezeichnet wird, im Uhrzeigesinn um den hinterlegten Winkel; als Rotationszentrum wird dabei der (evtl. durch translate verschobene) Punkt (0 | 0) angenommen. Berücksichtigen Sie, dass der Winkel in der Einheit rad interpretiert wird (seine Angabe erfolgt jedoch als Float-Wert, nicht als CSS-String). Wird die Funktion mehrmals aufgerufen, so werden die einzelnen w addiert. Der Funktionsaufruf ist identisch mit transform(Math.cos(w), Math.sin(w), -Math.sin(w), Math.cos(w), 0, 0).
• scale(kx, ky): Multipliziert alle x-, y-, width- und height-Angaben, die nach dem Aufrufen von scale den Context-Funktionen übergeben werden. Dabei wird kx mit den x- und width-Angaben, ky mit den y- und height-Angaben multipliziert. Die resultierenden Zeichnungen wirken nach Verwendung von scale (zentrisch) gestreckt. Wird die Funktion mehrmals aufgerufen, so werden die einzelnen kx bzw. ky miteinander multipliziert. Der Funktionsaufruf ist identisch mit transform(kx, 0, 0, ky, 0, 0).
• setTransform(a, b, c, d, e, f): Löscht alle aktiven Translationen, Rotationen sowie Skalierungen und setzt die Transformationsmatrix auf die übergebenen Werte. Dabei haben a und d den gleichen Effekt wie kx und ky bei scale; die Werte e und f sind mit tx und ty von translate identisch. Mithilfe des Wertes c wird der x-Koordinate das c-Fache der y-Koordinate hinzuaddiert (das Umgekehrte gilt entsprechend für d). Sind die Werte a, b, c und d in spezieller Relation zueinander (z. B. über trigonometrische Funktionen wie sin und cos), wirkt das transformierte Bild rotiert, andernfalls in verschiedenster Weise verzerrt, z. B. erscheinen Rechtecke plötzlich wie Parallelogramme (mehr Informationen zu diesen sogenannten Scherungsfaktoren siehe Weblinks).
• transform(a, b, c, d, e, f): Multipliziert die aktuelle Transformationsmatrix mit einer weiteren Matrix, die durch die übergebenen Argumente spezifiziert wird (genauere Informationen über Matrixmultiplikation siehe Weblinks). Angenommen, die Werte a_alt, b_alt, c_alt, d_alt, e_alt und f_alt sind die aktuellen Werte der Transformationsmatrix. Dann besitzt die Transformationsmatrix nach Aufrufen der Funktion transform(a, b, c, d, e, f) die folgenden Werte:
  • a_neu = a_alt * a + c_alt * b (entspricht neuem x-Skalierungswert)
  • b_neu = b_alt * a + d_alt * b (entspricht neuer y-Scherung)
  • c_neu = a_alt * c + c_alt * d (entspricht neuer x-Scherung)
  • d_neu = b_alt * c + d_alt * d (entspricht neuem y-Skalierungswert)
  • e_neu = a_alt * e + c_alt * f + e_alt (entspricht neuer x-Verschiebung)
  • f_neu = b_alt * e + d_alt * f + f_alt (entspricht neuer y-Verschiebung)

Beispiel ansehen …

 function zeichne() {
    var element = document.getElementById('canvas');
 
    if(element.getContext) {
      var context = element.getContext('2d');
 
      context.translate(element.width / 2, element.height / 2);
      context.scale(1, 2);
      context.rotate(45 * Math.PI / 180);
      context.strokeRect(-50, -50, 100, 100);
    }
  }

In diesem Beispiel wird eine Raute in die Mitte der Canvas gezeichnet. Hierzu wird nach dem Ermitteln des Context-Objekts zuerst die Funktion translate aufgerufen, welche den Ursprung des Koordinatensystems in die Mitte der Canvas verschiebt. Weiterhin bewirkt der darauf folgende Aufruf von scale die Streckung der y-Achse um den Faktor 2. Dadurch wird eine y-Angabe von z.B. 100 auf 200 vergrößert. Abschließend wird das Koordinatensystem noch um 45° im Uhrzeigesinn rotiert, die Formel 45 * Math.PI / 180 rechnet dabei das Winkelmaß in das notwendige Bogenmaß um. Schließlich wird das eigentliche Rechteck, welches dank der vorangegangenen Transformationen wie eine Raute in der Mitte der Canvas erscheint, gezeichnet.

• Text
• Canvas (Übersicht)
• Pixel Manipulation

Quellen

Weblinks

• W3C: transformations
• WHATWG: canvas-Element
  • WHATWG: canvasTransform

• Wikipedia Scherung und Scherungskoeffizienten
• canvas.quaese: Mathematischer Aufbau der Transformationsmatrix
• Wikipedia: Matrizenmultiplikation