キャンバス內(nèi)の実際のマウス位置

マウス カーソルを使用して HTML5 キャンバス內(nèi)に描畫(huà)するには、多くの場(chǎng)合、キャンバスを原點(diǎn) (0,0) に配置することが必須です。 ) 親コンテナ內(nèi)。ただし、キャンバスの位置が原點(diǎn)から離れて調(diào)整されると、描畫(huà)時(shí)に不一致が発生する可能性があります。

単純な 1:1 シナリオ

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

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

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

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 のスケーリングやピクセルのアスペクトの違いなどにより、キャンバスとビットマップのサイズが異なる場(chǎng)合比率を変更するには、次のように計(jì)算を調(diào)整します:

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

コンテキスト変換適用

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

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

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

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 の使用が可能な場(chǎng)合は、

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;

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

以上がHTML5 キャンバス上で実際のマウスの位置を取得するにはどうすればよいですか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。