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.
can anyone explain to me what matrix is for and how it is used?
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.
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.
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.
Super-quick overview of what Matrix transforms are all about:
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.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
. Applying this resets a transform to its default state.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.Don't know Raphaël but looking at the docs and knowing other drawing APIs, I'll make a semi-educated guess.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With