캔버스에서 이미지 회전 및 드래그 가능 유지

Question

캔버스에 그린 그림이 있습니다. 마우스를 클릭하고 드래그하면 마우스 좌표가 표시되고이를 사용하여 이미지의 위치 X와 Y를 설정합니다. 그 작업이 끝나면 캔버스를 다시 그립니다. 그건 매력처럼 작동하고 캔버스 위에 이미지를 옮길 수 있습니다.

하지만 이제 이미지를 좌우로 돌릴 수 있도록 2 개의 버튼을 만듭니다. 이미지를 회전하면 회전 한 각도에 상대적으로 움직입니다. 그래서 이미지를 180도 회전시키고 이미지를 끌어 올리면 내려갑니다! 왜 이런 일이 일어나는지, 어떻게 보상 할 수 있는지 모르겠습니다. :(

이 잘 나는 내가 그렇게 here is a demo of the problem.

Answer 1

나는 데모 URL을 액세스 할 수 없습니다 당신은 제공했으나 이것은 보편적이어야합니다.

좌표 공간의 밑으로 객체를 이동해야합니다 o:(0,0), 회전을 수행 한 다음 개체를 이동하기 전에 개체를 다시 이동하십시오. 모든 변환이 단일 변환 행렬에 결합되므로 변환 순서가 매우 중요하므로 기본적으로 변환 만 수행하면됩니다

ctx.translate(objects_x_position, objects_y_position); 
ctx.rotate(angle); 
ctx.translate(-objects_x_position, -objects_y_position); 

그리고 짜잔을 : 반비례, 즉 다음 좌표 공간 기지로 이동 한 다음 회전하고, 초기 위치로 다시 객체를 이동합니다. 다음은 데모입니다 : http://jsfiddle.net/ArtBIT/CdbWx/1

Answer 2

는 시도가

 
oContext.translate(oImage.size.x /2 ,oImage.size.y/2); 
oContext.rotate(oImage.rotate * Math.PI/180); 

첫번째 회전이 두 줄을 바꿔 다음 번역 막연한 조금있을 수 있습니다 이해합니다.

Answer 3

ArtBIT의 대답은 비슷하지만, 당신이 중심에서 회전하고자 고려하는 것은, 내가 코드를 사용합니다 : 작동하지 않습니다 :(해야 번역

ctx.translate(width/2, height/2); 
ctx.translate(objects_x_position, objects_y_position); 
ctx.rotate(angle); 
ctx.translate(-objects_x_position, -objects_y_position); 
ctx.translate((width/-2), height/-2);