[JavaScript]Biblioteka panzoom, mierzenie odległości pomiędzy divami, offsetTop Opcje

[stellatus]

Mam dwa obrazki w divach:

https://srv19859.microhost.com.pl/kadrowanie/

Do przesuwania i zoomowania obrazów zastosowałem bilbiotekę panzoom.

Chciałbym mierzyć te odległości w px:

https://drive.google.com/file/d/17p9MkqKWS5...iew?usp=sharing

Wiem, że odległość diva od jego rodzica można mierzyć za pomocą offset, ale to nie działa. Nie wiem czemu. Div . zoom-area1 lub .zoom-area2 w jakiejkolwiek pozycji by nie były, to ich offsetTop zawsze wynosi 322:

https://drive.google.com/file/d/1lW6tgoveQz...iew?usp=sharing

o co tutaj chodzi?



Ten post edytował stellatus 25.06.2021, 19:50:01

[stellatus]

@trueblue

"Przesunięcia możesz obliczyć korzystając ze stylu transform: translate, ale musisz brać pod uwagę również styl transform: scale."

Ale jak?
Mamy w kodzie takie 2 linijki:
panzoom1.pan(0, 0);
panzoom1.zoom(300 / document.querySelector('.zoom-area1 img').height);

Wartość translate w divie .zoomarea1: 0px, 0px.

Uruchamiamy teraz:
panzoom1.pan(0, 0);
panzoom1.zoom(1);

Wartość translate w divie .zoomarea1 znowu: 0px, 0px.

W ten sposób nie da się wyliczyć tej różnicy, zatem jak to zrobić?

@Szado próbuję z tym el.getBoundingClientRect(), ale dzieje się coś czego nie rozumiem:
https://codepen.io/reti/pen/jOmObwJ
Próbuję np. przesunąć div .zoom-area2 do krawędzi wrappera (guzik podpięty do funkcji movePhoto()) Wartości top są jednak nieprawidłowe, bo zostaje przerwa:
https://pasteboard.co/K8HmZQs.png



Ten post edytował stellatus 28.06.2021, 13:43:40