Question

我的画布里面有一些不规则的形状图画，如果有人点击某个特定图纸，我想收到反馈吗？

我一直在寻找这个，并且只找到了矩形的解决方案。

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

欢迎任何帮助。

Answer 1

我制作了一个使用第二个不可见画布进行对象拾取/命中测试的教程。将所有形状一个接一个地绘制到第二个画布上，直到其中一个形状具有鼠标位置所在的黑色像素。然后你找到了你的对象！

这里有一些关于用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。

Answer 2

您可以使用路径设置器，将所有形状转换为近似多边形。然后使用“多边形点”算法检查该点是否在形状中。

Answer 3

这可以通过使用Path2D来实现。

var div = document.getElementById("result");
var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var path1 = new Path2D();
path1.rect(10, 10, 100, 100);
path1.closePath();
ctx.stroke(path1);

var path2 = new Path2D();
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 * Math.PI);
path2.closePath();
ctx.stroke(path2);

var path3 = new Path2D("M230 10 h 80 v 80 h -80 Z");
ctx.fill(path3);
path3.closePath();

$('canvas').click( function(event) 
{
  div.innerHTML = "";
  
  var x = event.pageX;
  var y = event.pageY;

  if (ctx.isPointInPath(path1, x, y))
    div.innerHTML = "Path1 clicked";

  if (ctx.isPointInPath(path2, x, y))
    div.innerHTML = "Path2 clicked";
  
  if (ctx.isPointInPath(path3, x, y))
    div.innerHTML = "Path3 clicked";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <canvas id="canvas"></canvas>
  <div id="result"></div>
</body>

html5画布点击bezier路径形状检测

3 个答案: