Spot the ball game, проблемы с масштабированием, jQuery

Question

Я пытаюсь создать пятно игры в мяч, так что это будет (в конечном счете) образ игрока, носящего мяч, но мяч был удален, а игроку нужно щелкнуть где должен быть мяч.

Первая версия прошла успешно и работает.

http://enjoythespace.com/sites/game/test.html

Но что мне нужно добавить своего рода масштабирование, так что вы можете увидеть более точно, где вы нажимаете. Я играл вокруг и придумали эту

http://enjoythespace.com/sites/v2/demo.html

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

Я думаю, что его todo с настройкой изображения, #webpage составляет половину исходного размера изображения, а #retina использует полный размер изображения.

Любая помощь?

Answer 1

Первая проблема заключается в том, что вы не устанавливая сетчатку backgroundPosition правильно.

Этот код работает (я добавил переменное масштабирование, чтобы понять, как изменение масштаба изменит расчет, но это нужно будет другие изменения тоже):

/* Moving the retina div with the mouse 
    (and scrolling the background) */ 
zoom = 2.0; 
retina.css({ 
    left  : left - sizes.retina.width/2, 
    top  : top - sizes.retina.height/2, 
    backgroundPosition : ""+(-zoom*left+sizes.retina.width/2)+'px '+(-zoom*top+sizes.retina.height/2)+'px' 
}); 

проверить это, проверяя, что все четыре угла видны правильно в сетчатке, т. е. когда вы находитесь за углом основного изображения, угол должен находиться в центре круга сетчатки.

Вторая проблема заключается в том, что при изменении размера браузера вычисления позиции отсутствуют, поскольку переменная смещения не обновляется для нового размера. Простой способ сделать это, чтобы поставить это в качестве первой линии webpage.mousemove(), так что смещения обновляется каждый раз, когда:

var offset = { left: webpage.offset().left, top: webpage.offset().top }; 

Answer 2

Похоже, вы проходите точку щелчка по верхней/левой позиции увеличенного изображения, чтобы выделить, где вы нажали. Вам нужно будет изменить верхнюю/левую позицию в зависимости от того, находится ли рыбий глаз над изображением или нет.

Неэкранированное изображение должно быть частью страницы новостей или может быть автономным изображением?

Если он может быть автономным, тогда решение должно быть довольно простым. Если увеличенное изображение в два раза больше размера unzoomed, вы можете просто установить верхние/левые значения подсветки на половину значения увеличенного изображения, если смотреть на unzoomed.

Положение Jquery позволит вам точно получить позицию.

jQuery Position()