具體程式碼參見：https://github.com/yyccmmkk/js-reference-line

【需求】

對一個元素進行拖拽時，生成這個元件和其它元件對齊的參考線，實現各元件間四條邊及水平中心線及垂直中心線對齊。

【解決思路】

1 MAP記錄所有需要對齊元件的視窗座標點（左上，右上，左下，右下）

2 P為當前拖拽物件實時的座標點（左上，左下，右上，右下，中心點）

3 拿當前物件的座標點P去匹配座標記錄MAP

4 發現某一邊對齊時，在canvas中畫線，清除畫布的操作應該在拖動時進行處理，

問題的關鍵在於如何快速的去計算當前元件的6條線（四邊+中心線）和其它所有元件6條線在一條線上，看似麻煩其實可以簡化邏輯為，只要判斷三個點，左上角、右下角、中心點，在記錄中有沒有存在

1. 如何判斷兩個元件垂直對齊？答：座標x一樣
2. 如何判斷兩個元件水平對齊？答：座標Y一樣
3. 如何記錄座標點便於查詢
4. 根據座標畫線

【答：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 中的值索引可以快速拿到對應的對齊元件資訊，把當前元件的座標點資訊扔進去，取最大最小值就可以拿到對齊線的座標資訊，詳見原始碼，大概思路是這樣，其中還涉及一些細節，比如排自身的座標資訊等。