画布上的角位移答案

【问题标题】：Angular displacement on canvas画布上的角位移
【发布时间】：2011-10-26 20:04:28
【问题描述】：

我有一个原点为 0,0（左上角）的正方形（100px x 100px）。当我移动鼠标时，假设 x 和 y 为 10 像素，我根据位移移动原点，然后原点变为 10,10，很简单。工作正常！

当我旋转正方形时，我的旋转函数可以很好地旋转它，但是在正方形旋转之后，比如说 10 度，原点应该随着旋转而移动。而现在，我不知道我必须应用什么公式才能让它追加！

我是维基百科，但我觉得它太复杂了。

http://en.wikipedia.org/wiki/Angular_displacement

和

http://en.wikipedia.org/wiki/Cosine#Sine.2C_cosine.2C_and_tangent

示例：向左旋转 90 度后，原点现在位于：左下角，现在当我将鼠标向右移动时，图片向上！！！！

【问题讨论】：

我觉得这个问题可能属于math.stackexchange.com
您是否要围绕正方形的中心旋转正方形？如果是这样，这个论坛帖子可能会有所帮助：gamedev.net/topic/…
您是否尝试反转变换以将旋转正方形上的鼠标位置转换为原始正方形上的对应点？ This question 可能是相关的。

标签： math formula

【解决方案1】：

如果我正确理解您的问题，您将根据鼠标位置对矩形点应用偏移量，然后围绕原点旋转生成的点。

相反，请尝试在旋转之后应用鼠标偏移，而不是之前。

【讨论】：

显而易见的答案，没有成功，但我已经非常努力地让它发挥作用......没有运气！

【解决方案2】：

假设你有一个图形，你想将它旋转角度alpha并平移它，使图形的点(cx, cy)在变换后到达点(sx, sy)。

变换是

transformed_x = x*cos(alpha) - y*sin(alpha) + offset_x
transformed_y = x*sin(alpha) + y*cos(alpha) + offset_y

要计算所需的 offset_x 和 offset_y 值，您只需将您对 (cx, cy) 和 (sx, sy) 的要求放入上述等式：

sx = cx*cos(alpha) - cy*sin(alpha) + offset_x
sy = cx*sin(alpha) + cy*cos(alpha) + offset_y

现在您可以轻松地从中提取偏移值：

offset_x = sx - cx*cos(alpha) + cy*sin(alpha)
offset_y = sy - cx*sin(alpha) - cy*cos(alpha)

要为其设置画布转换，您只需调用

context.translate(sx - cx*Math.cos(alpha) + cy*Math.sin(alpha),
                  sy - cx*Math.sin(alpha) - cy*Math.cos(alpha));
context.rotate(alpha);

你可以看一下这个公式following this link的小演示。

【讨论】：