【发布时间】:2017-03-18 00:26:52
【问题描述】:
我默认使用 Fabric.js 绘制路径,选定事件仅捕获与路径边界框的单击交集。如果您有多个路径的边界框相互重叠,但路径本身对最终用户来说是可以在视觉上区分的,这就会出现问题。
有没有办法进行像素完美路径选择或选择最接近用户点击的路径?
【问题讨论】:
标签: canvas collision-detection fabricjs bezier
我默认使用 Fabric.js 绘制路径,选定事件仅捕获与路径边界框的单击交集。如果您有多个路径的边界框相互重叠,但路径本身对最终用户来说是可以在视觉上区分的,这就会出现问题。
有没有办法进行像素完美路径选择或选择最接近用户点击的路径?
【问题讨论】:
标签: canvas collision-detection fabricjs bezier
我不知道在提出问题时是否已实现,但经过一番挖掘后,我发现对象(以及整个画布上)有一个属性可以实现像素完美选择:它被称为 perPixelTargetFind。 (http://fabricjs.com/fabric-intro-part-4#customization“可点击区域”部分)
还有一个容差属性:targetFindTolerance。整个事情甚至适用于cutom对象。
我花了很长时间才找到这些信息,所以我希望这会对某些人有所帮助
【讨论】:
我通常找不到任何精确的方法来为路径执行此操作。
我得出的解决方案对于我的确切场景来说是令人满意的,它适用于起点和终点之间的简单贝塞尔曲线。
它涉及测试最接近鼠标点击画布点的直线。
这个here 需要计算的工作实现。
【讨论】: