我觉得还是自己实现吧，实现起来也不难，就是有点麻烦而已；

我在知乎上有个回答，回答的正好是这个问题，这里简要说一下大概的思路，具体的可以查看知乎的答案：https://www.zhihu.com/questio…

实现的效果大概是这样（其中有不完善的地方，以后会被慢慢完善） http://yeetoo.ymark.cc/

主要思路：

鼠标按下并且监听移动的对象 ----> 根据对象的边界，和所有的对象进行比对，如果差值<=5（此值决定吸附区间，可以根据情况进行改变。），则向画布中添加一条辅助线。 ----> 鼠标释放清除所有的辅助线。

实现的详细版：也只是说个大概，就不上具体代码了。

let auxiliary_line_arr = []; // 需要添加的辅助线列表 function 监听鼠标按下事件的回调{ auxiliary_line_arr=[]; } function 监听鼠标移动事件的回调{ const adsorp_arr = []; 1.获取移动对象边界 2.获取所有的对象的边界 3.进行边界比对 { 1.先判断是否靠近边界 2.再判断是否有相交或者要相交的对象 if(差值<5px的时候){ auxiliary_line_arr.push({要画的线的坐标点}); adsorp_arr.push(吸附参数); }

}
4.实现吸附
    adsorp_arr.map(() => {
        if( Math.abs(移动对象的x-吸附[value]) <= 5 ){
            设置移动对象的x = 吸附[value];
        }
    })

} // 任何移动或者改变操作都会触发这个方法 function 监听画布重新渲染被调用的方法{ auxiliary_line_arr.map((k) => 向画布中添加一条线; ); } function 监听鼠标释放事件的回调{ auxiliary_line_arr = []; }