Html5 Canvas 变换算法 - 应用变换后查找对象坐标 [英] Html5 Canvas Transformation Algorithm - Finding object coordinates after applying transformation

问题描述

在 html5 画布上，我正在绘制对象(矩形、圆形等...)，这些对象具有缩放、倾斜、旋转等变换属性...这些对象可以嵌套.

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.

问题发生在我应用转换后，我想找到给定对象的精确 x、y 坐标，但它超出了我的想象.

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.

提前致谢.

推荐答案

二维中的所有仿射变换都可以表示为如下形式的矩阵:

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

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

这可以用 context.transform(a, b, c, d, dx, dy); 方法表示；.

当应用于某个坐标时，(x,y)，你首先必须添加第三个坐标，它总是 1: <x,y, 1>.然后可以将变换矩阵相乘得到结果:

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        ]

如果在最后一个坐标中得到除 '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        ]

其中 M 是 (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)

其中 c = Math.cos(θ) 和 s = Math.sin(θ)

如果您在对象空间中获得了一些坐标 (x,y)，并且您想知道它将在屏幕上的哪个位置结束，您可以对其应用转换.

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.

如果您在屏幕上获得了某个坐标 (x,y)，并且您想知道对象上的哪个点，则乘以变换的倒数.

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.

这篇关于Html5 Canvas 变换算法 - 应用变换后查找对象坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！