HTML5 Canvas:旋转时计算 x,y 点 [英] HTML5 Canvas: Calculating a x,y point when rotated

问题描述

我正在开发一个 HTML5 Canvas 应用程序，它涉及读取一个 xml 文件，该文件描述了我需要在画布上绘制的箭头、矩形和其他形状的位置.

XML 布局示例:

 不要忘记，不同编程语言中的大多数三角函数主要处理弧度..
pps:我希望我没有吓到你 - 如果你有任何问题，请询问.
I developing a HTML5 Canvas App and it involves reading a xml file that describes the position of arrows, rectanges and other shapes I need to to draw on the canvas.

Example of the XML layout:
<arrow left="10" top="20" width="100" height="200" rotation="-40" background-color="red"/> 
<rect left="10" top="20" width="100" height="200" rotation="300" background-color="red"/> 
If the object is rotated it involves calculating the position of a point(called P the new position of the object after rotation) when rotated around another point(left,top). I am attempting to come up with a general function/formula I can use to calculate this point P but my Maths is a little weak & I cannot identify what arc/tangent formula I am meant to use.

Can you assist me to come up with a formula I can use to calculate point P for rotations that can be both positive & negative?

  

In the above example: point(14,446) is the left,top point & point(226,496) is the mid point of the object when NOT rotated so the point=(left+width/2,top+height/2) and the blue dot is the mid point when rotated. I know how to calulate the length of the line between points (14,446) & (226,496) but not how to calculate the blue point x,y position - BTW: the length of this line is the same as the line between the blue point & (14,446)
len = sqrt( (496-446)^2 + (226-14)^2 );
    = 227.56;

解决方案
It is quite simple. In rotation around the origin of the coordinate system for angle Theta coordinates (x,y) are changing as 
x' = x * cos(Theta) - y * sin(Theta);
y' = x * sin(Theta) + y * cos(Theta); 
So, all that you need is to translate point of rotation to one of the points that you have. Lets write it in a more simplified way: (x1,y1) = (14,446) and (x2,y2) = (226,496). You are trying to "rotate" (x2,y2) around (x1,y1). Calculate (dx2,dy2) in a new coordinate system with the origin at (x1,y1).
(dx2,dy2) = (x2-x1,y2-y1);
Now rotate (positive angles are counterclockwise):
dx2' = dx2 * cos(165 Degrees) - dy2 * sin(165 Degrees);
dy2' = dx2 * sin(165 Degrees) + dy2 * cos(165 Degrees);
The last step is to translate coordinates of the point from the origin at (x1,y1) back to the original (0,0);
x2' = dx2' + x1;
y2' = dy2' + y1;
ps: read also this :) http://en.wikipedia.org/wiki/Rotation_matrix and do not forget that most trigonometric functions in different programming languages deal mostly with radians..

pps: and I hope that I did not scared you - ask if you have any questions.

                        
这篇关于HTML5 Canvas:旋转时计算 x,y 点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！