javascript - Html5 Canvas Transformation Algorithm - Finding object coordinates after applying transformation - Stack Overflow

admin管理员组

文章数量:1300018

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 puter graphics; please help me solve this problem.

Thanks in advance.

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 puter graphics; please help me solve this problem.

Thanks in advance.

• javascript
• math
• graphics
• html5-canvas
• coordinate-transformation

Share Improve this question Follow edited Aug 6, 2016 at 13:50 DaBler 2,85233 gold badges3030 silver badges5151 bronze badges asked Jun 5, 2012 at 5:52 Software EnthusiasticSoftware Enthusiastic 26.5k1717 gold badges6060 silver badges6868 bronze badges 2

• Duplicate: stackoverflow./questions/3630594/… – Markus Jarderot Commented Jun 5, 2012 at 6:10
• No this is not duplicate, it is similar to this question (stackoverflow./questions/8844525/…) but not same . I am looking for similar answer for my queries. But thanks your reference link also helped... – Software Enthusiastic Commented Jun 5, 2012 at 9:27

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 11

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.

Tom Larkworthy's answer is perfect, but with a minor typo. Correct formula to invert the matrix is:

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

I was finding myself doing similar searches. Here is the function I wrote to project screen space coordinates to canvas coordinates:

function translateCoordinates(e)
{
    var canvas = document.getElementById('canvas');
    const transform = window.getComputedStyle(canvas).transform;
    const matrix = new DOMMatrixReadOnly(transform);
    const invertedMatrix = matrix.inverse();

    const rect = canvas.getBoundingClientRect();
    const mouseX = e.clientX - rect.left;
    const mouseY = e.clientY - rect.top;

    const transformedPoint = invertedMatrix.transformPoint({ x: mouseX, y: mouseY });
    const adjustedX = transformedPoint.x;
    const adjustedY = transformedPoint.y;

    return [adjustedX, adjustedY];
}

本文标签：