微信小程序使用canvas制作K线实例详解

发布时间：2020-12-14 20:22:05 所属栏目：资源来源：网络整理

导读：微信小程序使用canvas制作K线实现效果图：前言：我们目的是想要一条平滑的曲线来表示均线等，而不是一条转折点明显的折线。因此还得继续探索api。我们发现，在canvas API中，能够画出曲线的有2个这两个api都是通过贝塞尔曲线来绘制路径。好在学习PS的时

微信小程序使用canvas制作K线

实现效果图：

前言：

我们目的是想要一条平滑的曲线来表示均线等，而不是一条转折点明显的折线。因此还得继续探索api。我们发现，在canvas API中，能够画出曲线的有2个

这两个api都是通过贝塞尔曲线来绘制路径。好在学习PS的时候，对贝塞尔曲线的具体表现也是有一定的熟练程度的，因此知道要确定一条由多个点组成的曲线路径，每一个转折点都得有2个控制点来控制曲线的表现

而在曲线的起点和终点，就只能有一个控制点了。因此，我们在绘制起点和终点时，得使用quadraticCurveTo，绘制中间的点，则使用beZierCurveTo。

现在的难点是，如何通过已知的要经过的点，计算出他们的控制点？

为了找到一个行之有效的公式，于是草稿走起。画了一个只有自己看得懂的草稿。

没想到告别高中数学那么多年，凭着一点点的记忆，花了一上午，强行搞了一个公式出来，我想如果我还是高中的数学水平的话，估计也就10分钟就能怼出来了，汗！

不知道大家还记不记得切线的概念，如果我们要画一条贝塞尔曲线，M[i-1]是起点，M[i]是终点，另外的两个控制点为A1,A2，这2个控制点一定会在某一个曲面的切线上，而切线则可以由三个点来确定，如我的草稿中，最上面橘黄色的线条就是切线，我们只需要在这条切线上，随意取2个点，分别作为前后曲线的控制点即可

于是，经过我长时间的思考，总结了一个公式如下

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个控制点，因此我就在点集合的前后各加了一个随意自定自定的点，在实际遍历的时候忽略他们即可。

整理了思路，具体实现如下

{ 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,32,60,44,77,122,133,89,156,128,143,111,101,132,99,98,62,74,42,55]
})

oh yeah! 效果还可以，以后再也不用担心曲线的绘制了，理我们的k线图又近了一步

ps: 数据的组织形式可以多种多样，可以是数组，可以是二位数组，也可以是对象，这并不是最主要的点，只要能正确处理就行了

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

微信小程序 使用canvas制作K线实例详解

微信小程序 使用canvas制作K线

微信小程序使用canvas制作K线实例详解

微信小程序使用canvas制作K线