Canvas: how to finish a translation, skew, rotate ... in only one transformation?

Question

I have been studying "transformation" in recent days, and now I know how to translate, rotate, skew, scale using matirx transform. but if I want to do all the actions above in a single conversion expression, how can I do this?

ctx.transform(a,b,c,d,e,f); 

when we want to rotate something by conversion, we must send 4 arguments for each of them (a, b, c, d). So, if I want to rotate and scale, for example, rotate 30 degrees and scale (1,5,2), can the conversion do them at the same time? so what are the values ​​(a, b, c, d)? and how to calculate them?

and one more question: is there an order in the conversion? I mean, if I use transform to rotate, scale, and translate, what is the order between them? in the end, the order is very important, "translate first, scale further", "begin first", "translate next", get different results.

Answer 1

This is the math performed by context.transform (a, b, c, d, e, f)

When you use one context.transform to perform several operations (translation + scaling + rotation)

• Translation is carried out first.
• Scaling and rotation are performed as follows (their order does not matter).

This is a math matrix in javascript form:

  // a=0, b=1, c=2, d=3, e=4, f=5 // declare an array that will hold our transform math // this is the identity matrix (where no transforms exist) var matrix=[1,0,0,1,0,0]; // for example, // rotate 30 degrees clockwise from 0 degrees // note: 0 degrees extends rightward horizontally from the origin rotate(30*Math.PI/180); // scale by 1.5 in X and 2.0 in Y scales scale(1.5,2,0); // plug our transform array into the context context.transform(matrix[0],matrix[1],matrix[2],matrix[3],matrix[4],matrix[5]); // do the translate to the array function translate(x,y){ matrix[4] += matrix[0] * x + matrix[2] * y; matrix[5] += matrix[1] * x + matrix[3] * y; } // do the scale to the array function scale(x,y){ matrix[0] *= x; matrix[1] *= x; matrix[2] *= y; matrix[3] *= y; } // do the rotate to the array function rotate(radians){ var cos = Math.cos(radians); var sin = Math.sin(radians); var m11 = matrix[0] * cos + matrix[2] * sin; var m12 = matrix[1] * cos + matrix[3] * sin; var m21 = -matrix[0] * sin + matrix[2] * cos; var m22 = -matrix[1] * sin + matrix[3] * cos; matrix[0] = m11; matrix[1] = m12; matrix[2] = m21; matrix[3] = m22; } 

Answer 2

There are all kinds of flexibility that may be what you are looking for. See for example:

CSS3 Multiple Transforms

How to apply several transformations in CSS?

then look here:

http://www.quora.com/Is-there-any-way-to-make-sequential-CSS-transition-without-JavaScript

Answer 3

Each transformation function is described mathematically using a 4 * 4 matrix. To perform more than 1 function, say, rotate and scale, you need to multiply the 4 * 4 matrices created for each of them,

For more information on the mathematical description of conversion functions, see http://www.w3.org/TR/css3-transforms/#Scale3dDefined >

For more information on applying multiple transforms, see Matrices, Vectors, and matrix3d ​​() at http://dev.opera.com/articles/view/understanding-3d-transforms/

There is an order for your transformations based on the order in which you give each function has no priority, say, the scale (10) translate (200) will differ from the scale ttranslate (200) (10), which is obvious as Matrix multiplication in the general case is not commutative AB ≠ BA