在 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 以使此用例更容易一些,但您现在应该执行上述操作。
我的图形允许将外部 div 拖放到 canvas 上以添加新对象。在此放置事件中,我需要确定鼠标是否位于现有节点或边缘上。目前这是通过循环节点并检查 renderedPosition、renderedOuterWidth 和 renderedOuterHeight 手动完成的。
看起来不能以相同的方式检查边缘,但即使可以,我也只想在位置靠近线而不是边界框的情况下找到边缘。
是否可以通过 x,y 坐标找到任何元素,或者是否可以触发提供 pageX 和 pageY 的点击事件,这样 Cytoscape 将 运行 它有自己的命中测试逻辑,并且所选元素可以是之后发现?
这是一个两步过程:
(1)判断点是否在元素的rendered bounding box范围内,如果在...
(2)如果元素是边,做直线距离近似。您可以比较距离方块以降低成本。如果您使用的是弯曲的贝塞尔曲线边缘,您可能需要与两条线进行比较——每条线都与一个节点相交,并且到控制点的距离为一半。
我还添加了 a ticket 以使此用例更容易一些,但您现在应该执行上述操作。