Dessin sur toile après zoom

Question

Je travaille sur une application HTML5 qui rend des formes sur toile. Les formes sont dessinées par l'utilisateur, en utilisant un dessin libre.

I mis en œuvre le zoom, grâce à cette réponse: https://stackoverflow.com/a/6776341/

Cependant, une fois la toile est agrandie, lorsque l'utilisateur continue à dessiner, les lignes apparaissent avec un décalage. La question est de savoir comment traduire les points afin que les lignes à tracer sous le curseur à nouveau?

Answer 1

Lorsque vous obtenez des coordonnées de la souris à partir de l'élément <canvas>, elles sont relatives à la hauteur et à la largeur de l'élément en ce qui concerne le DOM. Ils ne changeront pas en fonction de la façon dont vous avez mis à l'échelle le contexte du canevas. Afin d'obtenir les coordonnées de la toile sous le curseur, vous devez les transformer pour correspondre à la transformation actuelle du canevas.

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