【问题标题】:Selecting multiple objects using the hitbox when drawing a box in konvajs在 konvajs 中绘制框时使用 hitbox 选择多个对象
【发布时间】:2020-11-04 13:44:12
【问题描述】:

我目前正在尝试选择多个对象(特别是线条)并通过绘制一个框将它们添加到 Group/Transformer。为此,我关注了这个很有帮助的stackoverflow question

实施后,我对结果并不满意,因为即使我没有通过形状,每次绘制框时我都需要检查整个形状列表。

在试图找到解决这个问题的方法时,我认为可能有一种方法可以让一条线知道它与正在绘制的框发生碰撞。但是,我没有幸运地发现与我试图重现的东西相似的东西。有没有一个例子或方法让我绘制一个框以在与框碰撞时选择多个对象?

【问题讨论】:

  • 你看过这个演示konvajs.org/docs/select_and_transform/Basic_demo.html吗?它显示了通过框进行选择。
  • 嗨@lavrton,在那个例子中,当他调用 var shapes = stage.find('.rect').toArray()乙>。检查舞台中的每个形状是否是使用选择框检查交叉/碰撞的唯一方法?
  • 您可以尝试在鼠标按下时执行一次。但是我看不到每次鼠标移动都这样做的任何问题。你有性能问题吗?
  • 暂时没有,因为我只有几个形状。但是,如果我创建了更多,我想知道解决这个问题的最佳实践。如果我有很多形状,每次鼠标移动检查我的整个形状列表不会极大地影响我的表现吗?
  • 如果您正在考虑使用自定义方法来查找交叉点,请记住您可以使用非矩形形状,甚至可以旋转矩形形状。对这些挑战进行命中测试可能是一项“有趣”且耗时的工作。我相信 Konvajs 有一些涵盖这些点的优化策略。

标签: konvajs konva konvajs-reactjs


【解决方案1】:

检查舞台中的每个形状是检查交叉点的唯一方法。

如果您需要一些优化,可以尝试debouncing or throttle strategies

例如每 100 毫秒检查一次交互,而不是每一个 mousemovetouchmove 事件。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-03-12
    • 1970-01-01
    • 2020-10-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多