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

Posted 2023-05-08

【中文标题】如何在 html5 画布中制作可点击点？

【英文标题】：How to make clickable points in html5 canvas?

【发布时间】：2012-05-26 19:25:04

【问题描述】：

我正在使用simple tutorial 在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 选择器？基本上，我想在点击或悬停时显示点坐标。

【问题讨论】：

有很多这样的框架可以为你做这些，试着用一个来代替。

"因为它是基于jQuery的，所以很容易给绘图添加很多效果。"这不是真的，您将无法在画布对象上使用 jquery 动画，画布有点低级，您必须自己实现所有动画效果！ jQuery 使用 DOM 元素

【参考方案1】：

问题在于 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 )

【参考方案2】：

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

【讨论】：

谢谢，效果真的很棒！