canvas里面如何基于隨機(jī)點(diǎn)繪制一個(gè)多邊形的方法

2024-09-05 07:22:32

字體：大中小

供稿：網(wǎng)友

起因

今天在學(xué)習(xí)《HTML5+Javascript動(dòng)畫基礎(chǔ)》這本書的時(shí)候，在第八章的第三節(jié)講到如何用三個(gè)彈簧連接三個(gè)點(diǎn)來(lái)做拉伸運(yùn)動(dòng)。

在做完例子之后，就想到如果是四個(gè)點(diǎn)，五個(gè)點(diǎn)，怎么樣。

就改寫了一下代碼，把點(diǎn)的數(shù)目變量化。最終的效果是能實(shí)現(xiàn)各個(gè)點(diǎn)最終的拉伸運(yùn)動(dòng)到平衡，可是點(diǎn)之間的連線不是很好看，有些是交叉的。

于是就想著能不能優(yōu)化這一塊。

旋轉(zhuǎn)連線

前面例子里面的點(diǎn)，都是隨機(jī)位置，所以連線不可控。所以想先從這塊著手。

先以某一個(gè)點(diǎn)為參照點(diǎn)，獲得其他點(diǎn)相對(duì)于這個(gè)點(diǎn)的角度。

然后按照角度從小到大的去連接這些點(diǎn)，這樣就能畫出一個(gè)正常的多邊形了。

大致實(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);  }}// 嘗試讓球連線是一個(gè)正多邊形balls = balls.sort((ballA, ballB) => {  return ballA.angle - ballB.angle})

這樣在最后繪制連線的時(shí)候，遍歷數(shù)組就能按照角度從小到大來(lái)繪制了。

效果如下：

這樣是能極大的減少交叉線的情況，可還是無(wú)法完全避免。

接下來(lái)，想嘗試優(yōu)化這個(gè)方案，比如angle用Math.abs來(lái)取正，或者每一個(gè)點(diǎn)都找夾角最小的點(diǎn)來(lái)連線。可是結(jié)果都不行，無(wú)法避免交叉線。

基于中心點(diǎn)旋轉(zhuǎn)

后面又想到一個(gè)思路，如果能確定多邊形的中心點(diǎn)，那么分別計(jì)算所有點(diǎn)相對(duì)于中心點(diǎn)的夾角，就能以順時(shí)針或者逆時(shí)針來(lái)連接這些點(diǎn)。

可是在網(wǎng)上找了半天，所有點(diǎn)算法里面，都是要求有一系列按某個(gè)時(shí)針順序排列的點(diǎn)。

可是如果我有這些點(diǎn)，就已經(jīng)能繪制多邊形了。只好放棄

X軸兩極點(diǎn)分割

無(wú)奈之下只好找Google，然后就發(fā)現(xiàn)了知乎上的一個(gè)答案挺好的：如何將平面上無(wú)序的一組點(diǎn)連成一個(gè)簡(jiǎn)單多邊形？

具體算法描述，大家看那個(gè)答案就好，我就不贅述了。

不過(guò)在連接上鏈和下鏈的時(shí)候，其實(shí)只要保證上鏈?zhǔn)荴軸降序連接，下鏈?zhǔn)荴軸升序連接即可（以逆時(shí)針?lè)较蚶L制）。至于X軸相同的點(diǎn)，不管是優(yōu)先Y軸大的還是小的都可以。

實(shí)現(xiàn)的時(shí)候，是嚴(yán)格按照答案里面的算法實(shí)現(xiàn)的。

在判斷一個(gè)點(diǎn)是屬于上鏈還是下鏈的時(shí)候，一開始想的是基于兩點(diǎn)確定直線的函數(shù)方程，再引入點(diǎn)的坐標(biāo)來(lái)計(jì)算。不過(guò)后面想到，所有的點(diǎn)都以最左邊的極點(diǎn)來(lái)計(jì)算斜角，然后根據(jù)角度大小來(lái)劃分，視覺上更好理解。

大致代碼如下：

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)有多個(gè)的情況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})// 逆時(shí)針連接所有的點(diǎn)balls = [firstBall].concat(lowerBalls, [lastBall], upperBalls)balls = balls.map((ball, i) => {  ball.text = i + 1;  return ball})

最終返回的balls，就是按逆時(shí)針排序的多邊形的點(diǎn)了。

效果如下：