Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ Przedszkole _ [JavaScript]Biblioteka panzoom, mierzenie odległości pomiędzy divami, offsetTop

Napisany przez: stellatus 25.06.2021, 19:49:46

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/17p9MkqKWS55E4kdVQyYUA_q8KETsL3Jd/view?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/1lW6tgoveQzLt4XzHTtR60waIdQVOPP2P/view?usp=sharing

o co tutaj chodzi?

Napisany przez: trueblue 26.06.2021, 09:23:43

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.

Napisany przez: Szado 27.06.2021, 10:31:45

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

Napisany przez: stellatus 28.06.2021, 12:58:03

@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

Napisany przez: trueblue 30.06.2021, 11:05:48

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).

Napisany przez: stellatus 1.07.2021, 11:23:58

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