javascript - 如何在html5 Canvas 中制作可点击的点？

Question

我正在玩 simple tutorial用于在 HTML5 Canvas 中绘制线条。因为它是基于 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选择器？基本上，我想在点击或悬停时显示点坐标。

Answer 1

问题是 jQuery 使用 DOM 而不是 Canvas 上的绘图。您需要做的是将这些点存储在某个地方并悬停在 Canvas 元素上，检查鼠标相对于 Canvas 的坐标(即，如果您将鼠标放在 Canvas 的左上角，坐标是 [ 0,0] ) 在点/形状的区域内。如果是，则鼠标悬停在该点上，即可显示效果。

更好理解的伪代码:

// 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 )
}