javascript - 移动/旋转点的算法

Question

相对于 (0, 0) 将 (x, y) 坐标中的点移动/“旋转”x 度的算法是什么？例如，在下图中，我想将点 A 移动到 B，x 度；A 和 (0, 0) 之间的距离应该与 B 和 (0, 0) 之间的距离相同。

我需要在前端环境即 JavaScript 中做。

Answer 1

B.x = A.x * cos(x) - A.y * sin(x)
B.y = A.x * sin(x) + A.y * cos(x)

x假定为弧度，否则您必须转换。

Answer 2

为了帮助进行大量 Canvas（或只是 JavaScript）转换，我制作了一个小型 Transformation 类，它可以将任何类型的任意转换（旋转、缩放、平移）应用于给定点。

当您需要数学来模拟 Canvas 上的变换矩阵时，这非常有用。

https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js

要使用它旋转一个点，您可以：

var t = new Transform();
t.rotate(5); // some number of radians
t.transformPoint(ax, ay); // returns [bx, by]