Опираясь на холст, полученный после увеличения

Question

Я работаю над приложением HTML5, которое создает фигуры на холсте. Формы рисуются пользователем, используя бесплатный чертеж.

Я реализовал масштабирование, благодаря этому ответу: https://stackoverflow.com/a/6776341/

Однако после того, как полотно будет увеличено, когда пользователь продолжает рисовать, линии появляются со смещением. Вопрос заключается в том, как перевести точки так, чтобы линии рисовались под курсором снова?

Answer 1

Когда вы получаете координаты мыши от элемента <canvas>, они относятся к высоте и ширине элемента до DOM. Они не будут меняться в зависимости от того, как вы масштабировали контекст canvas. Чтобы получить координаты холста под курсором, вы должны преобразовать их в соответствии с текущим преобразованием холста.

// 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);