今天继续更新在微信小程序上用canvas画价格走势图。上一篇讲了图上主要的部分，也就是折线图的绘制。假如我在我的绘图主函数中只调用了绘制折线图的函数，效果是这样的：

可以说除了作为坐标背景的<image>和折线图本身，这个图显得空落落的。现在我们来在这个图上绘制拐点。

一、绘制出每个拐点的小圆

我们都可以很明显地看到折线图上的拐点，现在我们在拐点处绘制小圆，让拐点变得更明显。

首先，要回答一个问题——怎么才能知道拐点的坐标？显然，拐点坐标并不是一开始就能得到的，而是绘制折线图的过程中计算出来的，所以我在绘制折线图里的函数中收集拐点，折线图画完后，拐点信息也收集完了，最后把拐点信息返回给主函数。所以，我们现在主函数调用完绘制折线图的函数，就能从返回值中获取拐点数据了。可以像我这样：

 /*** 这个是绘图的主函数* @param {*} arr 每个值组成的数组* @param {*} xLeft 折线图最左边与画布边界的距离，单位是px，默认为0* @param {*} xRight 折线图最右边与画布边界的距离，单位是px，默认为0* @param {*} yBottom 折线图最下边与画布边界的距离，单位是px，默认为0* @param {*} yTop 折线图最上边与画布边界的距离，单位是px，默认为0* @param {*} specialIndex 特殊点的下标，默认为-1（默认没有特殊点）*/function draw(arr, xLeft = 0, xRight = 0, yBottom = 0, yTop = 0, specialIndex = -1) {// 获取上下文对象const context = wx.createCanvasContext('canvas');// 获取画布的宽高const width = _this.data.canvasWidth;const height = _this.data.canvasHeight;// 记录图形的边界const borderInfo = { xLeft, xRight, yBottom, yTop }// 1.画折线图，传入数据，主色调，画布宽高，图形边界和特殊点位置// 获得返回的拐点数组const pointArray = drawFoldLine(context, arr, mainColor, width, height, borderInfo, specialIndex)// 主函数的其他代码...}

接下来就比较简单了，遍历拐点数组，把每个拐点的x和y坐标拿到，就以此为圆心，调用context.arc()来画圆（参数为圆心x，y，半径大小，圆弧的起点和终点，是否逆时针绘制），填充白色（为了挡住拐点处的折线），描上橙色的边。我再来说一个点，特殊点的位置画出来的圆半径更大、线条更粗，而其他的圆半径和线条正常，这个区别要怎么处理呢？我会在调用arc方法之前，先判断当前是否是特殊点，如果是，则让半径乘以1.8再来画圆，否则不修改半径，直接画圆。

二、只有小圆带有阴影

仅仅画好了每个拐点处的小圆本身，还不够，我看到UI设计图上，每个小圆是有阴影的。现在我们来为小圆画上阴影。

现在又要回答一个问题，canvas要怎么绘制阴影呢？我查阅文档之后给出了我的回答——使用context.setShadow方法，前两个参数表示阴影在x和y方向上的平移，第三个参数表示阴影的模糊半径，第四个参数是阴影的颜色。OK，那么我在调用context.arc画圆之前就调用context.setShadow吧，so easy！效果如下图所示，小圆上有向右向下的半透明红色阴影。

但是，还有一个不容忽视的问题！我在后来绘制价格文字的时候傻眼了，因为文字也带上了阴影！这该怎么办呢？我找遍了文档，也没有找到取消阴影的API，也就是说，context.setShadow调用后，后续画出来的东西都会带有这样的阴影！可我们的需求并不是这样的呀。文字上并没有带有红色的阴影。这该怎么办呢？

某部动画片里有一句话叫“用魔法才能打败魔法”，我觉得可以用在这里——“用阴影才能打败阴影”，换句话说，只有设置成那样的阴影，才能不在后续的绘图中显示这样的阴影。我还是没说明白吗？——如果你把“那样”的阴影设置成“不偏移，不模糊”的阴影，那么阴影是不是就与我们绘制出来的图像完全重合，无法被看见了呢？这就是我去掉阴影的办法。（此处非常感谢我的一位同事，是他想到了这个办法。）

所以，综上所述，我们应该在绘制小圆之前，调用context.setShadow，设置出这样的红色阴影，然后调用context.arc画出小圆，之后再次调用context.setShadow把阴影设为“不偏移，不模糊”，再去绘制其他东西，就可以满足需求了。

最后，来贴一下我绘制拐点的函数的代码：

  /*** 绘制拐点处的小圆* @param {*} context 上下文对象* @param {*} color 使用的颜色* @param {*} center 圆心的信息* @param {*} r 半径* @param {*} isSpecial 是否特殊点*/function drawInflectionPoint(context, color, center, r, isSpecial) {context.beginPath();// 特殊情况半径更大，线条更粗if (isSpecial) {r = r * 1.8;context.lineWidth = 6 * _this.data.toPx;} else {context.lineWidth = 4 * _this.data.toPx;}// 设置阴影，再画圆context.setShadow(1, 2, 3, color);context.arc(center.x, center.y, r * _this.data.toPx, 0, 2 * Math.PI);context.fillStyle = "#ffffff";context.fill();context.stroke();// draw传入true，保留上一次的结果context.draw(true);context.closePath();// 去掉阴影，再画其他的context.setShadow(0, 0, 0, color);}

非常感谢大家的阅读！下一篇准备写这个图里的价格和拼团人数，重点应该是最低价那里的胶囊图。

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

微信小程序canvas画价格走势图（一）
今天是周二,今天来开一个新坑吧.最近花了整整两个工作日的时间画了一个微信小程序端的价格走势图,现在来分享一下经验. 因为内容比较多,所以打算这次分为多篇博客来写,这样一篇博客的内容就会更少.更清晰.下 ...
微信小程序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画价格走势图（三）相关推荐

最新文章

热门文章