What is a "matrix" for in raphael

Question

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?

Answer 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.

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:

• 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.
• 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.
• 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.. .

• 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;)
  • You can reverse-translate the current matrix into a more human-readable object containing transformation attributes using someElement.matrix.split()
  • You can also reverse-translate the matrix into a transform string with 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);
  • Instant (using array): 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);
  • Instant (using string): 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.
• 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.

Answer 2

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.