# 参考线实现 > 项目需求，需要实现一个参考线的UI功能，找了好久没有相应的插件使用。类似于ps的参考线 > 知乎的链接也被删除了，只有这个还有记录着。 大致思路如下： ~~~ 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 = []; } ~~~ 要点 * 边界值碰撞检查。 [sf社区回答](https://segmentfault.com/q/1010000003900409)