如何测试一个点是否是二次Bézier曲线的一部分？

I have a shape, in HTML5 canvas, drawn with JavaScript:

我在HTML5画布中有一个用JavaScript绘制的形状:

ctx.beginPath();
ctx.moveTo(25,0);
ctx.quadraticCurveTo(50,50,40,100);
ctx.lineTo(33,100);
ctx.quadraticCurveTo(50,50,20,0);
ctx.fill();
ctx.closePath();

If a click my canvas, how can I detect that I clicked this shape?

如果单击我的画布,我怎么能检测到我点击了这个形状?

canvas.addEventListener("click",function(e){
     alert(isItPartOfTheShape(e.clientX,e.clientY));
})

function isItPartOfTheShape(x,y){
     /* Here comes the code which detects is it part of the shape */
     return isIt;
}

1 个解决方案

#1

You have two choices

你有两个选择

implement the point-in-polygon code and bezier curve computation in Javascript

在Javascript中实现点多边形代码和贝塞尔曲线计算

you can use context.isPointInPath that however requires you to rebuild the shape when you do the test (that function checks the specified point only against the current path, i.e. the path that would be filled calling fill)

你可以使用context.isPointInPath但是你需要在进行测试时重建形状(该函数只针对当前路径检查指定的点,即填充调用fill的路径)

1 个解决方案

#1

更多相关文章

随机推荐