对齐辅助线的web实现

当几个对象需要水平对齐时，如果没有辅助线的话，是否很难知道他们是否已经水平对齐，并且需要不断的去微调它们的位置。

通常我们在使用ppt时，对齐辅助线就能很好的帮助我们让对象水平对齐。

近期，我们在开发一个编辑网页的工具也需要添加此功能，在编辑活动页面时，多个组件需要排列时难以做到组件间的对齐。此时，需要添加一些辅助线来帮助用户，当两个组件的边框对齐时即出现辅助线来提示用户此组件已经对齐了。

2,期望达到的效果

参考ppt、xd、ps等设计工具的辅助对齐线功能，当拖拽方块时，当该方块的边框或中线与其他方块的边线或中线重叠时则显示辅助红线。

3,梳理实现思路

实现前的考虑

如下图所示，我们简单梳理一下，不难发现，其实每一个块块需要上下左右，垂直水平居中，共6条线。所以，每个方块都需要记录上中下，左中右六条线的坐标。在拖拽的过程中不断地比较6条线是否和其他方块相等，若相等则显示辅助线。

4,实现的步骤

第1步，在拖拽开始时存储所有块块的坐标信息。通过块块的x,y坐标和宽高即可计算出6条对齐线的起始点和终止点。

左对齐线：x

中对齐线：w + width / 2

右对齐线：x + width

上对齐线：y

中对齐线：y + height / 2

下对齐线：y + height

拖拽功能基于react-draggable这个插件： https://www. npmjs.com/package/react -draggable

辅助线基于react-dragline： https:// github.com/zcued/react- dragline

第2步，在拖拽过程中不断地将拖拽元素和其他元素（对照数组）进行一一对比。如果遇到坐标相等的线即绘制对齐线。

第3步，计算辅助线

遍历对照数组中所有元素，横向和纵向两个方向的线进行分开对照，当两条线的x坐标相等即纵向对齐，当y坐标相等即横向对齐。当坐标相等时将它们押入对齐数组results中。

第4步，渲染辅助线

用对齐数组results中坐标值最小的作为辅助线的起点，最大值作为终点，辅助线使用tranform控制它自身的位置，最后用border绘制线即可。

5,临界点的判断

1，拖拽不能超出父容器的边界

每个块块的最大left和top值不能超过父元素的宽高减去它自身的宽高。

2，辅助线的吸附

当坐标和对照组当个块块当距离小于阀值时，让其等于此对照块块当坐标，即可达到吸附当效果。

参考资料：

react-dragline: https:// github.com/zcued/react- dragline

最后让我们看看效果：

我们是来自腾讯P&P Design的前端开发团队，我们将不定期与大家分享前端知识。

欢迎大家关注我们中心的公众号：