10

我正在玩一个在画布上画线的简单教程。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 选择器？基本上，我想在 click 或 hover 时显示点坐标。

4

2 回答 2

16

问题是 jQuery 使用 DOM 而不是画布上的绘图。您需要做的是将这些点存储在某处并将鼠标悬停在画布元素上，检查鼠标相对于画布的坐标（即，如果您将鼠标放在画布的左上角，坐标是 [ 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 )
}
于 2012-05-19T14:19:41.483 回答
9

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

于 2012-05-19T16:05:50.840 回答