首頁 > web前端 > H5教程 > 主體

如何在canvas裡面基於隨機點繪製一個多邊形

不言
發布: 2018-06-14 09:19:43
原創
2702 人瀏覽過

這篇文章主要介紹了canvas裡面如何基於隨機點繪製一個多邊形的方法的相關資料,內容挺不錯的,現在分享給大家,也給大家做個參考。

起因

今天在學習《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() * 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() * 0xffffff))
  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,就是以逆時針排序的多邊形的點了。

效果如下:

各球的內部狀態如下:

 

##以上是本文的全部內容,希望對大家的學習有幫助,更多相關內容請關注PHP中文網!

相關推薦:

使用html5 canvas封裝一個echarts實作不了的餅圖

HTML5的Canvas實作繪製曲線的方法

#

以上是如何在canvas裡面基於隨機點繪製一個多邊形的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板