Information Technology Reference
In-Depth Information
Der Hauptunterschied zwischen beiden liegt darin, dass
transform()
die zum
Zeitpunkt des Aufrufs bestehende Transformationsmatrix durch Multiplikation
weiter verändert, wohingegen
setTransform()
die bestehende Matrix mit der
neuen überschreibt.
Die drei Grundmethoden könnten ebenso als Attribute für
transform()
oder
setTransform()
formuliert werden und sind im Grunde genommen nichts an-
deres als bequeme Kürzel für entsprechende Matrixtransformationen. Tabelle
5.4 zeigt diese Attribute und listet noch weitere nützliche Matrizen zum Spie-
geln (
flipX/Y
) und Neigen (
skewX/Y
) auf. Gradangaben beim Neigen erfolgen
wieder in Radiant.
Methode
Transformationsmatrix (m11, m12, m21, m22, dx, dy)
scale(x, y)
x,0,0,y,0,0
rotate(angle)
cos(angle),sin(angle),-sin(angle), cos(angle),0,0
translate(x, y)
1,0,0,1,x,y
flipX()
-1,0,0,1,0,0
flipY()
1, 0, 0, -1, 0, 0
skewX(angle)
1,0,tan(angle),1,0,0
skewY(angle)
1,tan(angle),0,1,0,0)
Tabelle 5.4:
Matrizen der Grundtransformationen und weiterer nützlicher Transfor-
mationsmethoden
Bevor wir uns einem ausführlichem Beispiel zuwenden, muss noch erwähnt wer-
den, dass sowohl
getImageData()
als auch
putImageData()
gemäß Spezifikation
von Transformationen unabhängig sind. Der Aufruf
getImageData(0,0,100,100)
greift immer auf das 100 x 100 Pixel große Quadrat in der linken oberen Ecke
des Canvas zu, egal ob das Koordinatensystem verschoben, skaliert oder ro-
tiert wurde. Ebenso verhält es sich bei
putImageData(imagedata,0,0)
, wo wie-
derum die linke obere Ecke als Anfasspunkt zum Auftragen des Inhalts von
imagedata
dient.
Widmen wir uns jetzt dem angekündigten Beispiel, in dem wir alle gelernten
Methoden zum Transformieren noch einmal anwenden. Abbildung 5.37 zeigt
das ansprechende Resultat - eine Collage von drei Bildausschnitten unseres
Yosemite-Bildes mit Spiegeleffekt im Pseudo-3D-Raum.
