У меня возникают проблемы с получением положения мыши w.r.t canvas.
Есть два случая:
1) Если есть элемент div, окружающий div div, тогда я смог получить положение мыши.
2) Когда холст обернут в div, тогда offsetLeft и offsetTop работают не так, как ожидалось
Что объясняет эту разницу?
Вам нужна функция, чтобы получить позицию элемента холста:
function findPos(obj) {
var curleft = 0, curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
return undefined;
}
И вычислить текущую позицию курсора относительно этого:
$('#canvas').mousemove(function(e) {
var pos = findPos(this);
var x = e.pageX - pos.x;
var y = e.pageY - pos.y;
var coordinateDisplay = "x=" + x + ", y=" + y;
writeCoordinateDisplay(coordinateDisplay);
});
Значения offsetLeft и offsetTop относятся к offsetParent, что является вашим div node. Когда вы удаляете div, они относятся к body, поэтому смещения нет.
Similary, e.pageX и e.pageY указывают положение курсора относительно документа. Поэтому мы вычитаем смещение холста из этих значений, чтобы достичь истинного положения.
Альтернативой для позиционированных элементов является непосредственное использование значений e.layerX и e.layerY. Это менее надежно, чем метод выше по двум причинам: