起因
今天在學(xué)習(xí)《HTML5+Javascript動畫基礎(chǔ)》這本書的時候，在第八章的第三節(jié)講到如何用三個彈簧連接三個點(diǎn)來做拉伸運(yùn)動。
在做完例子之后，就想到如果是四個點(diǎn)，五個點(diǎn)，怎么樣。
就改寫了一下代碼，把點(diǎn)的數(shù)目變量化。最終的效果是能實(shí)現(xiàn)各個點(diǎn)最終的拉伸運(yùn)動到平衡，可是點(diǎn)之間的連線不是很好看，有些是交叉的。
于是就想著能不能優(yōu)化這一塊。
旋轉(zhuǎn)連線
前面例子里面的點(diǎn)，都是隨機(jī)位置，所以連線不可控。所以想先從這塊著手。
先以某一個點(diǎn)為參照點(diǎn)，獲得其他點(diǎn)相對于這個點(diǎn)的角度。
然后按照角度從小到大的去連接這些點(diǎn)，這樣就能畫出一個正常的多邊形了。
大致實(shí)現(xiàn)代碼如下：
let balls = [];
let ballNum = 6;
let firstBall = null;
while(ballNum--) {
let ball = new Ball(20, parseColor(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
})
這樣在最后繪制連線的時候，遍歷數(shù)組就能按照角度從小到大來繪制了。
效果如下：
這樣是能極大的減少交叉線的情況，可還是無法完全避免。
接下來，想嘗試優(yōu)化這個方案，比如angle用Math.abs來取正，或者每一個點(diǎn)都找夾角最小的點(diǎn)來連線?？墒墙Y(jié)果都不行，無法避免交叉線。
基于中心點(diǎn)旋轉(zhuǎn)
后面又想到一個思路，如果能確定多邊形的中心點(diǎn)，那么分別計(jì)算所有點(diǎn)相對于中心點(diǎn)的夾角，就能以順時針或者逆時針來連接這些點(diǎn)。
可是在網(wǎng)上找了半天，所有點(diǎn)算法里面，都是要求有一系列按某個時針順序排列的點(diǎn)。
可是如果我有這些點(diǎn)，就已經(jīng)能繪制多邊形了。只好放棄
X軸兩極點(diǎn)分割
無奈之下只好找Google，然后就發(fā)現(xiàn)了知乎上的一個答案挺好的： 如何將平面上無序的一組點(diǎn)連成一個簡單多邊形？
具體算法描述，大家看那個答案就好，我就不贅述了。
不過在連接上鏈和下鏈的時候，其實(shí)只要保證上鏈?zhǔn)荴軸降序連接，下鏈?zhǔn)荴軸升序連接即可（以逆時針方向繪制）。至于X軸相同的點(diǎn)，不管是優(yōu)先Y軸大的還是小的都可以。
實(shí)現(xiàn)的時候，是嚴(yán)格按照答案里面的算法實(shí)現(xiàn)的。
在判斷一個點(diǎn)是屬于上鏈還是下鏈的時候，一開始想的是基于兩點(diǎn)確定直線的函數(shù)方程，再引入點(diǎn)的坐標(biāo)來計(jì)算。不過后面想到，所有的點(diǎn)都以最左邊的極點(diǎn)來計(jì)算斜角，然后根據(jù)角度大小來劃分，視覺上更好理解。
大致代碼如下：
let balls = [];
let tempBalls = [];
let ballNum = 6;
let isDragingBall = false;
while(ballNum--) {
let ball = new Ball(10, parseColor(Math.random() * 0xffffff))
ball.x = Math.random() * width;
ball.y = Math.random() * height;
tempBalls.push(ball)
}
// 讓點(diǎn)按X軸升序排序
tempBalls = tempBalls.sort((ballA, ballB) => {
return ballA.x - ballB.x
})
// 找X軸左右極點(diǎn)
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)
// 處理左右極點(diǎn)有多個的情況
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]
// 獲得極點(diǎn)連線的角度
let splitLineAngle = Math.atan2(lastBall.y - firstBall.y, lastBall.x - firstBall.x);
let upperBalls = [],
lowerBalls = [];
// 所有其他點(diǎn)跟firstBall計(jì)算角度
// 大于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
})
// 逆時針連接所有的點(diǎn)
balls = [firstBall].concat(lowerBalls, [lastBall], upperBalls)
balls = balls.map((ball, i) => {
ball.text = i + 1;
return ball
})
最終返回的balls，就是按逆時針排序的多邊形的點(diǎn)了。
效果如下：
各個球的內(nèi)部狀態(tài)如下：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
