javascript - raphael 中的 "matrix"是什么意思

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 个数字，用于计算变换完成后拉斐尔形状的边界框的每个 Angular 的位置。这 6 个数字可以创建几乎任何缩放、变换、旋转和剪切效果。
• 它是 Raphael 变换的幕后引擎:Raphael 将变换转换为矩阵坐标。矩阵坐标可能会变得非常令人难以置信:除非您正在做一些极其复杂的事情，否则通常最好让它在幕后做它的事情。
• 这是一个XKCD joke说明矩阵变换背后的 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 缩放，b像 y 剪力一样，c像x-shear，d如 y 尺度，以及 e和f就像x和y移动一样。但它们以数学上复杂的方式相互作用。这并不简单。