今天來畫線段吧，然後讓線段可以變成一個閉合多角型，直接轉換為圖形

連接線段的方式

(詳見例子裡，這邊是拆解執行想法)

• addPoint(o) 函數：
  • 在鼠標點擊位置創建一個新的圓形點。
  • 將新點添加到 points 數組和畫布中。
  • 如果已有其他點，則調用 addLine 函數連接最後兩個點。
• addLine(startPoint, endPoint) 函數：
  • 創建一條連接兩個點的線。
  • 將新線添加到 lines 數組和畫布中。
• updateLines(movedPoint) 函數：
  • 當一個點被移動時，更新與之相連的線。
  • 找到移動點的索引，更新其前後的線（如果存在）。
• updateLine(line, startPoint, endPoint) 函數：
  • 更新一條線的起點和終點坐標。

使用放置的點來創建多邊形的方式

1. 函數開始和基本檢查:

   function closePath() {
     if (points.length < 3) return;
   

   這個檢查確保至少有3個點,因為這是形成閉合路徑的最小要求。

2. 初始化路徑字符串:
   路徑的開始：大概會長這樣=> 從M開始 M x1 y1，加上起始點 x,y

   var pathString = `M ${points[0].left} ${points[0].top}`;
   

   M 命令將"畫筆"移動到第一個點的位置，不畫線。這是路徑的起點。

後續的每個點：使用 L 命令連接所有後續的點。L 表示直線到指定坐標。每個後續的點都會添加一個 "L" 命令，後面跟著該點的 x 和 y 坐標。
L x2 y2 L x3 y3 L x4 y4 ...

for (var i = 1; i < points.length; i++) {
  pathString += ` L ${points[i].left} ${points[i].top}`;
}

如果有很多點，pathString 可能會看起來像這樣：
M 100 100 L 150 150 L 200 100 L 250 200 L 300 150 L 350 250 L 400 200 L 450 300 L 500 250 Z
可能會非常長，特別是在繪製複雜形狀或者進行精確繪圖時。例如，如果您在繪製一個有100個點的複雜多邊形，pathString 可能會有300多個數字（每個點兩個坐標值，加上 "L" 命令）。

如果點太多（比如數千個），可能會稍微影響渲染性能，但這種情況在一般的繪圖應用中並不常見。

4. 最後用z閉合路徑:

   pathString += " Z";
   

   Z 命令自動將路徑的終點連接回起點,形成閉合圖形。

5. 創建 Fabric.js 路徑對象（也就是你新形成的閉合多邊形！）

   path = new fabric.Path(pathString, {
     fill: "rgba(0,0,255,0.2)",
     stroke: "blue",
     strokeWidth: 2
   });
   

   這裡我們用生成的路徑字符串 pathString 創建一個新的 Fabric.js Path 對象，設置填充色、描邊顏色和寬度。

6. 將路徑添加到畫布:

   canvas.add(path);
   

7. 清理:

   points.forEach((point) => canvas.remove(point));
   lines.forEach((line) => canvas.remove(line));
   points = [];
   lines = [];
   

   這邊會移除所有用於創建路徑的臨時點和線，並清空相關點線數值。
   以便下一次要畫新的多邊形。

8. 重新渲染畫布:

   canvas.renderAll();
   

   最後，調用這個方法來更新畫布顯示。

需要注意的是，一旦執行 closePath() 函數，當前的點和線都會被清除，轉換為一個封閉的路徑對象。

詳細可看🌰：
fabric.js - line