Question

我在HTML5画布中使用simple tutorial绘制线条。因为它基于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这样的框架，它可以抽象处理添加到画布的对象上的鼠标事件的所有艰苦工作。

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

2 个答案: