HTML Canvas线条绕点捕捉功能求助：触发条件定义与判定

功能说明 #

• 正在开发基于HTML Canvas的线条绘制功能：线段一端固定在锚点，另一端跟随鼠标移动；当鼠标在预设点集区域移动时，线段会被一个或多个点“勾住”
• 类比现实场景：就像在地图图钉间移动线绳，线绳会绕着图钉拉伸改变路径
  

触发条件要求（非简单吸附） #

线段仅靠近点不会触发“勾住”，必须同时满足：

1. 线段与点发生相交
2. 线绳的后续移动路径与之前路径产生偏离

• 方向规则：若相交发生在点的右侧，线绳需切换到点的左侧；若相交在左侧，则切换到右侧
  

当前状态与待解决问题 #

• 已实现基础的线段绘制，以及满足条件时添加新线段的逻辑
• 尚未明确触发“勾住”功能的精准条件定义，以及对应的判定算法，找不到针对该场景的现成技术方案，希望获得帮助

内容的提问来源于stack exchange，提问作者Candleout