Software Enthusiastic - 6 months ago 35

Javascript Question

On html5 canvas I am drawing objects (rectangle, circle, etc...), these objects have transformation properties like scale, skew, rotation etc... These objects can be nested.

Problem occurs when I after applying transformations, I want to find exact x, y coordinate of given object, but its going over my head.

To all experts who is into interactive computer graphics; please help me solve this problem.

Thanks in advance.

Answer

All affine transformations in 2D can be expressed as a matrix of the form:

```
[ a c dx ]
T = [ b d dy ]
[ 0 0 1 ]
```

This could be expressed with the method `context.transform(a, b, c, d, dx, dy);`

.

When applied to some coordinate, `(x,y)`

, you first have to add a third coordinate, which is always `1`

: `<x, y, 1>`

. Then you can multiply the transformation matrix to get the result:

```
[ a*x + c*y + dx ]
[ b*x + d*y + dy ]
[ 1 ]
```

If you get anything other than '1' in the last coordinate, you have to divide the vector by it.

To go the other way, you have to invert the matrix:

```
[ d/M -c/M (c*dy - d*dx)/M ]
[ b/M a/M (b*dx - a*dy)/M ]
[ 0 0 1 ]
```

where `M`

is `(a*d - b*c)`

.

Multiple transformations could be applied in sequence, by multiplying their matrices. The order of the multiplications are important.

```
context.translate(dx,dy) <==> context.transform( 1, 0, 0, 1, dx, dy)
context.rotate(θ) <==> context.transform( c, s, -s, c, 0, 0)
context.scale(sx,sy) <==> context.transform(sx, 0, 0, sy, 0, 0)
```

where `c = Math.cos(θ)`

and `s = Math.sin(θ)`

If you got some coordinate `(x,y)`

in object-space, and you want to know where it will end up on the screen, you apply the transformation to it.

If you got some coordinate `(x,y)`

on the screen, and you want to know which point on the object that is, you multiply by the inverse of the transformation.