Question

可以在JSBin上查看完整代码 - http://jsbin.com/inibAya/1/edit

所以我正在研究一个所见即所得的网站设计师，并添加了一个十字准线来显示鼠标位置在画布内的褶皱。（注意：div作为画布而不是html5画布元素）

div＃canvas位于...

#canvas {
    position: absolute;
    top:0; left:44px; right:291px; bottom:16px;
    overflow: auto;
}

无论我试图从画布的显示中移除44px的计算是什么，我都得到了NaN或未定义。当用户移动鼠标时，我希望它从左上角开始为0并向前移动。有没有人知道要让它发挥作用？

这是我的JQuery / JavaScript：

// Crosshair
var cH = $('#crosshair-h'), cV = $('#crosshair-v');

$('#canvas').mousemove(function(e) {
    cH.css('top', e.pageY);
    cV.css('left', e.pageX);
    $('#mousepos').text( "X: " + e.pageX + "px, Y: " + e.pageY + "px");
});

Answer 1

来自e.pageX的{{3}}：

说明：鼠标相对于文档左边缘的位置。

您需要考虑画布的偏移量（44px）来解决您的问题。

var canvasPosition = $(canvas).position();

$(canvas).on('mousemove', function(e) {
  var x = e.pageX - canvasPosition.left;
  var y = e.pageY - canvasPosition.top;
  cH.css('top', e.pageY);
  cV.css('left', e.pageX);
  $('#mousepos').text( "X: " + x + "px, Y: " + y + "px");
});

documentation

从鼠标位置减去显示像素

1 个答案: