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

问题描述

在html5画布上绘制对象（矩形，圆形等），这些对象具有像缩放，倾斜，旋转等转换属性...这些对象可以嵌套。

当我在应用转换后发生问题时，我想查找给定对象的确切x，y坐标，但它已经超出了我的头。

对所有交互式计算机图形学专家而言;请帮我解决这个问题。

在此先感谢。

解决方案

2D中的所有仿射变换都可以表示为以下形式的矩阵：

$ $ $ $ $ $ $ $ $ $ $ $ [bd dy]
[0 0 1]

这可以用方法 context.transform（a，b，c，d，dx，dy）; 。

，（x，y），你首先必须添加第三个坐标，它总是 1 ：< x，y，1> 。然后你可以乘以变换矩阵得到结果：

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

在最后一个坐标中获得'1'以外的任何东西，你必须将矢量除以它。

---

换句话说，你必须反转矩阵：

  [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）




通过乘以矩阵，可以按顺序应用多重转换。



---

  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），并且您想知道它的位置如果你有一些坐标（x，y）在屏幕上，并且您想知道对象上的哪个点，您乘以转换的逆。

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.

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