HTML5 Canvas：旋转时计算 ax,y 点

发布于 2024-12-29 14:28:00 字数 850 浏览 1 评论 0原文

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

XML 布局的示例：

<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"/>

如果对象被旋转，则涉及计算围绕另一个点（左、上）旋转时一个点的位置（称为 P，旋转后对象的新位置）。我正在尝试提出一个可以用来计算这一点 P 的通用函数/公式，但我的数学有点弱&我无法确定我应该使用什么弧/正切公式。

你能帮我想出一个公式来计算旋转的 P 点吗？负数？

在此处输入图像描述

在上面的示例中：点(14,446) 是左侧，顶部点 & ; point(226,496) 是未旋转时对象的中点，因此该点=(left+width/2,top+height/2)，蓝点是旋转时的中点。我知道如何计算点 (14,446) 和 (14,446) 之间的线的长度(226,496) 但不知道如何计算蓝点 x,y 位置 - 顺便说一句：这条线的长度与蓝点和蓝点之间的线相同(14,446)

len = sqrt( (496-446)^2 + (226-14)^2 );
    = 227.56;

原文

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?

enter image description here

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;

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

╭⌒浅淡时光〆 2025-01-05 14:28:00

这很简单。在围绕角度 Theta 坐标系原点旋转时，Theta 坐标 (x,y) 会发生变化，因此

x' = x * cos(Theta) - y * sin(Theta);
y' = x * sin(Theta) + y * cos(Theta);

，您所需要做的就是将旋转点转换为您拥有的点之一。让我们用更简单的方式来写：(x1,y1) = (14,446) 和 (x2,y2) = (226,496)。您正在尝试围绕 (x1,y1)“旋转”(x2,y2)。在原点位于 (x1,y1) 的新坐标系中计算 (dx2,dy2)。

(dx2,dy2) = (x2-x1,y2-y1);

现在旋转（正角度为逆时针）：

dx2' = dx2 * cos(165 Degrees) - dy2 * sin(165 Degrees);
dy2' = dx2 * sin(165 Degrees) + dy2 * cos(165 Degrees);

最后一步是将点的坐标从原点 (x1,y1) 平移回原来的 (0,0)；

x2' = dx2' + x1;
y2' = dy2' + y1;

ps：另请阅读此内容:) http://en.wikipedia.org/wiki/Rotation_matrix 和不要忘记，不同编程语言中的大多数三角函数主要处理弧度。pps

：我希望我没有吓到你 - 如果你有任何问题，请询问。

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.

回复收藏 0 原文

飘落散花 2025-01-05 14:28:00

我认为在您的情况下，您应该能够使用以下方程组计算此旋转位置：

x = R * Math.cos(angle - angle0);
y = R * Math.sin(angle - angle0);
angle  = deg * Math.PI / 180;
angle0 = Math.atan(y0/x0);

R 半径向量的长度（在您的示例中为len）。< br>
deg 您要旋转到的角度（以度为单位），ig 120°
x 和 y 是您要查找的最终位置的坐标。
angle 是实际旋转角度（以弧度为单位，而不是梯度）。
angle0 是相对于 X 轴旋转的初始角度点。我们需要使用 Math.atan 预先计算它。

尚未测试。所以尝试一下吧。但想法是一样的——利用三角函数。

I think in your case you should be able to calculate this rotation position with the following system of equations:

x = R * Math.cos(angle - angle0);
y = R * Math.sin(angle - angle0);
angle  = deg * Math.PI / 180;
angle0 = Math.atan(y0/x0);

R the length of yor radius vector (len in your example).
deg angle in degrees you are rotating to, i.g 120°
x and y the coordinates of the final position your are looking for.
angle is the actual rotation angle (in rad, not grads).
angle0 is the initial angle point was rotated to relativly to the X-axis. We need to precalculate it using Math.atan.

Haven't tested. So give it a try. But the idea is like that same - make use of trigonometric functions.

回复收藏 0 原文