对一个元素进行拖拽时，生成这个组件和其它组件对齐的参考线，实现各组件间四条边及水平中心线及垂直中心线对齐。在拖动完成后实现自动吸附对齐。
【解决思路】
1 MAP记录所有需要对齐组件的视窗坐标点（左上，右上，左下，右下）
2 P为当前拖拽对象实时的坐标点（左上，左下，右上，右下，中心点）
3 拿当前对象的坐标点P去匹配座标记录MAP
4 发现某一边对齐时，在canvas中画线，清除画布的操作应该在拖动时进行处理，
问题的关键在于如何快速的去计算当前组件的6条线（四边+中心线）和其它所有组件6条线在一条线上，看似麻烦其实可以简化逻辑为，只要判断三个点，左上角、右下角、中心点，在记录中有没有存在
-
如何判断两个组件垂直对齐？答：坐标x一样
-
如何判断两个组件水平对齐？答：坐标Y一样
-
如何记录坐标点便于查询
-
根据坐标画线
【答：3】
创建一个数组 tempArry 存放所有的坐标对象（包含座标信息），像下边这样
let tempArray=[
{let:1,right:100,top:10,bottom:400},
{let:2,right:200,top:20,bottom:600},
{let:1,right:300,top:30,bottom:400}
创建两个对象mapX 、mapY。对tempArray 进行遍历，mapX mapY 分别以x ,y 为key。 值为数组（ps:因为有可能多个组件 坐标是相同的），数组保存了坐标对象在tempArray中的索引。
mapX 记录所有组件的坐标x，每个组件三个x坐标（ps:左、中、右），结果如下
let mapX={
1:[0,2],
2:[1],
50.5:[0],
101:[1],
150.5:[2],
100:[0],
200:[1],
300:[2]
mapY 记录所有组件的坐标y，每个组件有三个坐标y（ps:上、中、下），结果如下
let mapY={
10:[0],
205:[0],
310:[1],
215:[2],
20:[1],
30:[2],
400:[0,2],
600:[1],
假设有一组件视窗坐标为(left:1,right:600,top:20,bottom:300);
通过判断左上角坐标点(p1) 就可以检测组件左边与上边的对齐，通过右下角坐标点(p2)，就可以检测组件 右边与下边的对齐，对过中心坐标(p3)就可以找到水平与垂直线的对齐。
p1 x:1,y:20
p2 x:600,y:300
p3 x:300.5,y:160
mapX 中存在以x 为值的key 就证明有垂直对齐的线，
mapY 中存在以 y为值 的key 就证明有水平对齐的线
通过map 中的值索引可以快速拿到对应的对齐组件信息，把当前组件的坐标点信息扔进去，取最大最小值就可以拿到对齐线的坐标信息，详见源码，大概思路是这样，其中还涉及一些细节，比如排自身的坐标信息等。
【自动吸附】
移动中的自动吸附功能不但性能开销高而且相对来说比较复杂，暂时开发为在拖动完成后进行自动吸附操作。
对于自动吸附可以抒理一下子功能点，
1 在吸附范围内找到符合的坐标点，也就是说 目标点坐标 （有3个目标点坐标）减掉当前座标点 绝对值不大于吸附范围
2 在前边的功能中只要找到三个点就可以，所以吸附功能也要找到当前元素的这三个点坐标 及吸附范围 坐标
3 需要区分的是当前元素的哪条边对齐了，因为操作作当前元素样式时，如果底边或右侧的边对齐了需要减掉元素自身的宽或高
4 需要知道当前移动的方向，当用户在远离在吸附范围内的元素时不要吸附
具体的实现细节详见代码
【对齐到网格】
对齐到网格更简单，在之前的基础上把网格坐标放入需要吸附到的坐点数组里即可，生成网格x,y坐标放入，具体详见源码
具体代码参见：https://github.com/yyccmmkk/js-reference-line【需求】对一个元素进行拖拽时，生成这个组件和其它组件对齐的参考线，实现各组件间四条边及水平中心线及垂直中心线对齐。在拖动完成后实现自动吸附对齐。【解决思路】1 MAP记录所有需要对齐组件的视窗坐标点（左上，右上，左下，右下）2 P为当前拖拽对象实时的坐标点（左上，左下，...
吸附发生在拖动元素的时候，拖动的时候，当前正在拖动的元素抽象出的8个点是图中的白点，和这8个点对比的点是其他元素的绿点
分别对比这些点的x或y的距离，如果小于设定的距离，比如说5px,就改变当前元素的x或y让这个距离变成0。
原理很简单，代码如下：
import { getPoints } from '../utils/common'
export function countAdsorb(e,moveX,moveY) {
需求来源:
拓扑图之机房平面图,显示机房长宽比例尺,房间内标注各种设备间距不易实现,特在机房平面图上层加一个十字参考线
横竖两条线垂直,在鼠标指针处交叉,显示鼠标指针坐标(相对机房平面图的坐标,不是相对于浏览器)
在需要时开启,用完关闭
项目用的是vue,并未引入jQuery,所以直接原生js封装的,部分代码用到ES6语法
效果如图:
封装后,开放三个参数功能:
开关按钮:开启参考线
父级div:
参考线颜色:color:"#ff0000",默认红色
参数一:参考线开关的cla
<a class="app-store" id="btnStore" href="https://itunes.apple.com/cn/app/you-shi-yun/id1352836220?l=zh&ls=1&mt=8">
在 VSCode 中对齐代码可以使用以下方法：
1. 使用快捷键进行自动格式化：按下快捷键 `Shift + Alt + F`（Windows、Linux）或 `Shift + Option + F`（macOS）可以对当前文件进行自动格式化，包括代码对齐等操作。
2. 使用插件：在 VSCode 中可以安装一些代码对齐的插件，比如 `Beautify`、`Prettier` 等。安装后，按照插件的使用说明进行设置和使用即可。
3. 手动对齐代码：手动对齐代码可以让代码更加易读，也可以减少一些自动格式化带来的问题。比如，选中要对齐的代码行，使用快捷键 `Ctrl + K Ctrl + F`（Windows、Linux）或 `Command + K Command + F`（macOS）可以进行代码格式化。也可以使用鼠标拖动代码行的缩进来手动对齐。
总之，在 VSCode 中对齐代码有多种方法，你可以选择适合自己的方式来提高代码的可读性。
typescript Type 'NodeListOf<any>' must have a '[Symbol.iterator]()' method that returns an iterato
13610
