Question

关于如何在Canvas中获取鼠标坐标，Stackoverflow上有很多讨论。我终于发现，https://stackoverflow.com/a/5417934中概述的解决方案对我来说很有效，除了一个例外：

如果我将画布边框的样式定义放入我的文档中，即

<style>
  canvas { border: 42px solid red; }
</style>

我得到的鼠标位置完全取决于边框大小（我可以通过使用边框大小轻松验证这一点）。作为临时解决方案，我通过边框大小手动调整鼠标坐标，最后使用以下函数获取鼠标坐标：

function getCursorPosition1(event) { 
  var canoffset=$('#pinaka').offset(); // Id of canvas is 'pinaka'
  var x=event.clientX+document.body.scrollLeft+document.documentElement.scrollLeft-Math.floor(canoffset.left) - 42;
  var y=event.clientY + document.body.scrollTop + document.documentElement.scrollTop - Math.floor(canoffset.top) + 1 - 42;
  return [x,y]
}

当然这很难看。有没有办法在我的代码中自动导出边框大小？

Answer 1

您可以使用window.getComputedStyle获取边框宽度。

<canvas id="canvas"></canvas>

var canvas = document.getElementById("canvas");
var computedStyle = window.getComputedStyle(canvas,null);
var topBorder=computedStyle.getPropertyValue("border-top-width");
var leftBorder=computedStyle.getPropertyValue("border-left-width");
var bottomBorder=computedStyle.getPropertyValue("border-bottom-width");
var rightBorder=computedStyle.getPropertyValue("border-right-width");

（需要IE9 +）

Answer 2

非常感谢你;结合我在问题上收到的答案和评论，我最终得到了以下解决方案：

var can=document.getElementById("pinaka");
function getCursorPosition(event) {
var computedStyle = window.getComputedStyle(can,null);
var topBorder=parseInt(computedStyle.getPropertyValue("border-top-width"),10);
var leftBorder=parseInt(computedStyle.getPropertyValue("border-left-width"),10);
var rect=can.getBoundingClientRect();
var x=event.clientX - rect.left - leftBorder;
var y=event.clientY - rect.top - topBorder;
return [x,y]
}

它似乎为我尝试的（少数）案例提供了正确的价值。

画布：当* border *存在时获取鼠标坐标

2 个答案: