什么是raphael的“矩阵”

I'm trying to get a better understanding of raphael.js in general, but i've found that the raphael.js documentation can be confusing at times and at other times a bit vague.

我试图更好地理解raphael.js，但我发现raphael.js文档有时会让人感到困惑，有时候会有点模糊。

can anyone explain to me what matrix is for and how it is used?

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

3 个解决方案

#1

There's almost no good, clear information on Matrix in Raphael anywhere. However, the good news is, it's almost exactly the same as Matrix transformations in SVG and also CSS3.

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

There are some guides to matrix transforms in SVG, but they usually assume you already understand matrix maths. Not much use if you don't.

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

There is, however, one good guide on matrix maths in CSS3. It also comes with a Matrix Construction Set (as of Feb 2013, it doesn't work in Chrome but works in Firefox). Since the mathematical principles behind CSS3 and Raphael matrix transforms are essentially the same, you can use this tool to generate a set of matrix transform numbers then apply them in Raphael and it should be more or less the same result.

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

Super-quick overview of what Matrix transforms are all about:

Matrix快速转换的全面概述：

• It's a set of 6 numbers that are used to calculate where each corner of the bounding box of a Raphael shape will be after the transformation has completed. Between them, these 6 numbers can create pretty much any scale, transform, rotate and shear effects.
• 它是一组6个数字，用于计算转换完成后Raphael形状边界框的每个角落。在它们之间，这6个数字可以创建几乎任何比例，变换，旋转和剪切效果。
• It's the behind-the-scenes engine for Raphael transforms: Raphael translates transforms into matrix co-ordinates. Matrix co-ordinates can get seriously mind-boggling: unless you're doing something extremely complex, it's usually best to just let it do it's thing under the hood.
• 这是Raphael变换的幕后引擎：Raphael将变换转换为矩阵坐标。矩阵坐标可能会令人难以置信：除非你做的事情非常复杂，否则通常最好让它在幕后做事。
• Here's an XKCD joke illustrating the mathematical relationship between the 6 numbers behind matrix transformations. You'll either find this funny, or, it'll convince you that it's best to just let Raphael do the maths itself under the hood.. .
• 这是一个XKCD笑话，说明了矩阵变换背后的6个数字之间的数学关系。你会发现这很有趣，或者说，它会让你相信最好让拉斐尔自己动手做数学......

• To look at an element's current matrix state:
  • To look at the element's matrix object directly: someElement.matrix is an object with each number given by letter (e.g. {a:1,b:0,c:0,d:1,e:0,f:0}. Setting these directly doesn't change the object (so you can't do someElement.matrix.b = 3;)
  • 直接查看元素的矩阵对象：someElement.matrix是一个对象，每个数字由字母给出（例如{a：1，b：0，c：0，d：1，e：0，f：0}。这些直接不会改变对象（所以你不能做someElement.matrix.b = 3;）
  • You can reverse-translate the current matrix into a more human-readable object containing transformation attributes using someElement.matrix.split()
  • 您可以使用someElement.matrix.split（）将当前矩阵反向转换为包含转换属性的更易读的对象
  • You can also reverse-translate the matrix into a transform string with someElement.matrix.toTransformString();
  • 您还可以使用someElement.matrix.toTransformString（）将矩阵反转换为变换字符串;
• 查看元素的当前矩阵状态：直接查看元素的矩阵对象：someElement.matrix是一个对象，每个数字都由字母给出（例如{a：1，b：0，c：0，d：1，e ：0，f：0}。直接设置这些不会改变对象（所以你不能做someElement.matrix.b = 3;）你可以将当前矩阵反向转换为一个包含转换的人类可读的对象使用someElement.matrix.split（）的属性您也可以使用someElement.matrix.toTransformString（）将矩阵反转换为变换字符串;
• If you need to set a matrix manually, you can do it one of these ways. All of these replace or animate from the previous transform:
  • Animated (using array): someElement.animate({transform: ['m',0.5, -0.5, 0.5, 0.5, -0.5, 0.5]}, 1000);
  • 动画（使用数组）：someElement.animate（{transform：['m'，0.5，-0.5,0.5,0.5，-0.5,0.5]}，1000）;
  • Instant (using array): someElement.transform(['m',0.5, -0.5, 0.5, 0.5, -0.5, 0.5]);
  • 瞬间（使用数组）：someElement.transform（['m'，0.5，-0.5,0.5,0.5，-0.5,0.5]）;
  • Animated (using string): someElement.animate({transform: 'm0.5 -0.5 0.5 0.5 -0.5 0.5'}, 1000);
  • 动画（使用字符串）：someElement.animate（{transform：'m0.5 -0.5 0.5 0.5 -0.5 0.5'}，1000）;
  • Instant (using string): someElement.transform('m0.5 -0.5 0.5 0.5 -0.5 0.5');
  • 瞬间（使用字符串）：someElement.transform（'m0.5 -0.5 0.5 0.5 -0.5 0.5'）;
• 如果需要手动设置矩阵，可以采用以下方法之一。所有这些都替换或动画来自前一个变换：动画（使用数组）：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'）;
• This is default matrix string: 1 0 0 1 0 0. Applying this resets a transform to its default state.
• 这是默认矩阵字符串：1 0 0 1 0 0.应用此选项可将变换重置为其默认状态。
• What each matrix number means is very difficult to characterize. In isolation, a works like x-scale, b like y-shear, c like x-shear, d like y-scale, and e and f like x and y move. But they interact in mathematically complex ways. It's not simple.
• 每个矩阵数的含义很难刻画。孤立地，像x-scale，b像y-shear，c像x-shear，d像y-scale，e和f像x和y移动。但它们以数学上复杂的方式相互作用。这并不简单。

#2

Don't know Raphaël but looking at the docs and knowing other drawing APIs, I'll make a semi-educated guess.

不知道Raphaël，但看着文档和了解其他绘图API，我会做一个半教育的猜测。

In graphics (Raphaël and anywhere else) matrices are used to transform (move, rotate, etc) the artwork. You'll find a similar API for the HTML5 canvas element itself.

在图形（Raphaël和其他任何地方）中，矩阵用于转换（移动，旋转等）图稿。您将找到HTML5 canvas元素本身的类似API。

When you use the Element.transform method to move and rotate the drawing surface. Like moving a piece of paper under your pen before you start drawing again. Internally, such transformations are done using a transformation matrix. It's a very useful, if a little cryptic at first, feature. In fact, it's how 3D graphics work, too.

使用Element.transform方法移动和旋转绘图表面时。就像在你开始画画之前在你的笔下移动一张纸一样。在内部，这种变换是使用变换矩阵完成的。这是一个非常有用的，如果有点神秘，最初的功能。事实上，它也是3D图形的工作方式。

Furthermore, matrices can be added onto each other, so you can have one matrix that translates horizontally, one that translates vertically, and one that rotates (and so on and so on), and add them together to get the combined effects.

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

Again, I'm extrapolating here; I don't know Raphaël. But that's the basic use of matrices in graphics.

再说一遍，我在这里推断;我不知道Raphaël。但这是图形中矩阵的基本用法。

#3

Also in addition to the above, Raphael was once confined to only rotate scale translate but with the authors exposure of Matrix into the syntax any transform is possible for 2d graphics

除了上述内容之外，拉斐尔曾被限制为只旋转比例翻译，但作者将Matrix曝光到语法中，任何变换都可能用于2D图形

Go to http://www.irunmywebsite.com/raphael/additionalhelp.php for interactive examples You can filter by selecting 'matrix' in the drop down and working through those examples. You can also search by Matrix to get a different subset of examples.

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

For example there is a type of transform called 'skew' If you search for this on the page you will see another example showing this.

例如，有一种称为“倾斜”的变换如果您在页面上搜索此变换，您将看到另一个显示此变量的示例。

Don't be shy of Matrix, it's an interesting subject

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

On iPod so could not hyperlink

在iPod上无法超链接