在 Cytoscape.js 中的 x,y 位置查找元素

Question

我的图表允许将外部 div 拖放到画布上以添加新对象。在此放置事件中，我需要确定鼠标是否位于现有节点或边缘上。目前这是通过手动循环遍历节点并检查renderedPosition、renderOuterWidth 和renderedOuterHeight 来完成的。

看起来不能以相同的方式检查边缘，但即使可以，我也只想在位置靠近线条而不是边界框时找到边缘。

是否可以通过 x,y 坐标找到任何元素，或者是否可以触发提供 pageX 和 pageY 的点击事件，以便 Cytoscape 运行它自己的命中测试逻辑，然后可以找到所选元素？

Answer 1

这是一个两步过程：

(1)判断该点是否在元素的rendered bounding box内，如果是...

(2) 如果元素是边，做直线距离近似。您可以比较距离平方以降低成本。如果您使用弯曲的贝塞尔边，您可能需要与两条线进行比较——其中每条线与一个节点相交，并且与控制点的距离为一半。

我还添加了a ticket 以使这个用例更容易一些，但您现在应该执行上述操作。