如何在html5画布中制作可点击的点？

Question

我正在玩一个简单的HTML5画布画线教程.因为它基于jQuery,所以很容易为绘图添加很多效果.

如何在点击/悬停(mouseenter/mouseleave)时使点可点击/可悬空以添加jquery效果？这些点是由

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而不是画布上的绘图.你需要做的是将这些点存储在某处并悬停在画布元素上,检查鼠标相对于画布的坐标(即如果将鼠标放在画布的左上角,则是[和弦] 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 )
}

Answer 2

您可以使用像EaselJS这样的框架,它可以在您添加到画布上的对象上抽象处理鼠标事件的所有艰苦工作.