ズーム後にキャンバスに描画

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