회전 후 캔버스 변환을 왼쪽 위 모서리로 설정하는 방법

Question

단순한 선으로 기호를 그렸지만 사용자가 회전을 지정할 수있게하려는 경우 (90도). 내 캔버스의 크기가 변경된다는 것을 의미합니다.

아니요 크기를 계산하고 캔버스 크기를 설정합니다. 그런 다음 회전의 중심을 내 캔버스의 중심으로 설정하고 (ctx.translate 경유) 임의의 각도로 회전합니다.

내 문제는 다음과 같습니다. 번역을 왼쪽 위 모서리로 다시 설정하여 해당 위치에서 심볼을 정상적으로 그릴 수 있습니까? 회전을 사용하여 값을 실제로 계산해야합니까?

감사합니다.

Answer 1

큰 질문입니다! translaterotate 및 scale은 모두 현재 매트릭스에서 작동하는 함수입니다. 이것은 당신에게 많은 옵션을 제공합니다. 아마 가장 간단한 일은 컨텍스트 매트릭스 이제 행렬이되기 전에 얼마나로 복귀, 복원 호출 한 후

ctx.save(); 
ctx.translate (to the center); 
ctx.rotate (do rotation); 
//Draw rotated stuff 
ctx.restore(); 
//Draw non-rotated stuff 

에 복원 저장하는 것입니다 마지막으로 저장 - OpenGL을, 이것은 당신이 실제로 스택이며, 많은 컨텍스트를 밀어 넣을 수 있지만 webgl이 지원하는지 확실하지 않습니다.

이 링크는 또한 도움이 될 수있다 :이 도움이 https://developer.mozilla.org/en/drawing_graphics_with_canvas

희망.

업데이트 :

예. 좋아, 그래서 너는 뭔가를 오해하고있다. 번역 및 회전은 전에 도면에 적용됩니다. 이것은 복잡한 수학이 많기 때문에 실제로이 질문의 범위를 벗어납니다. 따라서 캔버스 부분을 한 방향으로 회전하고 다른 부분을 다른 방향으로 회전하려면 먼저 save을 입력 한 다음 변환을 적용하고 그림의 첫 번째 부분을 수행 한 다음 restore으로 돌아가서 변환 된 상태. 어느 시점에서, 당신은 반복 할 수 있습니다. 따라서 예를 들어, 당신은이 작업을 수행 할 수 있습니다

ctx.save(); 
ctx.translate (x_center, y_center); 
ctx.rotate (90); 
//Draw your rotated stuff starting at the center 
ctx.translate (-x_center, -y_center); 
//Draw your main frame stuff that is all rotated around the center 
ctx.restore(); 
ctx.save(); 
ctx.rotate (90); 
//Draw your text which is rotated around the top-left corner 
ctx.restore(); 

을 이러한 방법으로, 당신은 1 개 그리기 기능을 가지고 있고, 당신은 단순히 설치 컨텍스트는 다른 구성 요소를 그리기 전에.