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

Find element at x,y position in Cytoscape.js

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

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

是否可以通过 x,y 坐标找到任何元素,或者是否可以触发提供 pageX 和 pageY 的点击事件,这样 Cytoscape 将 运行 它有自己的命中测试逻辑,并且所选元素可以是之后发现?

这是一个两步过程:

(1)判断点是否在元素的rendered bounding box范围内,如果在...

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

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