javascript - 如何测试一个点是否是二次贝塞尔曲线的一部分？

Question

我有一个在 HTML5 Canvas 中使用 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();

如果单击我的 Canvas ，我如何检测到我单击了该形状？

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

Answer 1

你有两个选择

1. 在 Javascript 中实现多边形内点代码和贝塞尔曲线计算
2. 您可以使用context.isPointInPath，但是需要您在进行测试时重建形状(该函数仅根据当前路径检查指定点，即将填充的路径调用填充)