微信小程式 使用canvas製作K線實例詳解

前言：

我們目的是想要一條平滑的曲線來表示均線等，而不是一條轉折點明顯的折線。因此還得繼續探索api。我們發現，在canvas API中，能夠畫出曲線的有2個

beZierCurveTo(num1, num2, num3, num4, x, y)
quadraticCurveTo(num1, num2, x, y)

這兩個api都是透過貝塞爾曲線來繪製路徑。還好學習PS的時候，對貝塞爾曲線的具體表現也是有一定的熟練程度的，因此知道要確定一條由多個點組成的曲線路徑，每一個轉折點都得有2個控制點來控製曲線的表現

而在曲線的起點和終點，就只能有一個控制點了。因此，我們在繪製起點和終點時，得使用quadraticCurveTo，繪製中間的點，則使用beZierCurveTo。

現在的困難是，如何透過已知的要經過的點，計算出他們的控制點？

為了找到一個行之有效的公式，於是草稿走起。畫了一個只有自己看得懂的草稿。

沒想到告別高中數學那麼多年，憑著一點點的記憶，花了一上午，強行搞了一個公式出來，我想如果我還是高中的數學水平的話，估計也就10分鐘就能懟出來了，汗！

不知道大家還記不記得切線的概念，如果我們要畫一條貝塞爾曲線，M[i-1]是起點，M[i]是終點，另外的兩個控制點為A1, A2，這2個控制點一定會在某一個曲面的切線上，而切線則可以由三個點來確定，如我的草稿中，最上面橘黃色的線條就是切線，我們只需要在這條切線上，隨意取2個點，分別作為前後曲線的控制點即可

於是，經過我長時間的思考，總結了一個公式如下

A1[M[i-1][0] + a*(M[i][0] - M[i-2][0]), M[i-1][1] + b*(M[i][1] - M[i-2][1])]
 
A2[M[i][0] - b*(M[i+1][0] - M[i-1][0]), M[i][1] - b*(M[i+1][1] - M[i-1][1])]

其中係數a, b是一個根據情況我隨意取的一個值，我試過，建議在0.3附近取值並調試，試試看具體效果再確定

第一個點和最後一點因為無法通過這種方式取得2個控制點，因此我就在點集合的前後各加了一個隨意自定自定的點，在實際遍歷的時候忽略他們即可。

整理了思路，具體實現如下

bezierLine (canvasId, options) {
let windowWidth = 0
wx.getSystemInfo({
 success (result) {
  windowWidth = result.windowWidth
 }
})
let a = windowWidth / (options.xAxis.length-1)
let data = []
options.xAxis.map((item, i) => {
 data.push([i * a, 200 - options.yAxis[i]])
})
data.unshift(data[0])
data.push(data[data.length - 1])
 
const ctx = wx.createCanvasContext(canvasId)
ctx.beginPath()
data.map((item, i) => {
 const a = 0.25
 const b = 0.25
 if (i == 0 || i == data.length - 1) {
  // do nothing
 } else if (i == 1) {
  ctx.moveTo(item[0], item[1])
 } else {
  const a1 = data[i - 1][0] + a * (data[i][0] - data[i - 2][0])
  const a2 = data[i - 1][1] + b * (data[i][1] - data[i - 2][1])
  const b1 = data[i][0] - b * (data[i + 1][0] - data[i - 1][0])
  const b2 = data[i][1] - b * (data[i + 1][1] - data[i - 1][1])
  ctx.bezierCurveTo(a1, a2, b1, b2, item[0], item[1])
 }
})
ctx.setLineWidth(1)
ctx.setStrokeStyle('red')
ctx.stroke()
ctx.draw()
}
// 在onLoad中调用
this.bezierLine('stage', {
 xAxis: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
 yAxis: [11, 33, 22, 32, 14, 15, 20, 60, 23, 44, 77, 122, 133, 89, 156, 122,128, 143, 111, 101, 132, 99, 98, 44, 62, 74, 111, 13, 42, 55]
})

oh yeah! 效果還可以，以後再也不用擔心曲線的繪製了，理我們的k線圖又近了一步

ps: 數據的組織形式可以多種多樣，可以是數組，可以是二位數組，也可以是對象，這並不是最主要的點，只要能正確處理就行了

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

更多微信小程式 使用canvas製作K線實例詳解相關文章請關注PHP中文網！