 [JavaScript]Biblioteka panzoom, mierzenie odległości pomiędzy divami, offsetTop |
  |
| [JavaScript]Biblioteka panzoom, mierzenie odległości pomiędzy divami, offsetTop |
  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 |
 |
 
|
|
26.06.2021, 09:23:43
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 6 761 Pomógł: 1822 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. -------------------- |
|
|
|
|
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().
|
|
|
|
|
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 |
|
|
|
|
30.06.2021, 11:05:48
Post
#5
|
|
|
Grupa: Zarejestrowani Postów: 6 761 Pomógł: 1822 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 -------------------- |
|
|
|
 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ć.
|
|
|
|
|
|
Wersja Lo-Fi | Aktualny czas: 26.04.2024 - 06:47 |
