今天是周二，今天来开一个新坑吧。最近花了整整两个工作日的时间画了一个微信小程序端的价格走势图，现在来分享一下经验。

因为内容比较多，所以打算这次分为多篇博客来写，这样一篇博客的内容就会更少、更清晰。下一篇博客也不用等到下周二才来发布。

OK，今天第一篇谈的主要是目标和效果图，以及我对这个需求一开始提出的疑问，还有完成这个需求的大致步骤，具体每个步骤的细节就留到后面几篇再来说，最后一篇会贴上完整的代码。如果有遇到类似需求或者想学习这个代码的小伙伴可以关注一下我，这一篇只是抛砖引玉。

一、目标和效果图

首先来看看，这个需求的目标。

UI设计图上多了这个图，旁边还有一个草图，我觉得客户的需求就是要在给出一个这样的价格曲线、日期和走势的情况下，显示出对应的价格走势图。

我做出来的最终效果是这样的：

可以看出，大致的效果得到了还原，虽然不能做到100%还原，但是已经可以通过给定的数据调用函数来生成对应的图了。做的过程中我没有使用任何框架（本来如果用uni-app做小程序的话，我是可以使用uchart来绘图的），只是用微信小程序的canvas来自己画图，可以说效果比较朴素而粗糙。

二、我对这个需求的疑问

一开始我也不是很确定是否真的要用canvas绘图，然后我问了我同事，他们讨论后，得到的结论是，虽然每个商品的数据不同，但是客户并不打算准备好对应的图来上传，只是给出数据，要显示出对应的走势图。那就只能用canvas了。

说实话，我之前虽然学过canvas，但是我基础很差，对它没什么好感，觉得不够灵活，画起来难度大，只知道它很适合画图表之类东西，也能被大佬画出很神奇的东西。但现在是得使用它了，我得靠着之前的基础和查阅文档来完成。

所以我提出了这样的几个疑问，我就是从这些疑问出发，去找了资料，才能开始做这个东西的——1.如何用canvas画折线图？2.微信小程序的布局，我使用的单位一直是rpx，但是canvas里面绘图用的单位是px，要怎么转换这两个单位呢？3.微信小程序使用canvas绘图与在H5中使用canvas有什么不同呢？4.用canvas画圆，画直线很简单，胶囊形要怎么画？5.canvas要怎么绘制阴影？6.canvas怎么知道一段文字写出来有多宽呢？怎样保证文字水平居中？

以上的每个问题后来我都找到了答案，把这些问题展开，一点一点解决，最终形成了这个作品。

三、实现的大致步骤

现在来简单谈谈实现这个效果的大致步骤。

1. 首先当然是准备好对应的容器<view>和<canvas>，还有这里的背景图（坐标轴的图片）。把背景图定位到下层，上层放的是未脱离标准流的<canvas>。

2. 准备好数据。这里的数据包括展示在图上的价格、人数、日期等数据，还有色调，canvas大小。

3. 使用数据，绘制出最基本的折线图。里面拐点坐标的计算是个难点。

4. 画好折线图后，就知道了拐点坐标。现在就在拐点的位置这里画上带阴影的小圆点。

5. 把小圆点对应的的拼团人数、价格数据写到旁边。

6. 注意把特殊情况特殊处理好，特殊情况的圆点更大，价格文字的样式也更复杂。

7. 画好折线图下方的刻度，写好对应刻度日期。

8.把原价和箭头图片放到画布上的适当位置。

9. 优化，把以上代码抽出主函数，按功能分割，有需要时被主函数调用。

好了，整体的思路可以这么划分。具体的实现过程、遇到的问题和解决方案就留到后面的博客来讲了。下一篇不出意外的话，是讲基本的折线图的绘制，会提到我认为微信小程序使用canvas需要注意的地方。

微信小程序canvas画价格走势图（一）相关推荐

微信小程序canvas画价格走势图（三）
今天继续更新在微信小程序上用canvas画价格走势图.上一篇讲了图上主要的部分,也就是折线图的绘制.假如我在我的绘图主函数中只调用了绘制折线图的函数,效果是这样的: 可以说除了作为坐标背景的<i ...
微信小程序canvas画价格走势图（六）
到上一篇,可以说,所有的工作已经完成了,那为什么还会有第六篇呢?因为,客户改需求了,UI设计图改了,我也就不得不改代码,画一个新的版本出来.我在大功告成,开始写第一篇的时候突然改的,我也就准备加一篇来 ...
微信小程序canvas画价格走势图（五）
最近比较忙,所以趁着今年的最后一个周末,来把最后两篇完结掉.这是倒数第二篇了,这一篇的内容很简单,讲的是细节的绘制,也就是底部的刻度线和日期的绘制,以及一个小小的总结. 目前我们完成了canvas的准 ...
【修复日常bug】微信小程序canvas画商品海报出现个别用户无法生成的情况
微信小程序,在使用canvas画海报的时候,会导致个别用户无法生成的情况,你们可以尝试把绘画某些块的代码注释掉再进行扫码调试,我前几天就遇到个别客户无法生成商品海报的情况,刚开始是以为上一个同事留的坑 ...
微信小程序canvas 画圆形带刻度进度条
.canvas_1{ position: absolute; width: 120rpx; height: 120rpx; background: rgba(255, 00, 0, 0.0); } & ...
微信小程序 —— canvas生成海报图与分享
整体思路获取手机屏幕大小去依据设计尺寸比例调整 -wx.getSystemInfo 网络图片.base64图片保存到到本地临时文件路径 canvas绘制图片 - wx.createCanvasCon ...
微信小程序canvas画图案列,实现生成头像并保存,小程序新版canvas变化,小程序中canvas注意事项
你一定见过很多制作头像的小程序,无论是国庆的红旗,圣诞的帽子,还是疫情的口罩,都可以用小程序生成应景的头像,那么具体的代码是怎么实现的呢?前些天帮别人做了一个生成姓氏头像的功能,里面的实现原理基本一致 ...
圆头像微信小程序绘图_微信小程序canvas画圆头像
wxml: wxss: canvas{ width:375px; height:100px } js const headImge = 'https://ss0.bdstatic.com/70cFvH ...
微信小程序--canvas 画海报转发好友下载本地
获取本地手机的屏幕宽高(宽高需要按照自己实际需求计算) toCanvas() {let that = thiswx.getSystemInfo({success: function(res) {con ...

微信小程序canvas画价格走势图（一）

一、目标和效果图

二、我对这个需求的疑问

三、实现的大致步骤

微信小程序canvas画价格走势图（一）相关推荐

最新文章

热门文章