拉斐尔的“矩阵”是什么答案

【问题标题】：What is a "matrix" for in raphael拉斐尔的“矩阵”是什么
【发布时间】：2012-06-11 22:38:22
【问题描述】：

我试图更好地理解 raphael.js，但我发现 raphael.js 文档有时会令人困惑，有时会有点含糊。

谁能向我解释一下矩阵的用途和用途？

【问题讨论】：

【解决方案1】：

在任何地方，几乎没有关于 Raphael 中关于 Matrix 的好的、清晰的信息。不过，好消息是，它与 SVG 和 CSS3 中的矩阵转换几乎完全相同。

有一些关于 SVG 中矩阵变换的指南，但它们通常假设您已经了解矩阵数学。如果你不这样做也没多大用处。

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

什么是矩阵变换的超级快速概览：

这是一组 6 个数字，用于计算拉斐尔形状边界框的每个角在转换完成后的位置。在它们之间，这 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 和 @987654340 @ 喜欢 x 和 y 移动。但它们以数学上复杂的方式相互作用。不简单。

【讨论】：

【解决方案2】：

不认识 Raphaël，但查看文档并了解其他绘图 API，我会做出一个有根据的猜测。

在图形（Raphaël 和其他任何地方）中，矩阵用于变换（移动、旋转等）艺术品。您会发现 HTML5 canvas 元素本身的类似 API。

当您使用Element.transform 方法移动和旋转绘图表面时。就像在重新开始绘画之前将一张纸移到笔下一样。在内部，此类转换是使用转换矩阵完成的。这是一个非常有用的功能，虽然一开始有点神秘。事实上，这也是 3D 图形的工作原理。

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

再次，我在这里推断；我不认识拉斐尔。但这是图形中矩阵的基本用法。

【讨论】：

【解决方案3】：

除此之外，Raphael 曾经仅限于旋转缩放平移，但随着作者将 Matrix 暴露在语法中，任何 2d 图形的变换都是可能的

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

例如，有一种称为“倾斜”的变换如果您在页面上搜索此内容，您将看到另一个显示此内容的示例。

不要害怕 Matrix，这是一个有趣的话题

在 iPod 上，所以无法超链接

【讨论】：