캔버스 높이와 너비가 다른 경우의 회전 논리

Question

캔버스의 크기가 다른 경우 회전이 캔버스에 적용될 때 캔버스 XY 조합을 얻는 데 도움이 필요합니다.

Answer 1

귀하의 질문에 '수학'태그가 포함되어 있지만 코드가 없으므로 이야기의 수학적 해결책을 알려 드리겠습니다.

문제는 발견 한 것처럼

, 브라우저의 마우스 이벤트가 회전되지 않은 공간보다는 회전 캔버스 좌표는 clientX & clientY로 값을 반환합니다.

전위 용액

캔버스의 현재 회전 상태를 추적하기 위해, 만약 아핀 변환 행렬를 사용할 수있다. 어파 인 매트릭스는 3x3 매트릭스의 9 개 요소 중 6 개를 사용하여 모든 캔바스 변환에 대한 누적 정보를 보관합니다. 회전, 번역, 비율 등. 행렬은 단순히 6 개의 요소의 배열로 표현 될 수 있습니다.

var matrix=[ 1, 0, 0, 1, 0, 0 ]; 

캔버스 요소는 이러한 변형 행렬을 유지하지만 불행히도 (예기치 않게) 변형 행렬이 숨겨져 있습니다.

효과적인 솔루션 그래서 대안으로

, 당신은 상황에 변환 명령을 실행할 때마다, 당신은 당신이 자신을 유지하는 변형 행렬에 그 변경 사항을 반영 할 수 있습니다. 이 방법으로 행렬이 얼마나 많은 회전이 있더라도 현재의 회전 상태를 캔버스에 "저장"합니다.

그런 다음 회전되지 않은 공간에 정의 된 마우스 [x, y]를 가져올 때 해당 회전 행렬을 사용하여 회전되지 않은 마우스 좌표를 회전 된 캔버스 공간으로 변환 할 수 있습니다.

// convert mouse coordinates to transformed canvas coordinates 
function tmPoint(matrix, mouseX, mouseY){ 
    return({ 
    canvasX: mouseX*matrix[0] + mouseY*matrix[2] + matrix[4], 
    canvasY: mouseX*m[1] + mouseY*matrix[3] + matrix[5] 
    }; 
} 

방법에 ...

당신은 '배우 업'할 수 변환이 여기 행렬에 :

https://blog.safaribooksonline.com/2012/04/26/html5-canvas-games-tracking-transformation-matrices/