画布上的角度位移

Question

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

当我旋转方块时，我的旋转功能将其旋转得很好，但是，在旋转方块后，让我们说10度，原点应相应地移动到旋转。现在，我不知道我必须申请的公式才能使其附加！

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

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

和

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

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

Answer 1

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

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

Answer 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的小演示。