什么是raphael的"矩阵"

Question

我试图更好地理解raphael.js,但我发现raphael.js文档有时会让人感到困惑,有时甚至会有些模糊.

任何人都可以向我解释什么是矩阵,以及如何使用它？

Answer 1

拉斐尔的Matrix几乎没有任何好的,清晰的信息.然而,好消息是,它几乎与SVG中的Matrix转换以及CSS3完全相同.

SVG中有一些矩阵变换的指南,但它们通常假设您已经理解了矩阵数学.如果你不这样做,没什么用处.

然而,CSS3中的矩阵数学有一个很好的指南.它还附带一个Matrix Construction Set(截至2013年2月,它不适用于Chrome,但适用于Firefox).由于CSS3和Raphael矩阵变换背后的数学原理基本相同,你可以使用这个工具生成一组矩阵变换数,然后在Raphael中应用它们,它应该或多或少是相同的结果.

Matrix快速转换的全面概述:

• 它是一组6个数字,用于计算转换完成后Raphael形状的边界框的每个角落.在它们之间,这6个数字可以创建几乎任何比例,变换,旋转和剪切效果.
• 这是Raphael变换的幕后引擎:Raphael将变换转换为矩阵坐标.矩阵坐标可能会令人难以置信:除非你做的事非常复杂,否则通常最好让它在幕后做事.
• 这是一个XKCD笑话,说明了矩阵变换背后的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标尺,b像的y剪切,c如x剪切,d像y标尺,并e和f像x和y移动.但它们以数学上复杂的方式相互作用.这并不简单.