@olezhenka

Возможно ли определить элемент на который наведен курсор в canvas?

Вот пример:
www.chartjs.org/samples/latest/charts/pie.html
Когда ховеришь на элементы статистики они меняют цвет, но все элементы внутри canvas. Как создавать обработчики на эти элементы?
Мне придется высчитывать координаты мыши и только так определять на каком элементе находится курсор?
  • Вопрос задан
  • 758 просмотров
Пригласить эксперта
Ответы на вопрос 5
vicodin
@vicodin
Имею некоторый опыт
Мне придется высчитывать координаты мыши и только так определять на каком элементе находится курсор?
Да
Ответ написан
Комментировать
nikolayshabalin
@nikolayshabalin
Автор профессиональных курсов в HTML Academy
Попробуйте - digitalarts.bgsu.edu/faculty/bonniem/Spring11/artc...
выглядит как то, что Вам нужно.

Самому лично не приходилось заниматься таким.
Ответ написан
@dancep
Hi o/
Нужно сначала создать нужные элементы, а потом узнать, какой элемент находится в координатах мыши.
https://stackoverflow.com/a/37619815
То же самое библиотекой:
https://canvasjs.com/docs/charts/chart-options/dat...
Ответ написан
Комментировать
@mr_ko
Javascript, Node.js. React.js, Vue.js, Wordpress
Без библиотек прийдется самому щитать.
Я брал за основу для проекта с канвасом вот эту либу https://projects.calebevans.me/jcanvas/
Небольшая, есть ховер ефекты, умеет работать со слоями.
В целом остался доволен выбором.
Ответ написан
Комментировать
@geek_of_cola
поиск уникального объекта 
function getActiveObject ( objs, x, y )
{
                let currentObj = null;

                objs.forEach((obj) => 
                {
                    let objX = obj.x,
                        objY = obj.y,
                        objPX = objX + obj.width,
                        objPY = objY + obj.height;
                    if(objPX >= x && objX <= x && objPY >= y && objY <= y)
                    {
                        currentObj = obj;
                    }
                });

                return currentObj;
            }

canvas.addEventListener('mousedown', (e) =>{
 //queue - ваш массив с элементами
                var obj = getActiveObject(queue, event.offsetX, event.offsetY)
                if(obj)
                {
                    console.log(obj)
                }
            },false)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы