Вход

Просмотр полной версии : координаты в модальном окне


Prowler
18.07.2017, 07:42
Добрый день!
Есть модальное окно имеющее следующую структуру:

#overlay
{
position: fixed;
background-color: rgba(0,0,0, 0.7);
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
}
#modal
{
position: absolute;
left: 50%;
top: 50px;
transform: translateX(-50%);
}
<div id="overlay">
<div id="modal">
</div>
</div>
В #modal создается еще div в котором создается canvas. Размеры канвы и созданного дива задаются программно и размер зависит от картинки. Размер по вертикале становится больше чем окно браузера и появляются полосы прокрутки (на элементе #overlay).
Задача состоит в том, чтобы вычислить позиции курсора на канве. Т.е. нужно знать координаты на канве в области которая не поместилась на экране, смещена и открывается после прокрутки. pageYOffset не подходит, т.к. показывает смещение не в модальном окне, а по факту на Body.

laimas
18.07.2017, 08:59
pageYOffset не подходит, т.к. показывает смещение не в модальном окне, а по факту на Body

https://developer.mozilla.org/ru/docs/Web/API/Element/getBoundingClientRect
и
http://javascript.ru/ui/offset

Prowler
18.07.2017, 19:30
laimas,
видимо, я плохо описал ситуацию. Итак, в созданный канвас выводится изображение, высота которого больше тела документа. Т.к. скрол добаляется на overlay то pageYOffset не меняется при скроллировании div с канвас. На канве внизу справа выводится другое изображение, при наведении на некоторые точки его нужно что-то делать. Т.е. я рисую изображение в области, координаты которой зависят от размера первого рисунка. Когда это изображение нарисовано за пределами документа - координаты не совпадают. Например, если картинка исходная большая по высоте и высота документа меньше (900px), то максимальная высота pageY будет 900. Но при этом картинка в углу выведена в координатах 1200. Чтобы добраться до этих координат, нужно скроллировать overlay. И так мы и получим, что мышка ходит в координатах 900, а картинка больше возможной области. Т.е. вот эти 300, что должны быть offset не знаю как можно получить. Есть мысль выводить вместе со вторым изобрмажанием на канве за ней еще div в тех же координатах и по нему высчитывать реальные координаты. Но какой-то костыль выходит.

Prowler
18.07.2017, 19:54
laimas,
нашел свою ошибку - getBoundingClientRect при скроле и уходе элемента за экран показывает его координаты относительно и они становятся отрицательными. Завтра буду подумать, сегодня голова уже не хочет работать.