微信小程序 使用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 相关文章推荐
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
js使用eval解析json(js中使用json)
Jan 17 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
垃圾回收器的相关知识点总结
May 13 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
JS原型与继承操作示例
May 09 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 header函数分析详解
2011/08/06 PHP
CURL状态码列表(详细)
2013/06/27 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
深入理解js promise chain
2016/05/05 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
vue中activated的用法
2021/01/03 Vue.js
基于python的汉字转GBK码实现代码
2012/02/19 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
Python random模块用法解析及简单示例
2017/12/18 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
毕业生医学检验求职信
2013/10/16 职场文书
化工专业应届生求职信
2013/11/08 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
React中的Context应用场景分析
2021/06/11 Javascript