Question

我在地图上有一个区域被剪掉了！是否可以在剪切区域外点击检测，因此如果人们点击黑色调暗区域，它会显示警报？

这是我的代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="main">
  <div>
    <div class="progress">
      <div role="progressbar" style="width: 70%"
           aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"
           class="progress-bar progress-bar-info progress-bar-striped active"></div>
    </div>
    <p>Test Test Test Test Test Test Test Test Test Test Test Test Test </p>
  </div>
  <div style="background: #00F;">TEST2</div>
</div>

我的小提琴代码在这里： http://jsfiddle.net/eGjak/2789/

关心安德烈亚斯

Answer 1

使用普通路径

当然，但是让我们重构代码以便重用。如果将剪切路径提取到单独的函数，那么我们可以将其重用于命中测试：

function makePath() {
  ctx.beginPath();
  ctx.moveTo(10, 10);
  ctx.lineTo(100,50);
  ctx.lineTo(100, 100);
  ctx.lineTo(200, 150);
  ctx.lineTo(10, 150);
  ctx.closePath();
}

然后我们可以用它来创建剪辑：

  //...
  ctx.save();
  makePath();   // here
  ctx.clip();
  ctx.drawImage(image,0,0, canvas.width, canvas.height);
  ctx.restore();
  //...

以及命中测试，尽管我们会反转布尔结果以触发路径外的点击。对于命中测试，我们可以使用isPointInPath()，它将使用当前路径，默认情况下为非零绕组规则：

canvas.onclick = function(e) {
  var rect = this.getBoundingClientRect(),
      x =   e.clientX - rect.left,
      y = e.clientY - rect.top;

  makePath();  // and here
  if (!ctx.isPointInPath(x, y)) alert("Outside");
};

您还可以将路径存储在Path2D对象中而不是此处的函数中，具体取决于您希望支持的新浏览器的使用方式。

<强> Modified fiddle

使用Path2D

代替我们可以使用的函数，如提到的Path2D对象，可以像这样重用。这些对象可以方便地存储多个路径数据，无需重建您要测试的每个路径。缺点是目前并非所有浏览器都支持它们。

var p = new Path2D();
p.moveTo(10, 10);
p.lineTo(100,50);
p.lineTo(100, 100);
p.lineTo(200, 150);
p.lineTo(10, 150);
p.closePath();

然后用它来剪裁：

  ctx.save();
  ctx.clip(p);  // hand over path object
  ctx.drawImage(image,0,0, canvas.width, canvas.height);
  ctx.restore();

并且点击测试：

if (!ctx.isPointInPath(p, x, y)) alert("Outside");

<强> Modified fiddle

画布 - 检测剪裁区域外的点击

1 个答案:

使用普通路径

使用Path2D