Question

我试图以不同的角度绘制矩形，最初我知道矩形位置数据为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();

所以它结束了旋转宽度和高度，这对于单线是好的，但是对高度宽度的完全旋转感兴趣，就像它将成为新的高度和旧的高度将成为新的宽度。所以任何想法如何做到

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

Answer 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/

JS用于旋转矩形的阈值宽度和高度

1 个答案: