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