Показать сообщение отдельно
  #56 (permalink)  
Старый 16.08.2021, 09:10
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 668

Я вижу что оно работает через раз, но не могу выявить причину. Я сделал цветные квадраты и видно что даже когда зум работает то он работе не так как задумано. То есть оно не зумится а просто перемещается.

<!doctype html>
<html lang="ru">

<head>
    <meta charset="utf-8">
    <title>index</title>
    <style>
        .blok {
            max-width: 1600px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .fertezj {
            width: 100%;
            height: 480px;
            cursor: crosshair;
            overflow: hidden;
            touch-action: none;
            padding: 0;
            margin: 0;
            border: 1px solid #000;
        }
        .fertezj img{
            padding: 0;
            margin: 0;
            display:  block;
        }
        .mashtab {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 10px 10px 10px 10px;

        }
        .plus {
            width: 50px;
            height: 50px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0px 20px 0px 0px;
            background-image: url(https://rakipov.ru/files/plus.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-color:darkgray;
        }
        .minus {
            width: 50px;
            height: 50px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: url(https://rakipov.ru/files/minus.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-color:darkgray;
        }
        .minus.dis, .plus.dis {
            opacity: .2;
        }
        .linia{
            opacity: 0;
        }
    </style>

    <script  type="text/javascript"  src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


</head>

<body>
    <div class="blok">
        <div class="fertezj"><img src="https://rakipov.ru/files/kvadraty_2.jpg" usemap="#6116112a3ae24" alt="" ></div>
        <div class="mashtab_blok">
            <div class="mashtab">
                <div class="plus"><img src="izobrazhenie/linia.png" width="100%" class="linia" alt=""></div>
                <div class="minus"><img src="izobrazhenie/linia.png" width="100%" alt="" class="linia"></div>
            </div>
        </div>
    </div>
    <map name="6116112a3ae24">

        <area shape="poly" href="/#0" coords="2947,1752,2947,1959,3154,1959,3361,1959,3361,1752,3361,1545,3154,1545,2947,1545">

        <area shape="poly" href="kvadrat_1" title="это красный квадрат" coords="2183,1752,2183,1959,2390,1959,2597,1959,2597,1752,2597,1545,2390,1545,2183,1545">
        
        <area shape="poly" href="kvadrat_2" title="это синий квадрат"  coords="1405,1752,1405,1959,1612,1959,1819,1959,1819,1752,1819,1545,1612,1545,1405,1545">
        
        <area shape="poly" href="/#3" coords="641,1752,641,1959,848,1959,1055,1959,1055,1752,1055,1545,848,1545,641,1545">
        
        <area shape="poly" href="/#4" coords="2947,1116,2947,1323,3154,1323,3361,1323,3361,1116,3361,909,3154,909,2947,909">
        
        <area shape="poly" href="kvadrat_3" title="это желтый квадрат"  coords="2183,1116,2183,1323,2390,1323,2597,1323,2597,1116,2597,909,2390,909,2183,909">
        
        <area shape="poly" href="kvadrat_4" title="это зеленый квадрат"  coords="1405,1116,1405,1323,1612,1323,1819,1323,1819,1116,1819,909,1612,909,1405,909">
        
        <area shape="poly" href="/#7" coords="641,1116,641,1323,848,1323,1055,1323,1055,1116,1055,909,848,909,641,909">
        
        <area shape="poly" href="/#8" coords="2947,501,2947,708,3154,708,3361,708,3361,501,3361,294,3154,294,2947,294">
        
        <area shape="poly" href="/#9" coords="2183,501,2183,708,2390,708,2597,708,2597,501,2597,294,2390,294,2183,294">
        
        <area shape="poly" href="/#10" coords="1405,501,1405,708,1612,708,1819,708,1819,501,1819,294,1612,294,1405,294">
        
        <area shape="poly" href="/#11" coords="641,501,641,708,848,708,1055,708,1055,501,1055,294,848,294,641,294">
    
    </map>

    <script src="https://cdn.jsdelivr.net/npm/imagemapster@1.5.4/dist/jquery.imagemapster.min.js"></script>
    <script>
        $("img[usemap]").mapster({
        scaleMap: true,
        fill: true,
        fillColor: '2CA7DC',
        fillOpacity: 0.75,
        });
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {

        document.querySelectorAll('.fertezj').forEach(el => {
        let _startX, _startY, _scrollLeft, _scrollTop, max_width, max_height, min_width, min_height;


        const pointerHandler = (event) => {
        const {
        screenX,
        screenY
        } = event;

        if (event.type === "pointerdown") {
        document.addEventListener("pointermove", pointerHandler);
        document.addEventListener("pointerup", pointerHandler);

        _startX = screenX;
        _startY = screenY;

        _scrollLeft = el.scrollLeft;
        _scrollTop = el.scrollTop;
        }

        if (event.type === "pointerup") {
        document.removeEventListener("pointermove", pointerHandler);
        document.removeEventListener("pointerup", pointerHandler);
        }

        if (event.type === "pointermove") {
        const dx = (screenX - _startX);
        const dy = (screenY - _startY);

        el.scrollTo(
        _scrollLeft - dx,
        _scrollTop - dy
        );
        }

        event.preventDefault();
        }

        el.addEventListener("pointerdown", pointerHandler);
        let img = el.querySelector("img");
        let ratio = max_ratio = 10;
        const zoom = _ => { console.log(el.scrollLeft)
        let _w = img.width, _h = img.height;
        img.width = min_width + (max_width - min_width) * ratio / max_ratio;
        img.height = img.width * (max_height / max_width);
        _w -= img.width; _h -= img.height;
        _w = el.scrollLeft - _w/2; _h = el.scrollTop - _h/2;
        el.scrollTo( _w, _h );
        }
        const _load = _ => {
        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
        );
        }
        img.complete ? _load() : img.addEventListener("load", _load);
        let nav = el.nextElementSibling;

        nav.addEventListener("pointerdown", ({
        target
        }) => {
        if (target = target.closest(".plus, .minus")) {
        ratio += target.classList.contains("plus") ? 1 : -1;
        ratio = Math.max(0, Math.min(ratio, max_ratio));
        nav.querySelector(".plus").classList.toggle("dis", ratio === max_ratio);
        nav.querySelector(".minus").classList.toggle("dis", !ratio);
        zoom();
        }
        });
        })
        });
    </script>
</body>

</html>
Ответить с цитированием