JS计算旋转矩形的宽度和高度答案

【问题标题】：JS calculting width and height for rotated rectangleJS计算旋转矩形的宽度和高度
【发布时间】：2018-04-04 06:03:19
【问题描述】：

我试图以不同的角度绘制矩形，最初我知道矩形位置数据为 0 度，然后有时我得到的角度大于 0，所以我必须在该角度上绘制，然后我必须旋转点。所以目前我可以旋转点，但不知道旋转后计算宽度和高度。

我正在这样做......

// Main rotation function
     function rotate(originX, originY,pointX, pointY, angle) {
        angle = angle * Math.PI / 180.0;
        return {
            x: Math.cos(angle) * (pointX-originX) - Math.sin(angle) * (pointY-originY) + originX,
            y: Math.sin(angle) * (pointX-originX) + Math.cos(angle) * (pointY-originY) + originY
        };
    }

   // initial Rectangle 
   ctx.fillStyle = "red";
   var x = 200
   var y = 200
   var w = 80
   var h = 20
   var angle = 90 ;
   ctx.fillRect(x, y, w, h);

   // Calculate Center
   var cx = (x + (w/2));
   var cy = (y + (h/2));

    // highlight Center
    ctx.fillStyle = "black";
    ctx.fillRect(cx,cy, 5, 5);

    // Rotate starting x y at angle xxx
   var r =  rotate(cx,cy,x,y, angle - h );

    // highlight roate points
    ctx.fillStyle = "yellow";
    ctx.fillRect(r.x, r.y, 5, 5);


    // rotate Width and Height
   var r2 =  rotate(cx,cy,x+w,y+h,  angle - h ); 

      // highlight roate points
    ctx.fillStyle = "green";
    ctx.fillRect(r2.x, r2.y, 5, 5);

    ctx.save();

所以它结束了我旋转的宽度和高度，这对于单行来说是可以的，但我对高度宽度的完全旋转感兴趣，就像它 90 角旧的将变成新的高度，旧的高度将变成新的宽度。所以知道怎么做

小提琴：https://jsfiddle.net/047txgox/

【问题讨论】：

这很不清楚你在追求什么。你想计算你的矩形的边界矩形吗？
@Kaiido 正在尝试旋转矩形，但无法在旋转后重新计算其新的宽度和高度，例如，如果我们有一些宽度为 10 且高度为 5 的矩形，它是 0 度，如果我们将它旋转 90 度，那么它宽度将变为 5，高度将变为 10，在小提琴中你可以看到我有旋转的点，但无法设置正确的宽度和高度
不确定我是否真的可以发布答案，但你的意思是你想要something like that？
你需要重置你的转换矩阵。这可以通过在函数开头添加 ctx.setTransform(1,0,0,1,0,0) 来完成。 jsfiddle.net/7rwn83ss/5
你正在做的translate(-cx,-cx) 应该是(-cx,-cy) 顺便说一句，你的答案中有同样的错字。

标签： javascript canvas

【解决方案1】：

已解决，希望对大家有所帮助

   var x = 40
   var y = 80
   var w = 80
   var h = 20
   var angle = 120 ;

   // Calculate Center
   var cx = (x + (w/2));
   var cy = (y + (h/2));

context.setTransform(1,0,0,1,0,0)    
context.translate(cx, cy);
context.rotate(angle*Math.PI/180);
context.translate(-cx, -cy);
context.rect(x, y, w, h);
context.fillStyle = "#FF00FF";
context.fill();

// highlight Center
context.fillStyle = "black";
context.fillRect(cx,cy, 5, 5);  
context.save();

小提琴：http://jsfiddle.net/vorjcbz7/

【讨论】：