javascript - raphael中的 “matrix”是什么

我试图总体上更好地了解raphael.js，但是我发现raphael.js文档有时会令人困惑，有时甚至会有些含糊。

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

最佳答案

几乎没有关于Raphael中Matrix的良好，清晰的信息。但是，好消息是，它与SVG和CSS3中的Matrix转换几乎完全相同。

SVG中有一些有关矩阵变换的指南，但是它们通常假定您已经了解矩阵数学。如果没有，用处不大。

但是，有one good guide on matrix maths in CSS3。它还带有Matrix Construction Set(从2013年2月开始，它在Chrome中不起作用，但在Firefox中起作用)。由于CSS3和Raphael矩阵变换背后的数学原理基本相同，因此您可以使用此工具生成一组矩阵变换数，然后将其应用于Raphael，其结果应大致相同。

有关Matrix转换的所有内容的 super 快速概述:

这是一组6个数字，用于计算变换完成后Raphael形状的边界框的每个角的位置。它们之间的这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-scale，b的工作方式类似于y-shear，c的工作方式类似于x-shear，d的工作方式类似于y-scale，e和f的工作方式类似于x和y move。但是它们以数学上复杂的方式相互作用。这并不简单。

关于javascript - raphael中的 “matrix”是什么，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10939195/