绘制一个旋转的矩形答案

【问题标题】：Drawing a Rotated Rectangle绘制一个旋转的矩形
【发布时间】：2009-03-13 20:02:02
【问题描述】：

我意识到这可能更像是一个数学问题。

要为我的矩形画线，我需要求解它们的角。我在 (x,y) 有一个矩形中心，具有定义的宽度和高度。

在顶部未旋转的矩形上查找蓝点（角度 = 0）这是

UL = (x-Width/2),(y+height/2)
UR = (x+Width/2),(y+height/2)
LR = (x+Width/2),(y-height/2)
LL = (x-Width/2),(y-height/2)

如果角度不为0，如何找到点？

提前致谢。

更新：虽然我的图片中有 (0,0) 作为中心点，但中心点很可能不在那个位置。

【问题讨论】：

Angle为0时连角点都没有定义正确，请参考我的解决方案

标签： math graphics

【解决方案1】：

先将中心点变换为0,0

X' = X-x

Y' = Y-y

然后旋转A角

X'' = (X-x) * cos A - (Y-y) * sin A

Y'' = (Y-y) * cos A + (X-x) * sin A

再次将中心点转换回 x,y

X''' = (X-x) * cos A - (Y-y) * sin A + x

Y''' = (Y-y) * cos A + (X-x) * sin A + y

因此使用以下变换计算 (X,Y) 的所有 4 个点

X''' = (X-x) * cos A - (Y-y) * sin A + x

Y''' = (Y-y) * cos A + (X-x) * sin A + y

其中 x,y 是矩形的中心点，X,Y 是角点正如我在 cmets 中给出的那样，当 Angle 为 0 时，您甚至没有正确定义角点。

替换后会得到

UL  =  x + ( Width / 2 ) * cos A - ( Height / 2 ) * sin A ,  y + ( Height / 2 ) * cos A  + ( Width / 2 ) * sin A
UR  =  x - ( Width / 2 ) * cos A - ( Height / 2 ) * sin A ,  y + ( Height / 2 ) * cos A  - ( Width / 2 ) * sin A
BL =   x + ( Width / 2 ) * cos A + ( Height / 2 ) * sin A ,  y - ( Height / 2 ) * cos A  + ( Width / 2 ) * sin A
BR  =  x - ( Width / 2 ) * cos A + ( Height / 2 ) * sin A ,  y - ( Height / 2 ) * cos A  - ( Width / 2 ) * sin A

我认为这适合您的解决方案。

【讨论】：

嗨@lakshmanaraj，你能告诉我什么是X值和x值
问题是这样我们得到了一个拉长的矩形...如何保持大小不变？

【解决方案2】：

如果'theta'是逆时针旋转角度，那么旋转矩阵是：

| cos(theta)  -sin(theta) |
| sin(theta)   cos(theta) |

即

x' = x.cos(theta) - y.sin(theta)
y' = x.sin(theta) + y.cos(theta)

如果旋转点不在原点，请从原始坐标中减去旋转中心，执行如上所示的旋转，然后重新添加旋转中心。

http://en.wikipedia.org/wiki/Transformation_matrix 有其他转换的示例

【讨论】：

【解决方案3】：

Rotation matrix （这将成为一个常见问题解答）

【讨论】：

【解决方案4】：

见2D Rotation。

q = initial angle, f = angle of rotation.

x = r cos q 
y = r sin q

x' = r cos ( q + f ) = r cos q cos f - r sin q sin f 
y' = r sin ( q + w ) = r sin q cos f + r cos q sin f

hence:
x' = x cos f - y sin f
y' = y cos f + x sin f

【讨论】：

【解决方案5】：

最简单的方法之一是在旋转之前获取点的位置，然后应用坐标变换。由于它以 (0,0) 为中心，这只是一个使用的例子：

x' = x cos(theta) - y sin(theta)

y' = y cos(theta) + x sin(theta)

【讨论】：

【解决方案6】：

用这个....我成功了...

 ctx.moveTo(defaults.x1, defaults.y1);

    // Rotation formula
    var x2 = (defaults.x1) + defaults.lineWidth * Math.cos(defaults.rotation * (Math.PI / 180));
    var y2 = (defaults.y1) + defaults.lineWidth * Math.sin(defaults.rotation * (Math.PI / 180));

    ctx.lineTo(x2, y2);

    x2 = (x2) + defaults.lineHeight * Math.cos((defaults.rotation + 90) * (Math.PI / 180));
    y2 = (y2) + defaults.lineHeight * Math.sin((defaults.rotation + 90) * (Math.PI / 180));
    ctx.lineTo(x2, y2);

    x2 = (x2) + defaults.lineWidth * Math.cos((defaults.rotation + 180) * (Math.PI / 180));
    y2 = (y2) + defaults.lineWidth * Math.sin((defaults.rotation + 180) * (Math.PI / 180));
    ctx.lineTo(x2, y2);

    x2 = (x2) + defaults.lineHeight * Math.cos((defaults.rotation + 270) * (Math.PI / 180));
    y2 = (y2) + defaults.lineHeight * Math.sin((defaults.rotation + 270) * (Math.PI / 180));

【讨论】：