Re: JSUI-MGraphics patch-a-day


Forums > Javascript > JSUI-MGraphics patch-a-day
November 19, 2011 | 1:58 am

Here is the patch for November 18, 2011:

Back to playing with transformative function – in this case the most arbitrary of all: the transform() function. The transform function takes six arguments, for which I’ve given the labels xx, xy, yx, yy, x0 and y0. (Note: These are taken from deep within the Max mgraphics code, but you’ll see how they relate to the real world in a second…)

All of the rotate(), translate() and scale() functions can be built into a single transformation using these size values. The xx and yy values control the x and y scaling. The xy and yx values are the basis of the rotate() function. The x0 and y0 values are offsets as provided by the translate() function. But you can see that presenting this information in a matrix format gives you the ability to play with arbitrary scaling and movement options that would be difficult to do with the normal functions.

It is also important to note the effect of a transform matrix on the lines that are drawn. If you change the line width to 10 or more inside the code, then do more extensive transforms, the line size is directly affected.

A great place to learn more about the transform function is to look at the Cairo tutorial about transforms, found at:

http://cairographics.org/tutorial/#L1transforms

Hopefully, this little tester can help you get on top of the transform function and the transformation matrix. Enjoy!