Вычесть Показать Пиксели от мыши Позиция

Question

Полный код можно посмотреть на JSBin - http://jsbin.com/inibAya/1/edit

Так что я работаю на сайте WYSIWYG дизайнер, и я добавил перекрестие, чтобы показать corrinates положение мыши в пределах холста. (Примечание: ДИВ действует как холст а не html5 холст элемент)

ДИВ # холст позиционируется на ...

#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 «s documentation:

Описание: положение мыши относительно левого края документа.

Чтобы решить вашу проблему, вам необходимо будет учитывать смещение холста (44 пикселя).

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

JSBin.