20

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

谁能向我解释什么是矩阵以及如何使用它？

4

3 回答 3

27

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

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

然而，在 CSS3 中有一个很好的矩阵数学指南。它还附带一个矩阵构造集（截至 2013 年 2 月，它在 Chrome 中不起作用，但在 Firefox 中起作用）。由于 CSS3 和 Raphael 矩阵变换背后的数学原理本质上是相同的，因此您可以使用此工具生成一组矩阵变换数，然后将它们应用到 Raphael 中，结果应该或多或少相同。

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

  • 这是一组 6 个数字，用于计算拉斐尔形状边界框的每个角在转换完成后的位置。在它们之间，这 6 个数字几乎可以创建任何缩放、变换、旋转和剪切效果。
  • 它是 Raphael 变换的幕后引擎：Raphael 将变换转换为矩阵坐标。矩阵坐标可能会令人难以置信：除非您正在做一些极其复杂的事情，否则通常最好让它在引擎盖下完成它。
  • 这是一个XKCD 笑话，说明了矩阵变换背后的 6 个数字之间的数学关系。你会觉得这很有趣，或者，它会让你相信最好让 Raphael 在幕后自己做数学......

在此处输入图像描述

  • 查看元素的当前矩阵状态：
    • 直接查看元素的矩阵对象：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 移动。但它们以数学上复杂的方式相互作用。这并不简单。
于 2012-12-28T15:40:57.193 回答
4

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

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

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

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

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

于 2012-06-07T22:58:40.367 回答
1

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

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

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

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

在 iPod 上，所以无法超链接

于 2012-06-07T23:23:52.573 回答