有没有一种方法可以轻松确定画布中绘制的形状已被单击？

Question

我现在正在学习如何使用 HTML5 画布。我有一个简单的脚本，可以沿水平线绘制圆圈。

我想增强我的脚本以更具交互性。我希望能够单击沿线的一个圆圈，这会导致链接到该圆圈的数据在画布上显示为文本。

这在画布上很容易实现吗？从我看过的教程中我发现我必须在画布本身上放置一个 onclick 。从那里我猜测我必须找出我的鼠标光标被单击的位置，并以某种方式找出哪个圆圈包含我的单击点。

有没有任何代码片段或指针可以帮助我解决这个问题？或者，画布真的不适合此类问题吗？非常感谢任何评论。

Answer 1

您可以使用canvas的isPointInPath方法添加鼠标事件处理。像下面这样的东西（未经测试）。

// add click event handler to canvas
// on click
var rect = canvas.getBoundingClientRect();
var mouseX = e.clientX - rect.left;
var mouseY = e.clientY - rect.top;

ctx.beginPath()
// draw stuff
if (ctx.isPointInPath(mouseX, mouseY)) {
  // handle click
}

这将识别任何形状，如果您要绘制矩形和圆形以外的任何形状，这将非常有用。然而，这样做的主要缺点是您必须在每次单击时重新绘制（如果要添加鼠标悬停，则必须重新绘制鼠标移动）。根据我的经验，在开始看到性能问题之前，我至少可以绘制 300 个对象。

我还应该注意到，isPointInPath 的 firefoxes 实现中存在一个 bug ，该错误仍未修复出于某种原因。但幸运的是，修复很简单，

CanvasRenderingContext2D.prototype.isPointInPath_mozilla = function( x, y )
{
  if (navigator.userAgent.indexOf('Firefox') != -1){
    this.save();
    this.setTransform( 1, 0, 0, 1, 0, 0 );
    var ret = this.isPointInPath( x, y );
    this.restore();
  } else
    var ret = this.isPointInPath( x, y );

  return ret;
}

只需将 ctx.isPointInPath(x,y) 替换为 ctx.isPointInPath_mozilla(x,y) 即可，一切正常

Answer 2

Canvas 使用光栅图形。一旦你画了一个圆，它就不再具有圆的身份——你只有一堆像素。您需要自己跟踪所有形状。

如果您使用矢量图形（例如 SVG），则形状会保留身份并且可以进行操作。这样可能会更容易。

Answer 3

您为画布创建单击事件，并且在处理程序中，如果用户单击圆圈，则必须计算（一些基本数学）。另一种方法是不使用画布，而是使用 SVG，像 raphael 这样的库可能会有所帮助。

Answer 4

我已经为移动设备画布绘制完成了类似的操作，然后进行形状匹配。

我的程序是。

根据画布高度和宽度（以像素为单位）的数量声明一个 2D 数组。

用 0 填充数组

对于 mousemove 事件（桌面浏览器）跟踪位置。您将获得 X,Y 值。
在你的二维数组中，在行和列中放入 1（X 和 Y 值）。

绘制完成后，您将得到一个二维二值图像数组。

现在有趣的部分：

尝试图像动量或此链接中的任何其他合适的方法。 http://www. imageprocessingplace.com/downloads_V3/root_downloads/tutorials/Tutorial--Algorithms%20for%202-D%20Object%20Recognition.pdf

如果您保存一些 2D 绘制的形状数组并与当前绘制的图像匹配，您将能够找到最近的匹配项。如果用户绘制了完全不同的形状，请尝试找到合适的阈值。

我希望这会有所帮助。