什麼是raphael的「矩陣」

Question

我試圖更好地理解raphael.js，但我發現raphael.js文檔可能會在有些時候和其他時候有點混淆模糊。

任何人都可以向我解釋什麼是矩陣和如何使用？

Answer 1

有幾乎沒有良好的，明確的矩陣在拉斐爾信息的任何地方。不過，好消息是，它幾乎和SVG和CSS3中的矩陣轉換完全相同。

有一些SVG矩陣變換的指南，但他們通常假設你已經理解矩陣數學。沒有太多的用處，如果你不這樣做。

但是，有one good guide on matrix maths in CSS3。它還附帶一個Matrix Construction Set（截至2013年2月，它不適用於Chrome，但適用於Firefox）。由於CSS3和Raphael矩陣變換背後的數學原理基本相同，因此可以使用此工具生成一組矩陣變換數字，然後在Raphael中應用它們，它應該或多或少具有相同的結果。

• 這是一組用於計算其中拉斐爾形狀的邊框的每個角落將是轉型後的6個號碼的：什麼矩陣變換是所有關於

  超快速概述完成。在它們之間，這6個數字可以創建幾乎任何比例，變換，旋轉和剪切效果。

• 這是幕後的發動機拉斐爾轉換：轉換拉斐爾將變換矩陣座標。矩陣座標可能會讓人難以置信，除非你正在做一些非常複雜的事情，通常最好是讓它把事情做到底。
• 下面是一個示出XKCD joke矩陣變換後面的6號之間的數學關係。你要麼找到這個有趣的，或者，它會說服你，這是最好的，只是讓拉斐爾做數學本身引擎蓋.. 下。

• 要看一個元素的當前矩陣狀態：
  • 要查看直接元素的矩陣對象：someElement.matrix與由字母給定的每個號碼的對象（例如{a:1,b:0,c:0,d:1,e:0,f:0}。這些設置直接不改變對象（所以你不能做someElement.matrix.b = 3;）
  • 您可以反向TRA nslate當前矩陣到含有轉型更可讀的對象屬性使用someElement.matrix.split()
  • 您也可以在矩陣someElement.matrix.toTransformString();
• 如果需要手動設置矩陣反向翻譯成變換字符串，你可以通過以下方法之一來完成。所有的這些替換或動畫從先前的變換：
  • 動畫（使用陣列）：someElement.animate({transform: ['m',0.5, -0.5, 0.5, 0.5, -0.5, 0.5]}, 1000);
  • 即時（使用陣列）：someElement.transform(['m',0.5, -0.5, 0.5, 0.5, -0.5, 0.5]);
  • 動畫（使用字符串）：someElement.animate({transform: 'm0.5 -0.5 0.5 0.5 -0.5 0.5'}, 1000);
  • 即時（使用字符串）：someElement.transform('m0.5 -0.5 0.5 0.5 -0.5 0.5');
• 這是默認的矩陣字符串：1 0 0 1 0 0。應用此操作會將轉換重置爲默認狀態。
• 什麼每個矩陣的數目是非常困難的表徵。 在隔離，a作品像X標尺，b像的y剪切，c如x剪切，d像y標尺，和e和f像x和y移動。但他們以數學複雜的方式進行交互。這並不簡單。

Answer 2

不知道Raphaël，但看着文檔和知道其他繪圖API，我會做一個半受教育的猜測。

在圖形（Raphaël和其他任何地方）矩陣用於轉換（移動，旋轉等）的藝術品。您會發現HTML5 canvas元素本身的類似API。

當您使用Element.transform方法來移動和旋轉繪圖表面時。就像再次開始繪畫之前在筆下移動一張紙一樣。在內部，這種轉換是使用轉換矩陣完成的。這是一個非常有用的，如果有點神祕起初，功能。事實上，3D圖形也是如此。

此外，矩陣可以相互添加，因此您可以有一個水平翻譯的矩陣，一個垂直翻譯，一個旋轉（依此類推），並將它們加在一起得到組合效果。

再次，我在這裏推斷;我不認識拉斐爾。但這是圖形中矩陣的基本用法。

除了上述

Answer 3

此外，拉斐爾曾一度只侷限於旋轉規模翻譯，但與作者接觸基質進入語法的變換是可能的2D圖形

轉到http://www.irunmywebsite.com/raphael/additionalhelp.php 爲互動的例子你可以通過在下拉列表中選擇「矩陣」並通過這些示例進行過濾。 您還可以通過Matrix搜索來獲取不同的示例子集。

例如，有一種稱爲'歪斜'的變換類型 如果您在頁面上搜索此內容，您將看到顯示此內容的另一個示例。

不要害羞矩陣，這是一個有趣的話題

在iPod上所以不能超鏈接