我试图更好地理解 raphael.js,但我发现 raphael.js 文档有时会令人困惑,有时会有点含糊。
谁能向我解释什么是矩阵以及如何使用它?
我试图更好地理解 raphael.js,但我发现 raphael.js 文档有时会令人困惑,有时会有点含糊。
谁能向我解释什么是矩阵以及如何使用它?
在拉斐尔的任何地方,几乎没有关于 Matrix 的好的、清晰的信息。然而,好消息是,它与 SVG 和 CSS3 中的矩阵转换几乎完全相同。
有一些关于 SVG 中矩阵变换的指南,但它们通常假设您已经了解矩阵数学。如果你不这样做没有多大用处。
然而,在 CSS3 中有一个很好的矩阵数学指南。它还附带一个矩阵构造集(截至 2013 年 2 月,它在 Chrome 中不起作用,但在 Firefox 中起作用)。由于 CSS3 和 Raphael 矩阵变换背后的数学原理本质上是相同的,因此您可以使用此工具生成一组矩阵变换数,然后将它们应用到 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 移动。但它们以数学上复杂的方式相互作用。这并不简单。不了解 Raphaël,但查看文档并了解其他绘图 API,我会做出一个半受过教育的猜测。
在图形(Raphaël 和其他任何地方)中,矩阵用于变换(移动、旋转等)艺术品。您会为 HTML5canvas
元素本身找到一个类似的 API。
当您使用该Element.transform
方法移动和旋转绘图表面时。就像在重新开始绘画之前将一张纸移到笔下一样。在内部,此类转换是使用转换矩阵完成的。这是一个非常有用的功能,虽然一开始有点神秘。事实上,这也是 3D 图形的工作方式。
此外,矩阵可以相互添加,因此您可以拥有一个水平平移的矩阵,一个垂直平移的矩阵,一个旋转的矩阵(依此类推),然后将它们加在一起以获得组合效果。
同样,我在这里推断;我不认识拉斐尔。但这是图形中矩阵的基本用途。
此外,除了上述之外,Raphael 曾经仅限于旋转缩放平移,但随着作者将 Matrix 暴露在语法中,任何变换都可以用于 2d 图形
访问http://www.irunmywebsite.com/raphael/additionalhelp.php 获取交互式示例 您可以通过在下拉列表中选择“矩阵”并完成这些示例进行过滤。您还可以按矩阵搜索以获取不同的示例子集。
例如,有一种名为“skew”的变换类型。如果您在页面上搜索此内容,您将看到另一个显示此内容的示例。
不要害羞矩阵,这是一个有趣的主题
在 iPod 上,所以无法超链接