Canvas 在html5画布上使用fabricjs进行路径选择

Canvas 在html5画布上使用fabricjs进行路径选择,canvas,collision-detection,fabricjs,bezier,Canvas,Collision Detection,Fabricjs,Bezier,默认情况下,我使用Fabric.js绘制路径。选定事件仅捕获与路径边界框的单击交点。如果有多个路径的边界框彼此重叠,但最终用户可以从视觉上区分这些路径,则这是有问题的 是否有任何方法可以进行像素完美路径选择或选择最接近用户单击的路径?我找不到任何精确的方法来进行路径选择 我得到的解决方案对于我的确切场景来说效果令人满意,这是关于起点和终点之间的简单贝塞尔曲线 它涉及到测试距离鼠标单击在画布中的点最近的直线 这需要一个计算的工作实现。我不知道这个问题提出时是否实现了,但经过一些挖掘,我发现在对象(

默认情况下,我使用Fabric.js绘制路径。选定事件仅捕获与路径边界框的单击交点。如果有多个路径的边界框彼此重叠,但最终用户可以从视觉上区分这些路径,则这是有问题的


是否有任何方法可以进行像素完美路径选择或选择最接近用户单击的路径?

我找不到任何精确的方法来进行路径选择

我得到的解决方案对于我的确切场景来说效果令人满意,这是关于起点和终点之间的简单贝塞尔曲线

它涉及到测试距离鼠标单击在画布中的点最近的直线


这需要一个计算的工作实现。

我不知道这个问题提出时是否实现了,但经过一些挖掘,我发现在对象(以及整个画布)上有一个属性可以实现像素完美选择:它被称为perPixelTargetFind。(部分“可点击区域”)

公差还有一个属性:targetFindTolerance。整个过程甚至适用于cutom对象


我花了太长时间才找到这些信息,所以我希望这能帮助一些人

目前似乎没有更好的解决方案。所以我现在接受这个近似值。