Как реализовать событие при наведении мыши, как на картинке?

Question

[ref21 @ref]

При наведении на точки должен выскакивать попап.
Я думаю, нужно цеплять событие на координаты точек. Правильно ли?
Или есть варианты лучше?
Помогите, в интернете мало инфы по построению графиков на js canvas.

Comments

[twobomb]

Если используешь chart.js то там можно кастомный сделать.

[ref21 @ref]

Я пытаюсь отрисовать все без плагинов. Для своего интереса)

Answer 1

[Антон Швец]

https://jsfiddle.net/melchiorio/py07o25h/

Ну, т.е. запоминаем наши области где точка, и проверяем при движении курсора.

А можно еще схитрить, получать цвет пикселя из-под курсора, и точки рисовать каким-нибудь хитрым цветом, который не используется в основной палитре. Например проверять последние цифры цветов, поставить там 8.
Можно еще создать теневой канвас, и там рисовать карту наложения черно-белую, и проверять по ней, это наиболее адекватное решение.
Реализовывать это я конечно не буду.

Comments

[ref21 @ref]

Большое спасибо за ответ)

[twobomb]

Всё так, вот только метод колизии у вас в примере идет с квадратом, а отображается круг, соответственно срабатывать будет на пустых областях.
Чтобы проверить колизию с кругом проще всего измерить расстояние от координат мыши и до центра круга, и если это расстояния менее или равно радиуса круга тогда есть колизия.
Пример

if(getDist(mouseX,mouseY,circleX,circleY) <= circleRadius){
//mouse pointer...
}
//Функция возвращает расстоение между двумя точками
     function getDist(x,y,x1,y1){
         return Math.sqrt(Math.pow(x1 - x,2)+Math.pow(y1-y,2));
     }

[Антон Швец]

twobomb, великолепное наблюдение, теперь призываю подумать почему так обычно не делают. :)

[twobomb]

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

Answer 2

[Planet_93]

Используйте обработчики событий при наведении на точку.

<div id="pointId">
//Ваша точка
</div>

//Получаем точку
var point = document.getElementById("pointId");

//Вешаем обработчик
//срабатывает при заходе курсора на элемент
point.addEventListener("mouseover",function() {
   this.style.backgroundColor = "gray";
})
//срабатывает при уходе курсора с элемента
point.addEventListener("mouseout",function() {
   this.style.backgroundColor = "white";
})

Также можно использовать css свойство - hover. Оно срабатывает когда вы наводите мышкой на элемент.
Например при наведении на точку, делать окно с координатами точки видимыми