Блог

У меня есть большая карта, составленная из шестиугольников в одном большом SVG. Я создал эту функцию, в которой, когда пользователь наводит курсор на SVG, он добавляет прослушиватель событий к каждому шестиугольнику, который, в свою очередь, выполняет функцию, которая сравнивает расстояние между мышью и каждым шестиугольником, и, в свою очередь, получает их на расстоянии 30 пикселей и добавляет к ним стиль CSS, который пропорционально уменьшает их размер в зависимости от положения мыши.

Это работает достаточно хорошо, но может стать довольно неустойчивым при наведении на большое количество шестиугольников и / или увеличении расстояния обнаружения. Я любитель, когда дело доходит до всего этого, поэтому я, возможно, не знаю о гораздо более простых и, вероятно, более оптимальных способах решения этой проблемы.

Вот код:

 function hexagonHover() {
    for (i = 0; i < poly.length; i  ) {
        poly[i].addEventListener('mouseover', function (event) {
            for (i = 0; i < poly.length; i  ) {

                var pos = poly[i].getBoundingClientRect();

                let _x = Math.round(pos.left   pos.width / 2);
                let _y = Math.round(pos.top   pos.height / 2);
                
                var mouseX = Math.round(event.clientX);
                var mouseY = Math.round(event.clientY);

                var a = _x - mouseX;
                var b = _y - mouseY;

                var dist = Math.round(Math.sqrt(a * a   b * b));

                if (dist <= 30) {

                    let v = mapRange(dist, 0, 30, 1.2, 0.2);

                    poly[i].style.webkitTransform = poly[i].style.transform =
                        "scale("   v   ")";
                    poly[i].style.webkitTransform = poly[i].style.transformOrigin =
                        "center";
                    poly[i].style.webkitTransform = poly[i].style.transformBox = "fill-box";
                    poly[i].style.transition = "transform ease 1s";
                } else {
                    poly[i].style.webkitTransform = poly[i].style.transform = "scale(1.0)";
                }
            }
        });
    }
}
 

Вот кодовый код, который демонстрирует эффект, хотя и в гораздо меньшем масштабе