줌 후 캔버스에 그리기

Question

캔버스에 도형을 렌더링하는 HTML5 애플리케이션에서 작업하고 있습니다. 모양은 자유 그리기를 사용하여 사용자가 그립니다.

나는이 답변에 감사를 확대 실시 : 캔버스가 확대되면 사용자가 그리는 계속되면 https://stackoverflow.com/a/6776341/

그러나, 라인 오프셋으로 나타납니다. 문제는 포인트를 어떻게 변환하여 라인이 커서 아래에 다시 그려지 는가하는 것입니다.

Answer 1

<canvas> 요소에서 마우스 좌표를 가져올 때 DOM 좌표와 관련하여 요소의 높이와 너비를 기준으로합니다. 캔버스의 컨텍스트를 어떻게 조정했는지에 따라 변경되지 않습니다. 커서 아래에 캔버스의 좌표를 가져 오려면 캔버스의 현재 변환과 일치하도록 커서를 변형해야합니다.

// mouse event coordinates 
var mouseX; 
var mouseY; 

// current canvas transforms 
var originX; 
var originY; 
var scale; 

// adjust mouse coordinates with canvas context's transforms 
var canvasX = mouseX/scale + originX; 
var canvasY = mouseY/scale + originY; 

// should draw a rectangle with the cursor being directly in the center 
context.fillRect(canvasX - 10, canvasY - 10, 20, 20);