如何可靠地获取画布上的单击事件的确切位置？

Question

如何获得在画布上点击的确切点？

JS-Fiddle： http://jsfiddle.net/IQAndreas/yRMZ6/

没有＆＃34;内置＆＃34;事件属性（clientX，pageX，screenX）获取我要搜索的值。

搜索Google或之前的问题会显示几个答案，但大多数人会假设像＃34;画布必须全屏＆＃34;或者由于其他原因，他们无法在上面的测试中工作。

Answer 1

你的例子中的主要问题是填充和画布开始的实际位置......

您可以使用getComputedStyle函数获取填充，并使用此功能在页面上找到真正的画布：

function getPos(el) {
    var pl = parseInt(window.getComputedStyle(el, null).getPropertyValue('padding-left'));
    var pt = parseInt(window.getComputedStyle(el, null).getPropertyValue('padding-top'));
    for (var lx=0, ly=0;
         el != null;
         lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
    return {x: lx + pl,y: ly + pt};
}

Workin' example on JSFiddle

请注意，边框会影响该边框，因此您可能还想添加window.getComputedStyle(el, null).getPropertyValue('border-top')和window.getComputedStyle(el, null).getPropertyValue('border-left')。

Answer 2

您可以使用.getBoundingClientRect获取画布元素位置 - 包括滚动：

var BB=canvas.getBoundingClientRect();

然后，您可以使用由画布元素的边界框调整的event.clientX和event.clientY来获取相对于画布的鼠标位置。

关于边框和填充的注意事项：您可以单击画布元素的边框，它将触发画布点击事件。这意味着画布上的[0,0]位于画布边框的左上角。但是，画布的绘图区域位于边框内。因此，如果要获取相对于画布绘图区的单击的x，y，则还必须减去边框大小。填充也是如此。因此，如果要获取相对于画布绘图区的单击的x，y，则还必须减去填充大小。

function handleMousedown(e){

    var BB=canvas.getBoundingClientRect();
    var x=e.clientX-BB.left-borderLeftWidth-paddingLeft;
    var y=e.clientY-BB.top-borderTopWidth-paddingTop;
    console.log(x,y);

}

要获取边框和填充，您可以使用.getComputedStyle：

// a function using getComputedStyle to fetch resolved CSS values

  function getStyle(elem,stylename){
      return(
          window
          .getComputedStyle(elem,null)
          .getPropertyValue(stylename)
      );
  }

// Fetch border and padding

var borderLeftWidth=getStyle(canvas,"border-left-width");
var borderTopWidth=getStyle(canvas,"border-top-width");
var paddingLeft=getStyle(canvas,"padding-left");
var paddingTop=getStyle(canvas,"padding-top");