Was ist eine "Matrix" für in Raphael

Question

Ich versuche, ein besseres Verständnis von raphael.js im Allgemeinen zu bekommen, aber ich habe festgestellt, dass die raphael.js Dokumentation manchmal und zu anderen Zeiten ein wenig verwirrend sein kann vage.

kann mir jemand erklären, wofür Matrix ist und wie es benutzt wird?

Answer 1

Es gibt fast keine gute, klare Informationen über die Matrix in Raphael überall Hyperlink könnte. Die gute Nachricht ist jedoch, dass es fast genau dasselbe ist wie Matrix-Transformationen in SVG und auch in CSS3.

Es gibt einige Anleitungen zu Matrixtransformationen in SVG, aber normalerweise gehen Sie davon aus, dass Sie Matrixmathematik bereits verstehen. Nicht viel, wenn Sie es nicht tun.

Es gibt jedoch one good guide on matrix maths in CSS3. Es kommt auch mit einem Matrix Construction Set (ab Februar 2013 funktioniert es nicht in Chrome, funktioniert aber in Firefox). Da die mathematischen Prinzipien hinter CSS3 und Raphael Matrix Transformationen im Wesentlichen die gleichen sind, können Sie dieses Tool verwenden, um eine Reihe von Matrix-Transformationszahlen zu generieren, dann wenden Sie sie in Raphael und es sollte mehr oder weniger das gleiche Ergebnis sein.

Super schneller Überblick über welche Matrix-Transformationen sind alle über:

• Es ist ein Satz von 6 Zahlen, die verwendet werden, um zu berechnen, wo jede Ecke des Begrenzungsrahmens einer Raphael Form wird nach der Transformation hat abgeschlossen.Zusammen können diese 6 Zahlen so ziemlich jede Skalierung, Transformation, Rotation und Scherung erzeugen.
• Es ist die hinter den Kulissen liegende Maschine für Raphael-Transformationen: Raphael übersetzt Transformationen in Matrixkoordinaten. Matrix-Koordinaten können sehr irrsinnig werden: Wenn Sie nicht etwas extrem Komplexes machen, ist es normalerweise am besten, es einfach unter die Haube zu bringen.
• Hier ist ein XKCD joke zur Veranschaulichung der mathematischen Beziehung zwischen den 6 Zahlen hinter Matrixtransformationen. Sie werden das entweder lustig finden, oder es wird Sie davon überzeugen, dass es am besten ist, wenn Raphael die Mathematik selbst unter der Haube selbst macht. .

• Um Blick auf eine aktuelle Matrix Zustand des Elements:
  • direkt an das Matrix-Objekt zu suchen, um das Element: someElement.matrix ist ein Objekt mit jedem Brief gegebene Zahl (zB {a:1,b:0,c:0,d:1,e:0,f:0}. Wenn Sie diese Einstellungen direkt ändern, wird das Objekt nicht geändert (Sie können also nicht someElement.matrix.b = 3;)
  • Sie können umgekehrt-tra nslate die aktuelle Matrix in eine menschenlesbare Objekt Transformation enthält Attribute mit someElement.matrix.split()
  • Sie können auch Reverse übersetzen die Matrix in einer Transformations Zeichenfolge mit someElement.matrix.toTransformString();
• Wenn Sie benötigen eine Matrix manuell eingestellt, Sie können es auf eine dieser Arten tun.
  • Animation (mit Array): someElement.animate({transform: ['m',0.5, -0.5, 0.5, 0.5, -0.5, 0.5]}, 1000);
  • Sofort (unter Verwendung von Array): someElement.transform(['m',0.5, -0.5, 0.5, 0.5, -0.5, 0.5]);
  • Animation (mit string): someElement.animate({transform: 'm0.5 -0.5 0.5 0.5 -0.5 0.5'}, 1000);
  verwandeln Alle diese ersetzen oder aus dem vorherigen animieren
  • Sofort (mit Zeichenfolge): someElement.transform('m0.5 -0.5 0.5 0.5 -0.5 0.5');
• Dies ist die Standard-Matrix-Zeichenfolge: 1 0 0 1 0 0. Wenn Sie dies anwenden, wird eine Transformation auf ihren Standardzustand zurückgesetzt.
• Was jede Matrixnummer bedeutet, ist sehr schwierig zu charakterisieren. In Isolierung, a Arbeiten wie x-Skala, wie b y-shear, c wie X-Scher-, d wie y-Skala und e und f wie x und y bewegen. Aber sie interagieren auf mathematisch komplexe Weise. Es ist nicht einfach.

Answer 2

Ich kenne Raphaël nicht, aber wenn ich mir die Dokumente ansehe und andere Zeichnungs-APIs kenne, werde ich eine halbherzige Vermutung abgeben.

In Grafiken (Raphaël und anderswo) werden Matrizen verwendet, um das Artwork zu transformieren (verschieben, drehen usw.). Sie werden eine ähnliche API für das HTML5-Element canvas selbst finden.

Wenn Sie die Element.transform-Methode verwenden, um die Zeichenfläche zu verschieben und zu drehen. Wie wenn du ein Stück Papier unter deinen Stift schiebst, bevor du mit dem Zeichnen beginnst. Intern werden solche Transformationen unter Verwendung einer Transformationsmatrix durchgeführt. Es ist ein sehr nützliches, wenn auch ein wenig kryptisch. Genau so funktioniert auch die 3D-Grafik.

Darüber hinaus können Matrizen einander hinzugefügt werden, so dass Sie eine Matrix haben, die horizontal übersetzt, eine, die vertikal übersetzt, und eine, die dreht (und so weiter), und addieren sie zusammen, um die Kombination zu erhalten Auswirkungen.

Auch hier bin ich extrapolieren; Ich kenne Raphaël nicht. Aber das ist die grundlegende Verwendung von Matrizen in Grafiken.

Answer 3

auch zusätzlich zu den oben genannten, wurde Raphael nur einmal beschränkt drehen Skala zu übersetzen, aber mit den Autoren Exposition von Matrix in die Syntax-Transformation jeder ist möglich, 2D-Grafiken

Zum http://www.irunmywebsite.com/raphael/additionalhelp.php für interaktive Beispiele können Sie Filter durch Auswahl von 'Matrix' in der Dropdown-Liste und durcharbeiten dieser Beispiele. Sie können auch nach Matrix suchen, um eine andere Teilmenge von Beispielen zu erhalten.

Zum Beispiel gibt es eine Art von Transformation namens 'skew' Wenn Sie auf der Seite nach diesem suchen, sehen Sie ein anderes Beispiel, das dies zeigt.

nicht von Matrix schüchtern sein kann, es ist ein interessantes Thema

auf dem iPod so nicht