如何获取 HTML5 Canvas 上的真实鼠标位置？

画布中的真实鼠标位置

要使用鼠标光标在 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 Canvas 上的真实鼠标位置？的详细内容。更多信息请关注PHP中文网其他相关文章！