[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

[trueblue]

Ponieważ używane są transformacje 2D, nie masz co opierać się na liczeniu odległości standardowymi metodami.
Przesunięcia możesz obliczyć korzystając ze stylu transform: translate, ale musisz brać pod uwagę również styl transform: scale. Przy czym są to przesunięcia środka wrappera obrazka - zauważ, że przy małej skali ten wrapper ma inną szerokość niż obrazek w nim.

[Szado]

Możesz też spróbować liczyć różnice w wartościach left/top pobranych z el.getBoundingClientRect().

[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

[trueblue]

Musiałbyś odczytywać style transform i parsować wartości. Mając scale oraz translate, mógłbyś obliczyć faktyczne przesunięcie.

Ale ja osobiście napisałbym samodzielnie taki skrypt.
Zamiast posługiwać się transform, możesz ustawić kontener otaczający obrazek na width:100% oraz height:100% (pamiętając o tym, aby był kwadratem), a skalą obrazka sterować poprzez ustawienie równoczesne takich samych wartości max-width oraz max-height dla obrazka. Kontrolując max-width/max-height na poziomie od X do 100% obrazek nigdy nie wyjdzie poza ramkę.
Samo przesuwanie wtedy realizujesz już poprzez left i top (obrazek z position: absolute).

Ten post edytował trueblue 30.06.2021, 11:45:54

[stellatus]

Dzięki, przemyślę to w wolnej chwili i dam znać.