HTML5 Leinwand Transformation Matrix

Question

Ich verstehe nicht, was die Transformation Matrix ist und wie man damit arbeitet.

Im Folgenden wird ein Kreis bei 0, 0 meiner Leinwand zeichnen:

drawPoints: function(ctx, max_points) 
     { 
      ctx.save(); 

      ctx.setTransform(1, 0, 0, 1, -551.23701, -368.42499); 

      ctx.fillStyle="#0066ab"; 
      ctx.globalAlpha="0.7"; 
      ctx.beginPath(); 
      ctx.moveTo(584.50,387.96); 
      ctx.bezierCurveTo(584.50,397.14,577.05,404.59,567.87,404.59); 
      ctx.bezierCurveTo(558.68,404.59,551.24,397.14,551.24,387.96); 
      ctx.bezierCurveTo(551.24,378.77,558.68,371.33,567.87,371.33); 
      ctx.bezierCurveTo(577.05,371.33,584.50,378.77,584.50,387.96); 
      ctx.closePath(); 
      ctx.fill(); 

      ctx.restore(); 
     } 

Ich möchte passieren in Argumente für setTransform() (von einem svg umgewandelt mit svg2canvas.jar erzeugt) zu Zeichnen Sie auf irgendeinen Teil meiner Leinwand, aber ich verstehe nicht, wie man es überhaupt benutzt.

Answer 1

Die Transformationsmatrix, auf die sie sich beziehen, ist die gemeinsame Transformationsmatrix, die in der linearen Algebra gefunden wird. Diese Argumente bilden die Transformationsmatrix, die Sie auf Ihre Koordinaten für die angegebenen Formen oder Pfade anwenden möchten. Diese page beschreibt das Transformationsverfahren. Bitte schauen Sie sich speziell die Matrix an, die sie unter der Methodensignatur für die Transformation definieren. Es zeigt Ihnen, welche Parameter wo in der Transformationsmatrix stehen. Bitte beachten Sie auch folgende link. Wenn Sie nach unten scrollen, sehen Sie, was jedes Element in der Transformationsmatrix bedeutet. Zum Beispiel repräsentiert das [0,0] -Element (Parameter a aus der HTML5-Transformationsverfahrensignatur) der Transformationsmatrix, wie die Koordinate in der X-Richtung skaliert wird. Hoffe, das hilft,

Answer 2

Die Transformationsmatrix wird mit jedem Punkt multipliziert, bevor es auf der Zeichenfläche gezeichnet wird. Wie @Eric sagte, es ist ein affine transformation matrix aus der linearen Algebra. In Ihrem Beispiel würde es so funktionieren:

[ x'] [ 1 0 -551.23701 ] [ x ] [ x - 551.23701 ] 
[ y'] = [ 0 1 -368.42499 ] [ y ] = [ y - 368.42499 ] 
[ 1 ] [ 0 0 1  ] [ 1 ] [  1  ] 

So ist es die x- und y-Koordinaten von -551,23 verschiebt ... und -368,42 ... ist.

Andere Arten von Transformationen beinhalten unterschiedliche "Schlitze" in der Matrix. Zum Beispiel ist hier die Matrix, die die Zeichnung von sx und sy (x und y Skalierungsfaktoren) skaliert:

[ sx 0 0 ] 
[ 0 sy 0 ] 
[ 0 0 1 ] 

und Drehung (Winkel im Bogenmaß):

[ cos(angle) -sin(angle) 0 ] 
[ sin(angle) cos(angle) 0 ] 
[  0   0  1 ] 

Der Vorteil der Verwendung eines Transformationsmatrix über den Aufruf einzelner Methoden, wie translate, scale und rotate, ist, dass Sie alle Transformationen in einem Schritt durchführen können. Es wird jedoch kompliziert, wenn Sie anfangen, sie auf nicht-triviale Weise zu kombinieren, weil Sie die Matrizen zusammen multiplizieren müssen, um das Endergebnis zu erhalten (das ist, was Funktionen wie scale usw. für Sie tun). Es ist fast immer einfacher, jede Funktion aufzurufen, anstatt sie selbst zu berechnen.

Die Links @Eric erwähnt und die transformation matrix article on Wikipedia gehen in viel mehr Details darüber, wie alles funktioniert.

Answer 3

fand ich die Beispiele auf Seite Apples hilfreich sein, um die Transformationsmatrix zum Verständnis:

http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/MatrixTransforms/MatrixTransforms.html

Answer 4

ich eine sehr einfache Transformation class to keep track of the Canvas transformation matrix. implementiert haben Sie es nur, wie die Matrix Werke sehen können und was es macht. Die Klasse ermöglicht Ihnen auch, die Matrix zu verfolgen, da Canvas es Ihnen nicht ermöglicht, die aktuelle Matrix abzurufen.