javascript - 通过其形式 ax 旋转点使其自身移动到左上角

Question

首先，我需要围绕它自己的轴旋转一条线，以便在 HTML5 Canvas 中呈现。
我实际上并不是在旋转一条线，而是在渲染它之前旋转它的点坐标。

我有特定的边界，它指的是将在路径中绘制的内容(例如，线)的总大小，它们用于构建点 B，这是路径的中心点。

form.bx = x + (w / 2);
form.by = y + (h / 2);

注意:form其实是我界面生成的路径，里面包含了旋转 Angular 等

这两个函数都会旋转一个点的坐标并返回它们。参数:

• x – x坐标。 A点的。
• y – y坐标。 A点的。
• c – Angular 余弦 (Math.cos(angle))。
• s – Angular 正弦 (Math.sin(angle))。
• Bx – x坐标。点 A 将围绕该点旋转。
• 来自 - y coor。点 A 将围绕该点旋转。

---

function rotatePointX(x, y, c, s, Bx, By) {
    return Math.round(((Bx - x) * c) - ((By - y) * s));
}

function rotatePointY(x, y, c, s, Bx, By) {
    return Math.round(((Bx - x) * s) + ((By - y) * c));
}

---

问题:旋转使我的线移动到 Canvas 的左上角。

Fiddle

我的线应该在它的特定位置。我究竟做错了什么？谢谢

Answer 1

旋转总是相对于原点发生的，如果你想相对于其他点旋转，你必须这样做

1. 移动你所有的空间，使新的​​原点成为旋转发生的点
2. 执行轮换
3. 将你所有的空间移回原来的位置

1)

x' = x - Bx
y' = y - By

2)

x'' = x' * cos(angle) - y' * sin(angle)
y'' = x' * sin(angle) + y' * cos(angle)

3)

x''' = x'' + Bx
y''' = y'' + By

要找到 x''', y''' 的值，您必须将 1 和 2 替换为 3

1 合 2:

x'' = (x - Bx) * cos(angle) - (y - By) * sin(angle)
y'' = (x - Bx) * sin(angle) + (y - By) * cos(angle)

二合三:

x''' = (x - Bx) * cos(angle) - (y - By) * sin(angle) + Bx
y''' = (x - Bx) * sin(angle) + (y - By) * cos(angle) + By

你可以通过像这样执行矩阵乘法转换来避免所有这些困惑

[x'''] = [1 0 Bx] [cos(angle) -sin(angle) 0] [1 0 -Bx] [x]
[y''']   [0 1 By] [sin(angle)  cos(angle) 0] [0 1 -By] [y]
[1   ]   [0 0  1] [         0           0 1] [0 0   1] [1]

额外的维度用于能够执行翻译，因为翻译是一种剪切映射

https://jsfiddle.net/hnv0dcs6/2/