Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Функция как в картах Гугл и Яндекс (https://javascript.ru/forum/misc/82826-funkciya-kak-v-kartakh-gugl-i-yandeks.html)

рони 19.07.2021 15:45

Сергей Ракипов,
добавил класс для кнопок, пост тот-же #22

Сергей Ракипов 21.07.2021 10:50

Цитата:

Сообщение от рони (Сообщение 538795)
Сергей Ракипов,
добавил класс для кнопок, пост тот-же #22

Спасибо

Сергей Ракипов 21.07.2021 10:52

Посмотрел, как идеально все сделано!!!

Сергей Ракипов 21.07.2021 13:27

рони,
А получается что скрипт работает так. Масшат идет от верхнего левого угла.
А как сделать что бы он масштабировался в большую или меньшую сторону от тогда месте который сейчас находится в блоке. Понимаю что это сложно сделать. То хотя бы от центра шел масштаб.

Сергей Ракипов 21.07.2021 13:39

Цитата:

Сообщение от Сергей Ракипов (Сообщение 538832)
рони,
А получается что скрипт работает так. Масшат идет от верхнего левого угла.
А как сделать что бы он масштабировался в большую или меньшую сторону от тогда месте который сейчас находится в блоке. Понимаю что это сложно сделать. То хотя бы от центра шел масштаб.

Все вроде разобрался как это сделать, как я понял это вот здесь, но это будет зум от того места который я установлю.
el.addEventListener("pointerdown", pointerHandler);
        let img = el.querySelector("img");
        let ratio = max_ratio = 10;
        const zoom = _ => {
            el.scrollTo(0, 0);
            img.width = min_width + (max_width - min_width) * ratio / max_ratio;
            img.height = img.width * (max_height / max_width);
        }


А можно сделать что бы зум шел от того мета который при просмотре в блоке

Сергей Ракипов 21.07.2021 13:41

И как я понял за центровку изображение отвечает вот эта часть

max_width = img.naturalWidth;
            max_height = img.naturalHeight;
            min_width = el.clientWidth;
            el.style.height = Math.trunc(min_width * (max_height / max_width)) + "px";
            min_height = el.clientHeight;

            el.scrollTo(
                (max_width - min_width) / 2,
                (max_height - min_height) / 2
            );


Просто она не совсем по центру

Сергей Ракипов 21.07.2021 14:01

что то я не много поплыл, а что отвечает за высоту блока

Понял это вот тут

el.style.height = Math.trunc(min_width * (max_height / max_width)) + "px";
            min_height = el.clientHeight;


Сделал так, получилось по центру картинка

max_width = img.naturalWidth;
            max_height = img.naturalHeight;
            min_width = el.clientWidth;
            min_height = el.clientHeight;


А можно сделать так что бы сохранять пропорции в зависимости от разрешения.

рони 21.07.2021 14:10

Цитата:

Сообщение от Сергей Ракипов
сохранять пропорции

??? какие пропорции, картинка всегда имеет одну и туже пропорцию.

Сергей Ракипов 21.07.2021 14:14

Я имею виду не картинку а блок вот это сделать пропорциональный который зависит от разрешение.

.fertezj {
    width: 100%;
    height: auto;
    cursor: crosshair;
    overflow: hidden;
    touch-action: none;
    border: 1px solid rgba(34, 60, 80, 0.9);
    padding: 0;
    margin: 0;
}

рони 21.07.2021 14:42

Цитата:

Сообщение от Сергей Ракипов
Я имею виду не картинку а блок вот это сделать пропорциональный который зависит от разрешение.

не понимаю.


Часовой пояс GMT +3, время: 06:10.