캔버스에서 캔버스의 중심점을 위치 설정으로 회전시킵니다.

Question

캔버스에서 중심점을 기준으로 회전 된 사각형을 그려야하지만 x 및 y으로 설정하고 싶습니다. 실제로 사각형을 $b.width/2 및 $b.height/2으로 옮깁니다. 어떻게해야할지 모르겠다.

이것은 내 클래스 코드입니다. 참고 : $b 내 rectange입니다.

do { 
    switch($b.t) { 
     case 0: { // draw rectangle 
      context.fillStyle = $b.tint; 
      if($b.rotate) { 
       context.save(); 
       context.translate($b.width, $b.height); 
       context.rotate(($b.rotate * Math.PI)/180); 
       context.fillRect(-$b.width/2, -$b.height/2, $b.width, $b.height); 
       context.restore(); 
      }else{ 
       context.fillRect($b.width/2, $b.height/2, $b.width, $b.height); 
      } 
      break; 
     } 
    } 
} while($b = queue[$i ++]); 

Answer 1

그래서 중심점을 중심으로 회전하는 사각형의 중심점을 설정 하시겠습니까?

그냥 초기 번역에 y를 원하는 X를 추가 :

참고 : 당신이 간단 않은 중첩 변환을 수행하고 있기 때문에, 역순으로 변환을 취소. Context save & restore은 작동하지만 다른 모든 컨텍스트 속성을 저장/복원하므로 효율성이 떨어집니다.

// translate (including the desired centerX & center) 
context.translate(x+b.width/2,y+b.height/2); 

// rotate 
context.rotate(($b.rotate * Math.PI)/180); 

// fill the rect offset by half its size 
context.fillRect(-$b.width/2, -$b.height/2, $b.width, $b.height); 

// unrotate 
context.rotate((-$b.rotate * Math.PI)/180); 

// untranslate 
context.translate(-x-b.width/2,-y-b.height/2);