html5画布点击bezier路径形状检测 [英] html5 canvas clicking on bezier path shape detection
问题描述
我有一个画布上有一些不规则的形状图纸,我想在有人点击某个特定的图片时收到反馈。
I have a canvas with some irregular shape drawings in it, and I would like to have a feedback when someone clicks on a specific one?
看起来无处不在,只找到矩形的解决方案。
I've been looking everywhere for this and have only found solutions for rectangle.
我认为它可能与isPointInPath(),但我还没有找到一个简明的解释如何使用它。
I think it may have to do with isPointInPath(), but I've yet to find a concise explanation on how to use it.
任何帮助欢迎。
推荐答案
做了一个教程,使用第二个不可见的画布做对象拣选/命中测试。将所有形状逐个绘制到第二个画布上,直到其中一个具有鼠标位置所在的黑色像素。
I made a tutorial that uses a second invisible canvas to do object picking/hit testing. Draw all your shapes, one by one, onto the second canvas until one of them has a black pixel where the mouse location is. Then you've found your object!
下面是我在使用canvas选择对象时写的教程:
Here's a bit from the tutorial I wrote on selecting objects with canvas:
// gctx is ghost context, made from the second canvas
// clear(gctx)
// ...
// run through all the boxes
var l = boxes.length;
for (var i = l-1; i >= 0; i--) {
// draw shape onto ghost context
drawshape(gctx, boxes[i], 'black', 'black');
// get image data at the mouse x,y pixel
var imageData = gctx.getImageData(mx, my, 1, 1);
var index = (mx + my * imageData.width) * 4;
// if the mouse pixel exists, select and break
if (imageData.data[3] > 0) {
mySel = boxes[i];
offsetx = mx - mySel.x;
offsety = my - mySel.y;
mySel.x = mx - offsetx;
mySel.y = my - offsety;
isDrag = true;
canvas.onmousemove = myMove;
invalidate();
clear(gctx);
return;
}
}
我的完整演示只使用矩形,在以后的版本中,我将使用圈子/路径/文本。
My full demo only uses rectangles but in a later version I will use circles/paths/text.
如果你想看到演示和我的完整代码,它是此处。
If you want to see the demo and my full code it is here.
这篇关于html5画布点击bezier路径形状检测的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!