問題

現有已知折線 有多段，當雙擊折線的時候，需要將該雙擊的位置點Q 添加到折線上（排除端點情況），如何去判斷Q要添加在折線的哪一段，或者Q分割了折線的哪一段？？

分析

方式1
一開始選用斜率計算，即平面中三點m,n,Q, Q與m,n 任意一點連線的斜率 與 m,n 連線斜率相同，則三點共線（與之相似的還有計算向量叉乘等，都是基于斜率的判斷），這思路在純粹的數學模型中是沒問題的，但是在js中會有以下問題

• js浮點運算并不準確，在計算斜率的時候會丟失精度
• 即使設置了閾值，但是精度丟失的程度根據m,n兩點連線的斜率有關，因此并不能有效的設置閾值，無效的閾值是指，當閾值較小的時候，計算誤差會容易大于閾值，導致新增點不屬于任何線段，當閾值較大的時候，計算誤差會容易小于閾值，導致新增點永遠被判定為最后一段。

方式二
鑒于以上測試結果，使用另一個判斷標準，點到直線的距離，即使浮點運算不準確，仍可以設置一個有效的閾值，當Q距離已知線段的距離為[0，閾值]，且與線段兩端點方向相反（區分多端斜率相同的線段）的時候就判斷Q在直線上。
實際開發中需要分析線寬，新增折點觸發時機等設置具體的閾值

總結

以上是生活随笔為你收集整理的svg 折线添加新的折点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。