【问题标题】:Path selection using fabricjs on html5 canvas在 html5 画布上使用 fabricjs 进行路径选择
【发布时间】:2017-03-18 00:26:52
【问题描述】:

我默认使用 Fabric.js 绘制路径,选定事件仅捕获与路径边界框的单击交集。如果您有多个路径的边界框相互重叠,但路径本身对最终用户来说是可以在视觉上区分的,这就会出现问题。

有没有办法进行像素完美路径选择或选择最接近用户点击的路径?

【问题讨论】:

    标签: canvas collision-detection fabricjs bezier


    【解决方案1】:

    我不知道在提出问题时是否已实现,但经过一番挖掘后,我发现对象(以及整个画布上)有一个属性可以实现像素完美选择:它被称为 perPixelTargetFind。 (http://fabricjs.com/fabric-intro-part-4#customization“可点击区域”部分)

    还有一个容差属性:targetFindTolerance。整个事情甚至适用于cutom对象。

    我花了很长时间才找到这些信息,所以我希望这会对某些人有所帮助

    【讨论】:

      【解决方案2】:

      我通常找不到任何精确的方法来为路径执行此操作。

      我得出的解决方案对于我的确切场景来说是令人满意的,它适用于起点和终点之间的简单贝塞尔曲线。

      它涉及测试最接近鼠标点击画布点的直线。

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

      【讨论】:

      • 目前似乎没有更好的解决方案。所以我暂时接受这个近似值。
      猜你喜欢
      • 2019-04-12
      • 2019-04-13
      • 1970-01-01
      • 2020-04-20
      • 1970-01-01
      • 2011-10-12
      • 1970-01-01
      • 2021-05-20
      • 2014-10-16
      相关资源
      最近更新 更多