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

Question

[olezhenka]

Вот пример:
www.chartjs.org/samples/latest/charts/pie.html
Когда ховеришь на элементы статистики они меняют цвет, но все элементы внутри canvas. Как создавать обработчики на эти элементы?
Мне придется высчитывать координаты мыши и только так определять на каком элементе находится курсор?

Answer 1

[Anton Filippov]

Мне придется высчитывать координаты мыши и только так определять на каком элементе находится курсор?

Да

Answer 2

[Николай Шабалин]

Попробуйте - digitalarts.bgsu.edu/faculty/bonniem/Spring11/artc...
выглядит как то, что Вам нужно.

Самому лично не приходилось заниматься таким.

Comments

[olezhenka]

ссылка не работает (

Answer 3

[dancep]

Нужно сначала создать нужные элементы, а потом узнать, какой элемент находится в координатах мыши.
https://stackoverflow.com/a/37619815
То же самое библиотекой:
https://canvasjs.com/docs/charts/chart-options/dat...

Answer 4

[Alex]

Без библиотек прийдется самому щитать.
Я брал за основу для проекта с канвасом вот эту либу https://projects.calebevans.me/jcanvas/
Небольшая, есть ховер ефекты, умеет работать со слоями.
В целом остался доволен выбором.

Answer 5

[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)