今天在學習《HTML5+Javascript動畫基礎》這本書的時候，在第八章的第三節講到如何用三個彈簧連接三個點來做拉伸運動。
做完例子之後，就想到如果是四個點，五個點，怎麼樣。
就改寫了一下程式碼，把點的數目變數化。最終的效果是能實現各點最終的伸展運動到平衡，可是點之間的連線不是很好看，有些是交叉的。
於是就想著能不能優化這一塊。
旋轉連線前面例子裡面的點，都是隨機位置，所以連線不可控。所以想先從這塊著手。
先以某點為參照點，得到其他點相對於這個點的角度。
然後再依照角度從小到大的去連結這些點，這樣就能畫出一個正常的多邊形了。
大致實現程式碼如下：
let balls = [];let ballNum = 6;let firstBall = null;while(ballNum--) { let ball = new Ball(20, parseColor(Math.random() * 0xffffff)) ball.x = Math.random(Math.random() * 0xffffff)) ball.x = Math.random( ) * width; ball.y = Math.random() * height; balls.push(ball) if (!firstBall) { firstBall = ball ball.angle = 0 } else { const dx = ball.x - firstBall.x, dy = ball.y - firstBall.y; ball.angle = Math.atan2(dy, dx); }}// 試著讓球連線是一個正多邊形balls = balls.sort((ballA, ballB) => { return ballA.angle - ballB.angle})這樣在最後繪製連線的時候，遍歷陣列就能依照角度從小到大來繪製了。
效果如下：
這樣是能極大的減少交叉線的情況，可還是無法完全避免。
接下來，想嘗試優化這個方案，例如angle用Math.abs來取正，或是每個點都找夾角最小的點來連線。可是結果都不行，無法避免交叉線。
基於中心點旋轉後面又想到一個思路，如果能確定多邊形的中心點，那麼分別計算所有點相對於中心點的夾角，就能以順時針或者逆時針來連接這些點。
但在網路上找了半天，所有點演算法裡面，都是要求有一系列依照某個時針順序排列的點。
可是如果我有這些點，就已經能畫出多邊形了。只好放棄
X軸兩極點分割無奈之下只好找Google，然後就發現了知乎上的一個答案挺好的：如何將平面上無序的一組點連成一個簡單多邊形？
具體演算法描述，大家看那個答案就好，我就不贅述了。
不過在連接上鍊下鍊的時候，其實只要確保上鍊是X軸降序連接，下鍊是X軸升序連接即可（以逆時針方向繪製）。至於X軸相同的點，不管是優先Y軸大的還是小的都可以。
實現的時候，是嚴格按照答案裡面的演算法實現的。
在判斷一個點是屬於上鍊還是下鏈的時候，一開始想的是基於兩點決定直線的函數方程，再引入點的座標來計算。不過後面想到，所有的點都以最左邊的極點來計算斜角，然後根據角度大小來劃分，視覺上更好理解。
大致程式碼如下：
let balls = [];let tempBalls = [];let ballNum = 6;let isDragingBall = false;while(ballNum--) { let ball = new Ball(10, parseColor(Math.random() * 0xffffffff)) ball. x = Math.random() * width; ball.y = Math.random() * height; tempBalls.push(ball)}// 讓點依X軸升序排序tempBalls = tempBalls.sort((ballA, ballB) => { return ballA.x - ballB.x})// 找X軸左右極點let firstBall = tempBalls[0], lastBall = tempBalls[tempBalls.length -1];let smallXBalls = tempBalls.filter(ball => ball.x === firstBall.x), bigXBalls = tempBalls.filter(ball => ball.x === lastBall.x)// 處理左右極點有多個的情況if (smallXBalls .length > 1) { smallXBalls.sort((ballA, ballB) => { return ballB.y - ballA.y })}if (bigXBalls.length > 1) { bigXBalls.sort((ballA, ballB) => { return ballB.y - ballA.y })}firstBall = smallXBalls[0]lastBall = bigXBalls[0]// 取得極點連線的角度let splitLineAngle = Math.atan2(lastBall.y - firstBall.y, lastBall.x - firstBall.x);let upperBalls = [], lowerBalls = [];// 所有其他點跟firstBall計算角度// 大於splitLineAngle的都是下鍊// 其他是上鍊tempBalls. forEach(ball => { if (ball === firstBall || ball === lastBall) { return false } let angle = Math.atan2(ball.y - firstBall.y, ball.x - firstBall.x); if (angle > splitLineAngle) { lowerBalls.push(ball) } else { upperBalls.push(ball) }})/ / 處理X軸相同情況的排序lowerBalls = lowerBalls.sort((ballA, ballB) => { if (ballA.x !== ballB.x) { return ballA.x - ballB.x } return ballB.y - ballA.y})upperBalls = upperBalls.sort((ballA, ballB) => { if (ballA. x !== ballB.x) { return ballB.x - ballA.x } return ballB.y - ballB.x})// 逆時針連接所有的點balls = [firstBall].concat(lowerBalls, [lastBall], upperBalls)balls = balls.map((ball, i) => { ball.text = i + 1 ; return ball})最終返回的balls，就是按逆時針排序的多邊形的點了。
效果如下：
各球的內部狀態如下：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。