Canvas에서 움직이는 객체 회전

Question

회전 속성을 기반으로 객체를 그리려고하는데 객체가 움직일 때 혼란스러워합니다.

ctx.save(); 
    ctx.translate(this.width * 0.5, this.height*0.5); 
    ctx.rotate(DegToRad(45)); 
    ctx.translate(-this.width*0.5,-this.height*0.5); 
    ctx.drawImage(this.img, this.spriteOffset, 0, this.width, this.height, this.x, this.y,this.width,this.height); 
    ctx.restore(); 

이미지는 45도 회전되지만 이미지가 아래쪽으로 만 이동해야하는 경우 왼쪽 아래 방향으로 이동합니다. 이동 코드는 this.y 위치를 증가시킴으로써 간단히 처리됩니다. 이 작업을 수행하는 간단한 방법이 있습니까?

Answer 1

전체 캔버스가 회전되기 때문입니다.

시도해 볼 수있는 것은 Kinetic JS과 같은 프레임 워크로, 캔버스 용 SVG API를 만드는 것입니다.

This site에는 rotation, 전환, 변환 및 기타 작업에 필요한 많은 정보가 포함되어 있습니다.

이것은 사용자의 요구에 부합해야합니다.

---

낮은 수준의 프레임 워크없는 옵션을 제공해야한다고 생각합니다. 기본적으로 원시 자바 스크립트와 HTML을 사용하여이 작업을 수행합니다.

이제 질문을 이해하면서 개체를 만들려고합니다 (검은 색 사각형으로 가정). 아래로 움직여 회전합니다. 경로 지옥으로 이동하지 않고 캔버스에서 회전시킬 수있는 유일한 방법은 전체 렌더링 컨텍스트를 회전하는 것입니다. 그러나 이미지를 캔버스에 가져올 수도 있습니다 (예 : 투명한 검은 색 다이아몬드 (즉, 동일한 사각형을 회전). 따라서 별도의 캔버스를 사용하여 회전의 ​​각 단계를 사각형에 렌더링 할 수 있습니다.

이 같은

기본적으로 뭔가 :

var canvas2 = document.createElement('canvas'), ctx2 = canvas2.getContext('2d'); 
//do something with the second canvas 
//let's assume the second canvas is the same size as the square 
ctx.drawImage(canvas2, squareX, squareY); 

당신이 볼 수 있듯이

See my attempt

, 그것은 조금 남았습니다이지만, 본질적 질문을 묻는 일을 수행; 사각형을 아래로 움직이고 회전시킵니다. 또한 실제 캔버스 아래 회전의 결과를 플로팅하여 후드 아래에있는 모습을 볼 수 있지만 정사각형은 "센터"가 정사각형의 왼쪽 상단에 있고 중간에 있지 않기 때문에 잘라냅니다.

결국, 정말 내려 오는 방법은 으로하고 싶습니다.

Answer 2

회전을 적용하기 전에 ctx.translate를 사용하여 객체의 위치를 ​​설정하십시오. 이렇게하면 문제가 해결됩니다.

ctx.save(); 
ctx.translate(this.x, this.y); 

ctx.translate(this.width * 0.5, this.height*0.5); 
ctx.rotate(DegToRad(45)); 
ctx.translate(-this.width*0.5,-this.height*0.5); 

ctx.drawImage(this.img, this.spriteOffset, 0, this.width, this.height, 0, 0,this.width,this.height); 
ctx.restore();