javascript - html5 Canvas 点击贝塞尔路径形状检测

Question

我有一个 Canvas ，里面有一些不规则形状的图画，我想在有人点击特定的图画时得到反馈？

我到处都在寻找这个，但只找到了矩形的解决方案。

我认为它可能与 isPointInPath() 有关，但我还没有找到关于如何使用它的简明解释。

欢迎任何帮助。

Answer 1

我制作了一个使用第二个不可见 Canvas 进行对象拾取/ HitTest 的教程。将所有形状一个一个地绘制到第二个 Canvas 上，直到其中一个在鼠标所在的位置出现黑色像素。然后你找到了你的对象!

这是我写的关于使用 Canvas 选择对象的教程中的一些内容:

  // gctx is ghost context, made from the second canvas
  // clear(gctx)

  // ...

  // run through all the boxes
  var l = boxes.length;
  for (var i = l-1; i >= 0; i--) {
    // draw shape onto ghost context
    drawshape(gctx, boxes[i], 'black', 'black');

    // get image data at the mouse x,y pixel
    var imageData = gctx.getImageData(mx, my, 1, 1);
    var index = (mx + my * imageData.width) * 4;

    // if the mouse pixel exists, select and break
    if (imageData.data[3] > 0) {
      mySel = boxes[i];
      offsetx = mx - mySel.x;
      offsety = my - mySel.y;
      mySel.x = mx - offsetx;
      mySel.y = my - offsety;
      isDrag = true;
      canvas.onmousemove = myMove;
      invalidate();
      clear(gctx);
      return;
    }

  }

我的完整演示只使用矩形，但在以后的版本中我将使用圆/路径/文本。

如果您想查看演示和我的完整代码，请访问 here .