旋转点由其形式斧使自己移动到左上方

Rotating point by its form axe makes itself move to the left-top

本文关键字：自己 移动 左上方 旋转      更新时间：2023-09-26

首先，我需要旋转一行关于它自己的斧头在HTML5画布中呈现。
我实际上并没有旋转一条线，但是我在渲染它之前旋转了它的点坐标。

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

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

注:form实际上是我的接口生成的路径，它包含了旋转角度等。

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

  • x - x色。
  • y - y颜色。
  • c -角余弦(Math.cos(angle))。
  • s -角正弦(Math.sin(angle))。
  • Bx - x色。
  • 按y键。
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));
}

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

小提琴

我的线应该在它的特定位置。我做错了什么?由于

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

  1. 移动所有的空间，使新的原点是围绕
    2. 发生旋转的点
  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'''的值，您必须替换3中的1和2

1 in 2:

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

2 in 3:

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/

相关文章：