javascript - Html5 canvas hittest 任意形状

Question

我正在尝试开发可以在 Canvas 中呈现图像和文本的程序。我试图处理 Canvas 中的图像点击，但它适用于可调整的图像。

我的问题:您知道处理点击 Canvas 中图像可见部分(非透明部分)的解决方案或框架吗？

我正在寻找 ActionScript hitTestObject 函数的 javascript 实现，如果有人熟悉的话。

这是一个简单的算法，带有可调整的命中文本:http://jsfiddle.net/V92Gn/298/

var hitted = e.clientX >= position.x && 
    e.clientX <= position.x + logoImg.width && 
    e.clientY >= position.y && 
    e.clientY <= position.y + logoImg.height;

Answer 1

使用纯 JavaScript + canvas 的解决方案

对于命中目标与背景混合的情况，您可以做两件事:

1. 创建一个堆叠在主 Canvas 顶部的单独 Canvas ，在其上绘制目标对象并对该 Canvas 进行测试。
2. 创建一个离屏 Canvas ，其中包含隔离的目标对象并在其上进行测试

在此示例中，我将使用离屏 Canvas 。

我们所做的基本上是通过创建一个与图像大小相同的离屏 Canvas 来复制图像，并在加载图像时绘制图像。这将保护背景并保持透明，无论主 Canvas 上有什么:

Modified fiddle here

/// create an off-screen canvas to hold image
var ocanvas = document.createElement('canvas');
var octx = ocanvas.getContext('2d');

logoImg.onload=function(){
    
    /// set off-screen canvas to same size as image
    ocanvas.width = this.width;
    ocanvas.height = this.height;
    octx.drawImage(this, 0, 0);

    ... rest of code

然后使用您现有的代码但调整鼠标位置，我们可以使用您使用的 hitted 变量首先检查我们是否在目标对象内。

$(canvas).on('mousemove', function(e) {
    
    /// correct mouse position so it becomes relative to canvas
    var r = canvas.getBoundingClientRect(),
        x = e.clientX - r.left,
        y = e.clientY - r.top;
    
     var hitted = x >= position.x && x <= position.x + logoImg.width &&
                  y >= position.y && y <= position.y + logoImg.height;

现在我们知道我们在矩形内部，我们可以通过补偿对象位置从离屏 Canvas 中提取一个像素:

    if (hitted === true) {
        /// extract a single pixel at the adjusted position
        var pixel = octx.getImageData(x - position.x, y - position.y, 1, 1).data;

        /// set hitted again based on alpha value is 0 or not
        hitted = pixel[3] > 0;
    }

    ...

正如您在修改后的 fiddle 中看到的那样，当我们位于目标中的实际像素上时，我们只会将您使用的类更改为红色，而不管它的背景是什么(单独绘制时)。

最后关于 CORS 的几句话:在这种情况下，当您使用 DropBox 时，您可以通过在设置源之前激活图像对象的 crossOrigin 属性来请求图像的 CORS 使用:

logoImg.crossOrigin = '';   /// this is the same as setting anonymous
logoImg.src="http://dl.dropbox.com/..."; 

由于 DropBox(和图像共享网站，如 ImgUr.com)支持 CORS 使用，它们将允许请求，因此我们可以从图像中提取像素。

如果服务器不允许，我们将无法执行此操作。为确保 CORS 正常，您应该在发布图像时将图像托管在与页面相同的域中。