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


Posted in Javascript onJanuary 12, 2017

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

实现效果图:

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

前言:

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

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

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

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

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

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

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

没想到告别高中数学那么多年,凭着一点点的记忆,花了一上午,强行搞了一个公式出来,我想如果我还是高中的数学水平的话,估计也就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: 数据的组织形式可以多种多样,可以是数组,可以是二位数组,也可以是对象,这并不是最主要的点,只要能正确处理就行了

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

Javascript 相关文章推荐
web前端开发也需要日志
Dec 09 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
基于jquery实现全屏滚动效果
Nov 26 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
JS实现仿百度文库评分功能
Jan 12 #Javascript
移动端基础事件总结与应用
Jan 12 #Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 #Javascript
简单的渐变轮播插件
Jan 12 #Javascript
那些精彩的JavaScript代码片段
Jan 12 #Javascript
JavaScript实现星级评分
Jan 12 #Javascript
angular2倒计时组件使用详解
Jan 12 #Javascript
You might like
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
深入探寻javascript定时器
2015/01/02 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
ES6的新特性概览
2016/03/10 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
不可错过的十本Python好书
2017/07/06 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
pandas带有重复索引操作方法
2018/06/08 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
Python作用域与名字空间原理详解
2020/03/21 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
京东国际站:JOYBUY
2017/11/23 全球购物
十八大演讲稿
2014/05/22 职场文书
竞选学委演讲稿
2014/09/13 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
团员年度个人总结
2015/02/26 职场文书
二审答辩状范文
2015/05/22 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python
Python实现生成bmp图像的方法
2021/06/13 Python
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技
win10如何开启ahci模式?win10开启ahci模式详细操作教程
2022/07/23 数码科技