Как сделать кликируемые точки в холсте html5?

Я играю с простым учебником для рисования строки в холсте HTML5. Поскольку он основан на jQuery, легко добавить много эффектов к чертежу.

Как я могу сделать точку clickable/hoverable для добавления эффектов jquery при нажатии /hover (mouseenter/mouseleave)? Точки нарисованы

c.fillStyle = '#333';

for(var i = 0; i < data.values.length; i ++) {
    c.beginPath();
    c.arc(getXPixel(i), getYPixel(data.values[i].Y), 4, 0, Math.PI * 2, true);
    c.fill();
}

Как добавить селектор jquery? В принципе, я хочу показать координаты точки при щелчке или наведении.

Ответы

Ответ 1

Проблема заключается в том, что jQuery работает с DOM, а не с рисунками на холсте. Что вам нужно сделать, так это хранить эти точки где-нибудь и нависнуть над элементом canvas, проверить, являются ли координаты мыши относительно холста (т.е. Если вы поместите мышь в верхний левый угол холста, 0,0]) находятся в области точки/формы. Если это так, точка наводится мышью, и вы можете отображать эффект.

Psuedocode лучше понять:

// adding shapes to the canvas
var shapes = [];  // make that rects for simplicity.
For (condition):
    shapes.push ( new Rect(x,y,width,height) );
    canvas.rect( x, y, width, height );

// testing hover.
$("#canvas").mousemove(function(e) {
    var offsetX = e.pageX - $(this).position().left;
    var offsetY = e.pageY - $(this).position().top;

    Foreach shape in shapes:
        if( shape.contains(offsetX, offsetY) )    // a fictious method, implement it yourself...lookup for collision detection; not exactly that but something like that...
            Mouse hovers! do something great.
});

Хорошо, возможно, чтобы выяснить, содержится ли точка в прямоугольнике, вы можете использовать что-то вроде этого:

function contains(rect, x, y) {
    return (x >= rect.x &&
            x <= rect.x + rect.width &&
            y >= rect.y && 
            y <= rect.y + rect.height )
}

Ответ 2

Вы можете использовать фреймворк, например EaselJS, который абстрагирует всю сложную работу по обработке событий мыши над объектами, которые вы добавляете в холст.