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

2022-01-17 00:00:00 canvas jquery javascript html html5-canvas

我正在玩 简单教程 用于在 HTML5 画布中绘制线条.因为它是基于jQuery的，所以很容易给绘图添加很多效果.

I am playing with a simple tutorial for drawing line in HTML5 canvas. Since, it is based on jQuery, it is easy to add lots of effects to the drawing.

如何使点可单击/悬停以在单击/悬停时添加 jquery 效果(mouseenter/mouseleave)?点是由

How can I make the point clickable/hoverable to add jquery effects upon click/hover (mouseenter/mouseleave)? The points are drawn by

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 选择器?基本上，我想在点击或悬停时显示点坐标.

How to add jquery selector? Basically, I want to show the point coordinates upon click or hover.

推荐答案

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

The problem is that jQuery works with DOM and not drawings on canvas. What you need to do is to store those points somewhere and on hovering over the canvas element, check if the coordinates of the mouse relative to the canvas ( i.e. if you place the mouse over the top-left corner of the canvas, coords are [0,0] ) are within the area of the point/shape. If so, the point is hovered over by the mouse and you can display the effect.

为了更好地理解伪代码:

Psuedocode to understand better:

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

好吧，也许要找出一个点是否包含在一个矩形内，你可以使用这样的东西:

Ok, maybe to find out if a point is contained within a rectangle, you can use something like this:

function contains(rect, x, y) {
    return (x >= rect.x &&
            x <= rect.x + rect.width &&
            y >= rect.y && 
            y <= rect.y + rect.height )
}

相关文章