HTML5 キャンバス上で実際のマウスの位置を取得するにはどうすればよいですか?

キャンバス内の実際のマウス位置

マウス カーソルを使用して HTML5 キャンバス内に描画するには、多くの場合、キャンバスを原点 (0,0) に配置することが必須です。 ) 親コンテナ内。ただし、キャンバスの位置が原点から離れて調整されると、描画時に不一致が発生する可能性があります。

単純な 1:1 シナリオ

キャンバス要素の寸法がビットマップ サイズ (1) と完全に一致している場合:1 の比率)、次のスニペットを使用してマウスの位置をキャプチャします:

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

このメソッドをイベントに統合し、イベントを提供しますそして引数としてキャンバスを使用します。これは、x および y のマウス位置を詳細に示すオブジェクトを返します。要素自体と揃えるためにキャンバスの位置を減算します。

var canvas = document.getElementById("imgCanvas");
var context = canvas.getContext("2d");

function draw(evt) {
  var pos = getMousePos(canvas, evt);

  context.fillStyle = "#000000";
  context.fillRect(pos.x, pos.y, 4, 4);
}

異なるサイズの要素とビットマップ

CSS のスケーリングやピクセルのアスペクトの違いなどにより、キャンバスとビットマップのサイズが異なる場合比率を変更するには、次のように計算を調整します:

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect(), // abs. size of element
    scaleX = canvas.width / rect.width, // relationship bitmap vs. element for x
    scaleY = canvas.height / rect.height; // relationship bitmap vs. element for y

  return {
    x: (evt.clientX - rect.left) * scaleX, // scale mouse coordinates after adjusting for element relativity
    y: (evt.clientY - rect.top) * scaleY // scale mouse coordinates after adjusting for element relativity
  };
}

コンテキスト変換適用

キャンバス コンテキストが回転やスケーリングなどの変換を受けた場合、これらを考慮して現在の行列の逆行列を計算します。新しいブラウザでは、currentTransform プロパティを介して現在の変換へのアクセスが提供されますが、Firefox では mozCurrentTransformInverted を介して逆行列が提供されます。

カスタム行列計算が必要な場合は、独自のソリューションを実装するか、次で提供されているような既存のライブラリを利用します。カスタム マトリックス ソリューション](https://github.com/bebraw/calcGeometryFromPointOnTransformedCanvas)

要素の相対性を調整してマウス座標に逆行列を作成し、正しいマウス位置に合わせます。

var pos = getMousePos(canvas, e); // get adjusted coordinates as described above
var imatrix = matrix.inverse(); // obtain the inverse matrix somehow
pos = imatrix.applyToPoint(pos.x, pos.y); // apply inverse matrix to adjusted coordinate

context.fillStyle = "#000000";
context.fillRect(pos.x - 1, pos.y - 1, 2, 2);

あるいは、currentTransform の使用が可能な場合は、

var pos = getMousePos(canvas, e); // get adjusted coordinates as described above
var matrix = ctx.currentTransform; // W3C (future)
var imatrix = matrix.invertSelf(); // invert

// apply to point:
var x = pos.x * imatrix.a + pos.y * imatrix.c + imatrix.e;
var y = pos.x * imatrix.b + pos.y * imatrix.d + imatrix.f;

さらに単純化するために、次のことを考慮します。最後のコード ブロックで説明した無料の MIT ライセンスのライブラリなど、これらすべての手順を処理する包括的なライブラリを利用します。

以上がHTML5 キャンバス上で実際のマウスの位置を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。