Html5画布任意形状

Question

我正在尝试开发可以在画布中渲染图像和文本的程序.我试图在画布上处理点击图像,但它适用于可直接图像.

我的问题:您是否知道处理解决方案或框架在画布上点击图像的可见部分(不是透明部分)？

如果有人熟悉它,我正在寻找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. 创建一个单独的画布,它堆叠在主画布的顶部,在其上绘制目标对象并对该画布进行测试.
2. 创建一个离屏画布,其中包含隔离的目标对象并对其进行测试

在这个例子中,我将使用离屏画布.

我们所做的是基本上通过创建图像大小的离屏画布并在加载时在图像中绘制来复制图像.这将保护背景并使其保持透明,无论主画布上是什么:

在这里改进了小提琴

/// 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;

现在我们知道我们在矩形内部,我们可以通过补偿对象位置从屏幕外的画布中提取一个像素:

    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;
    }

    ...

正如你在改进的小提琴中看到的那样,当我们在目标中的实际像素上时,无论它的背景是什么(当单独绘制时),我们只将你使用的类改为红色.

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

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

由于DropBox(以及像ImgUr.com这样的图像共享站点)支持CORS使用,因此它们将允许请求,我们可以从中提取图像中的像素.

如果服务器没有允许它但是我们不能够做到这一点.为了确保CORS没问题,您应该在发布时将图像托管在与页面相同的域中.