[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]

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