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