Как сделать кликабельные точки в html5 canvas?

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

Как я могу сделать точку кликабельной / перемещаемой, чтобы добавить эффекты jquery при нажатии / наведении курсора мыши (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? По сути, я хочу показать координаты точки при нажатии или наведении курсора.

Источник

2 ответа

Решение

Проблема в том, что jQuery работает с DOM, а не с рисунками на холсте. Что вам нужно сделать, это сохранить эти точки где-нибудь и при наведении курсора на элемент холста, проверить, соответствуют ли координаты мыши относительно холста (то есть, если вы поместите мышь над левым верхним углом холста, координаты будут [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 )
}
Источник

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

Источник
Другие вопросы по тегам