画布-检测点击外部剪裁区域
画布-检测点击外部剪裁区域
提问于 2016-06-01 09:38:51
我在地图上有一个被剪掉的区域！是否有可能在剪辑区域外点击检测，所以如果人们点击黑色暗区，它将显示一个警报？
这是我的密码：
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = new Image;
image.addEventListener('load', function(){
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx.fillRect(0, 0, 870, 500);
// Use save and restore to make sure the canvas restores its non-clipping path setup after clipping
ctx.save();
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100,50);
ctx.lineTo(100, 100);
ctx.lineTo(200, 150);
ctx.lineTo(10, 150);
ctx.closePath();
// Use the path just created as a clipping path
ctx.clip();
// Draw anywhere in the image, only inside the clipping path will be drawn
ctx.drawImage(image,0,0, canvas.width, canvas.height);
// restore so you can draw outside the clipping path again
ctx.restore();
});
image.src = 'http://www.marinadivenezia.it/media/467/w-876/h-506/00-MAPPA-2015-GENERICA.jpeg';我的小提琴密码在这里：http://jsfiddle.net/eGjak/2789/
问候安德烈亚斯
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-06-01 09:56:37
使用普通路径
当然，但是让我们稍微重构一下代码，以便重用。如果您将裁剪路径提取到一个单独的函数，那么我们就可以将其用于命中测试：
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对象中，而不是像这里这样存储在函数中，这取决于您想要支持的新浏览器。
改良小提琴
使用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");改良小提琴
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37564911
复制相关文章
相似问题
腾讯云开发者
