畫布中的真實(shí)鼠標(biāo)位置

要使用鼠標(biāo)光標(biāo)在 HTML5 畫布中繪制，通常必須將畫布定位在原點(diǎn) (0,0 ）在父容器內(nèi)。但是，如果將畫布位置調(diào)整為遠(yuǎn)離原點(diǎn)，則繪制時可能會出現(xiàn)差異。

簡單的 1:1 場景

如果畫布元素的尺寸與位圖尺寸完美對齊（1 :1 比率），使用以下代碼片段捕獲鼠標(biāo)位置：

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

將此方法集成到您的事件中，提供事件和畫布為論據(jù)。它返回一個詳細(xì)說明 x 和 y 鼠標(biāo)位置的對象。減去畫布位置以與元素本身對齊。

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

不同大小的元素和位圖

當(dāng)畫布和位圖大小不同時，例如由于 CSS 縮放或不同的像素方面比率，調(diào)整計(jì)算如下：

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

上下文轉(zhuǎn)換應(yīng)用

如果畫布上下文經(jīng)歷了旋轉(zhuǎn)或縮放等變換，請計(jì)算當(dāng)前矩陣的逆矩陣以解釋這些變換。較新的瀏覽器通過 currentTransform 屬性提供對當(dāng)前變換的訪問，而 Firefox 通過 mozCurrentTransformInverted 提供倒置矩陣。

如果需要自定義矩陣計(jì)算，請實(shí)現(xiàn)您自己的解決方案或利用現(xiàn)有的庫，例如以下提供的庫：[自定義矩陣解決方案](https://github.com/bebraw/calcGeometryFromPointOnTransformedCanvas)

應(yīng)用逆矩陣調(diào)整元素相對性以與正確的鼠標(biāo)位置對齊后，將矩陣轉(zhuǎn)換為鼠標(biā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 可行：

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;

為了進(jìn)一步簡化，請考慮使用一個處理所有這些步驟的綜合庫，例如最后一個代碼塊中提到的免費(fèi)的 MIT 許可的庫。

以上是如何獲取 HTML5 Canvas 上的真實(shí)鼠標(biāo)位置？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！