StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The transformation matrix gets multiplied by each point before it's drawn on the canvas. Like @Eric said, it's an <a href="http://en.wikipedia.org/wiki/Transformation_matrix#Affine_transformations" rel="noreferrer">affine transformation matrix</a> from linear algebra. In your example, it would work like this:</p> <pre><code>[ x'] [ 1 0 -551.23701 ] [ x ] [ x - 551.23701 ] [ y'] = [ 0 1 -368.42499 ] [ y ] = [ y - 368.42499 ] [ 1 ] [ 0 0 1 ] [ 1 ] [ 1 ] </code></pre> <p>So it shifts the x and y coordinates by -551.23... and -368.42... respectively.</p> <p>Other types of transformations involve different "slots" in the matrix. For example, here's the matrix that scales the drawing by <code>sx</code> and <code>sy</code> (x and y scaling factors):</p> <pre><code>[ sx 0 0 ] [ 0 sy 0 ] [ 0 0 1 ] </code></pre> <p>and rotation (angle is in radians):</p> <pre><code>[ cos(angle) -sin(angle) 0 ] [ sin(angle) cos(angle) 0 ] [ 0 0 1 ] </code></pre> <p>The advantage of using a transformation matrix over calling individual methods, like <code>translate</code>, <code>scale</code>, and <code>rotate</code>, is that you can perform all the transformations in one step. It gets complicated though when you start combining them in non-trivial ways because you need to multiply the matrices together to get the final result (this is what functions like <code>scale</code>, etc. are doing for you). It's almost always easier to call each function instead of calculating it yourself.</p> <p>The links @Eric mentioned and the <a href="http://en.wikipedia.org/wiki/Transformation_matrix" rel="noreferrer">transformation matrix article on Wikipedia</a> go into a lot more detail about how it all works.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload