Bagaimana untuk Mendapatkan Kedudukan Tetikus Sebenar pada Kanvas HTML5?

Kedudukan Tetikus Sebenar dalam Kanvas

Untuk melukis dalam kanvas HTML5 menggunakan kursor tetikus, selalunya penting untuk kanvas diletakkan di tempat asal (0,0 ) dalam bekas induk. Walau bagaimanapun, jika kedudukan kanvas dilaraskan jauh dari asal, percanggahan mungkin timbul semasa melukis.

Senario 1:1 Mudah

Jika dimensi elemen kanvas sejajar dengan saiz peta bit (1 nisbah :1), gunakan coretan berikut untuk menangkap tetikus jawatan:

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

Sepadukan kaedah ini ke dalam acara anda, sediakan acara dan kanvas sebagai hujah. Ia mengembalikan objek yang memperincikan kedudukan tetikus x dan y. Kurangkan kedudukan kanvas untuk diselaraskan dengan elemen itu sendiri.

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

Elemen dan Peta Bit Bersaiz Berbeza

Apabila kanvas dan peta bit berbeza dalam saiz, seperti disebabkan penskalaan CSS atau aspek piksel yang berbeza nisbah, laraskan pengiraan seperti berikut:

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

Transformasi Konteks Digunakan

Jika konteks kanvas telah mengalami transformasi seperti putaran atau penskalaan, hitung songsangan matriks semasa untuk mengambil kira ini. Penyemak imbas baharu menawarkan akses kepada perubahan semasa melalui sifat currentTransform, manakala Firefox menawarkan matriks terbalik melalui mozCurrentTransformInverted.

Jika pengiraan matriks tersuai diperlukan, laksanakan penyelesaian anda sendiri atau gunakan perpustakaan sedia ada seperti yang disediakan di: [ Matriks Tersuai Penyelesaian](https://github.com/bebraw/calcGeometryFromPointOnTransformedCanvas)

Gunakan matriks songsang pada koordinat tetikus selepas melaraskan kerelatifan unsur agar sejajar dengan kedudukan tetikus yang betul.

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

Sebagai alternatif, jika menggunakan currentTransform ialah boleh dilaksanakan:

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;

Untuk memudahkan lagi, pertimbangkan untuk menggunakan perpustakaan komprehensif yang mengendalikan semua langkah ini, seperti yang berlesen MIT percuma yang disebut dalam blok kod terakhir.

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Kedudukan Tetikus Sebenar pada Kanvas HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!