Html5画布任意形状 [英] Html5 canvas hittest arbitrary shape
问题描述
我正在尝试开发可以在画布中渲染图像和文本的程序。我试图在画布上处理点击图像，但它适用于可直接图像。
I'm trying to develop program which can render images and text in canvas. I tried to handle click on image in canvas, but it work for rectable images.
我的问题：您是否知道在画布中单击图像的可见部分（非透明部分）处理解决方案或框架？
My question: Did you know solution or frameworks for handle click on visible part of image (not transparent part) in canvas ?
我正在寻找ActionScript hitTestObject函数的javascript实现，如果有人熟悉它。
I'm looking for javascript implementation of ActionScript hitTestObject function, if someone familiar with it.
这是一个简单的算法可直接命中的文字： http://jsfiddle.net/V92Gn/298/
Here is simple algorithm with rectable hit text: 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;
推荐答案
使用纯JavaScript +画布的解决方案
如果命中目标与背景混合，你可以做两件事：
Solution using pure JavaScript + canvas
For cases where the hit target is mixed with the background you can do two things:
- 创建一个单独的画布，堆叠在主画布的顶部，在其上绘制目标对象并对该画布进行测试。
- 创建一个包含隔离目标对象的离屏画布并测试
在这个例子中，我将使用离屏画布。
In this example I will use an off-screen canvas.
我们所做的是基本上通过创建图像大小的离屏画布并在加载时在图像中绘制来复制图像。这将保护背景并使其保持透明，无论主画布上是什么：
What we do is to basically replicate the image by creating an off-screen canvas the size of the image and draw in the image when loaded. This will protect the background and keep it transparent no matter what is on the main canvas:
/// 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 变量来首先检查我们是否在目标对象内。
Then using your existing code but with an adjustment for mouse position we can use the hitted variable you use to first check if we are inside the target object.
$(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;
现在我们知道我们在矩形内部，我们可以通过补偿从屏幕外的画布中提取像素对象位置：
Now that we know we are inside the rectangle we can extract a pixel from the off-screen canvas by compensating for the object position:
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;
}
...
正如您所见当我们在目标中的实际像素上时，无论它的背景是什么（当单独绘制时），我们只会将您使用的类更改为红色。
As you can see in the modified fiddle we only change the class you use to red when we are on an actual pixel in the target no matter what the background of it is (when drawn separately).
最后关于CORS的几句话：在这种情况下，当您使用DropBox时，您可以通过激活图像对象上的 crossOrigin 属性来请求图像的CORS使用你设置了来源：
Finally a couple of words on CORS: In this case, as you use DropBox, you can request CORS usage of the image simply by activating the crossOrigin property on the image object before you set the source:
logoImg.crossOrigin = ''; /// this is the same as setting anonymous
logoImg.src="http://dl.dropbox.com/...";
由于DropBox（以及像ImgUr.com这样的图像共享网站）支持CORS使用，因此它们将允许请求我们可以从中提取图像中的像素。
As DropBox (and image sharing sites such as ImgUr.com) support CORS usage they will allow the request and we can therefor extract pixels from the image.
如果服务器没有允许它，但我们将无法做到这一点。为了确保CORS没问题，您应该在发布时将图像托管在与页面相同的域中。
If the servers didn't allow it however we wouldn't be able to do this. To be sure CORS is ok you should host the image in the same domain as the page when you release it.
这篇关于Html5画布任意形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
