Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript]Biblioteka panzoom, mierzenie odległości pomiędzy divami, offsetTop
stellatus
post 25.06.2021, 19:49:46
Post #1





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post
trueblue
post 26.06.2021, 09:23:43
Post #2





Grupa: Zarejestrowani
Postów: 6 774
Pomógł: 1826
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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.


--------------------
Go to the top of the page
+Quote Post
Szado
post 27.06.2021, 10:31:45
Post #3





Grupa: Zarejestrowani
Postów: 22
Pomógł: 4
Dołączył: 30.05.2017

Ostrzeżenie: (0%)
-----


Możesz też spróbować liczyć różnice w wartościach left/top pobranych z el.getBoundingClientRect().
Go to the top of the page
+Quote Post
stellatus
post 28.06.2021, 12:58:03
Post #4





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


@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
Go to the top of the page
+Quote Post
trueblue
post 30.06.2021, 11:05:48
Post #5





Grupa: Zarejestrowani
Postów: 6 774
Pomógł: 1826
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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


--------------------
Go to the top of the page
+Quote Post
stellatus
post 1.07.2021, 11:23:58
Post #6





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


Dzięki, przemyślę to w wolnej chwili i dam znać.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 23.07.2024 - 15:17