什么是raphael的“矩阵”

Question

我试图更好地理解raphael.js，但我发现raphael.js文档有时会让人感到困惑，有时候会有点模糊。

任何人都可以向我解释什么是矩阵以及如何使用它？

Answer 1

在拉斐尔的任何地方几乎没有关于Matrix的好的，清晰的信息。然而，好消息是，它几乎与SVG中的Matrix转换以及CSS3完全相同。

SVG中有一些矩阵变换的指南，但它们通常假设您已经理解了矩阵数学。如果你不这样做，那就不多了。

然而，有one good guide on matrix maths in CSS3。它还带有Matrix Construction Set（截至2013年2月，它在Chrome中不起作用，但在Firefox中有效）。由于CSS3和Raphael矩阵变换背后的数学原理基本相同，你可以使用这个工具生成一组矩阵变换数，然后在Raphael中应用它们，它应该或多或少是相同的结果。

Matrix变换的超快速概述：

• 这是一组6个数字，用于计算转换完成后Raphael形状的边界框的每个角落。在它们之间，这6个数字可以创建几乎任何比例，变换，旋转和剪切效果。
• 这是Raphael变换的幕后引擎：Raphael将变换转换为矩阵坐标。矩阵坐标会变得非常令人难以置信：除非你做的事情非常复杂，否则通常最好让它在幕后做它。
• 这是一个XKCD joke，说明矩阵变换背后的6个数字之间的数学关系。你会发现这很有趣，或者说，它会让你相信最好让拉斐尔在引擎盖下进行数学运算。

• 要查看元素的当前矩阵状态：
  • 直接查看元素的矩阵对象：someElement.matrix是一个对象，每个数字都以字母形式给出（例如{a:1,b:0,c:0,d:1,e:0,f:0}。直接设置这些对象不会改变对象（所以你不能这样做someElement.matrix.b = 3;）
  • 您可以使用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-scale，b就像y-shear，c就像x-shear，d就像y-scale ，e和f喜欢x和y移动。但它们以数学上复杂的方式相互作用。这并不简单。

Answer 2

不知道Raphaël，但是看看文档并了解其他绘图API，我会做一个半教育的猜测。

在图形（Raphaël和其他任何地方）中，矩阵用于转换（移动，旋转等）图稿。您将找到HTML5 canvas元素本身的类似API。

使用Element.transform方法移动和旋转绘图表面时。就像在你开始画画之前在你的笔下移动一张纸一样。在内部，这种变换是使用变换矩阵完成的。如果一开始有点神秘，它是非常有用的功能。事实上，这也是3D图形的工作方式。

此外，矩阵可以相互添加，因此您可以有一个水平平移的矩阵，一个垂直平移的矩阵，一个旋转的矩阵（依此类推等），并将它们加在一起以获得组合效果

再次，我在这里推断;我不知道Raphaël。但这是图形中矩阵的基本用法。

Answer 3

另外，除了上述内容之外，Raphael曾被限制为只旋转刻度翻译，但作者将Matrix曝光到语法中，任何变换都可能用于2D图形

转到http://www.irunmywebsite.com/raphael/additionalhelp.php 对于交互式示例您可以通过在下拉列表中选择“矩阵”并完成这些示例来进行过滤。 您也可以通过Matrix搜索以获得不同的示例子集。

例如，有一种称为'skew'的变换 如果您在页面上搜索此内容，则会看到另一个显示此内容的示例。

不要害羞的Matrix，这是一个有趣的主题

在iPod上无法超链接