Canvas создает проблемы при изменении размера экрана

Question

У меня есть этот дизайн и отлично работает: http://jsfiddle.net/98Bgq/22/

var offsetX = canvasOffset.left; 
var offsetY = canvasOffset.top; 
var scrollX = $canvas.scrollLeft(); 
var scrollY = $canvas.scrollTop(); 

Но когда я изменить размер экрана моего браузера, кажется, полотно начинает работать в совершенно иначе, чем обычно , в приведенном выше примере я не могу щелкнуть еще несколько частей дизайна, как я могу это решить?

Answer 1

смещение и прокрутки может измениться на изменения размеров окна: обрабатывать событие изменения размера и пересчитывать их:

эту скрипку, кажется, работает: http://jsfiddle.net/gamealchemist/98Bgq/24/

код:

var offsetX = 0, offsetY = 0; 
var scrollX = 0, scrollY = 0; 

function computeOffset() { 
canvasOffset = $canvas.offset(); 
offsetX = canvasOffset.left; 
offsetY = canvasOffset.top; 
scrollX = $canvas.scrollLeft(); 
scrollY = $canvas.scrollTop(); 
} 

computeOffset(); 

window.onresize = computeOffset; 

Answer 2

Поскольку вы» re с помощью jQuery, вероятно, будет проще всего использовать event.pageX. Например.

mouseX = e.pageX - $canvas.offset().left; 
mouseY = e.pageY - $canvas.offset().top; 

Edit: Для не-JQuery, это хорошо работает:

mouseX = e.hasOwnProperty('offsetX') ? e.offsetX : e.layerX; 
mouseY = e.hasOwnProperty('offsetY') ? e.offsetY : e.layerY; 

event.pageY/X возвращает позицию мыши относительно верхнего/левого края документа. $elmnt.offset() возвращает координаты элемента относительно документа. Таким образом, вычитание последнего из первого дает вам относительное положение мыши в холсте.

event.offsetY/X/event.layerY/X дает координату события относительно текущего слоя. layerX не работает с хром, поэтому, если его нет, вместо этого используется offsetX.