画布，多个矩形，旋转

Question

我有一个CanVas，其中我添加了Sevral Rectangles.I可以在一个现在被选中的矩形中添加文本。我还在选定的矩形中实现了Sevral其他功能，如拖动它们，调整它们。但现在我的任务是旋转现在被选中的矩形。任何一个建议如何做到这一点，以便我的调整功能也可以同时使用旋转。我想用JavaScript做。

Answer 1

将您的矩形定义保存在javascript对象＆amp;把rect-objects放在一个数组中：

var rects=[];
rects.push({
    x:50,y:50,
    w:50,h:35,
    color:'green',
    angle:0,deltaAngle:(Math.PI*2)/60,
    scale:100,scaleDirection:1}
);
rects.push({
    x:150,y:50,
    w:50,h:35,
    color:'blue',
    angle:0,deltaAngle:(Math.PI*2)/60,
    scale:100,scaleDirection:1}
);

然后你可以在for-next循环中用你的变换（移动，旋转，缩放）绘制矩形：

迭代数组并绘制每个矩形：for( var i=0; i<rects.length; i++)

• 保存未转换的上下文状态。
• 翻译到矩形的中心。 [0,0]原点现在位于矩形的中心点。
• 缩放到指定的比例因子。
• 将旋转到指定的角度。
• 绘制矩形。由于原点位于矩形中心，因此将绘图偏移-width / 2，-height / 2.
• 将上下文恢复到其未转换状态。

结果的插图：

[添加：获取鼠标角度]

你可以得到鼠标的角度与任何矩形的中心点，如下所示：

var dx=mouseX-centerX;
var dy=mouseY-centerY;
var radianAngle=Math.atan2(dy,dx);