教你如何在微信小程序中用画布绘制天气折线图（附代码）（小程序天气预报源代码）

如何在微信小程序中绘制天气折线图？下面的文章将介绍在微信小程序中用画布绘制天气线图的方法，并使用三阶贝塞尔曲线拟合温度点，使其平滑并在曲线底部具有背景颜色。希望对你有帮助！

折线渲染:

自定义组件行-图表

组件（{ externalClasses:

。滚动{位置:相对；高度:150px宽度:100%；}.每小时{ display:flex；高度:150px位置:绝对；top:0；}.小时》视图{ min -宽度:3.5emtext-align:居中；}.折线图{//折线图绝对位于底部位置:绝对；底部:0；}这里使用绝对定位实际上是为了模拟墨迹天气的折线图和区块中每一天的效果，因此每小时应该与scroll-view一样高，并且需要定位画布。

主要是不知道墨迹天气是怎么实现的，只能暂时做一下。

三阶贝塞尔曲线渲染

Emmm，好像不太顺利。

计算控制点

先写一个点类。

类点{构造函数（x，y）{ this . x = x；this.y = y}}你可以通过上面的网站了解三阶贝塞尔曲线各个参数的含义。

也就是说，使用bezierCurveTo时，最后一个点是下一个点，前两个是控制点。

只是浓缩它

其中a和b可以是任何正数。

因此，定义了一种方法来计算某一点的控制点A和B。

/* * *计算贝塞尔曲线在当前点的控制点* @param {Point}上一点* @param {Point}当前点:当前点* @param {Point}下一点1:下一点* @param {Point}下一点2:下一个下一点* @param {Number} scale:系数*/calcbeziercontrolpoints（上一点，当前点，下一点1，下一点2，scale = 0.25）{ let x = current Point . x+scale *（下一点1.x 3设y = current point . y+scale *（next point 1 . y -previous point . y）；const controlPointA =新点（x，y）；//控制点a x = next point 1 . x -scale *（next point 2 . x -current point . x）；y = next point 1 . y -scale *（next point 2 . y -current point . y）；const controlPointB =新点（x，y）；//控制点breturn {controlpointa，control pointb }；}这里scale是a和b，但它们的值相等。

但是第一个点没有前一个点，倒数第二个点没有后一个点。

因此，当点是第一个点时，使用currentPoint而不是previousPoint。

当倒数第二个点时，使用nextPoint1而不是nextPoint2。

至于最后一个点，你不需要做任何事情，因为bezierCurveTo的第三个参数是下一个点，你只需要提供坐标来连接它，你不需要计算控制点。

因此，绘制三阶贝塞尔曲线的方法:

/* * *绘制贝塞尔曲线* ctx.bezierCurveTo（控制点1、控制点2、当前点）；*/drawBezierLine（CTX，data，options）{ const { startX，diffX，baseY，diffY，Min } = optionsCTX . begin path（）；//首先移动到第一个点CTX。move to（startx，base y-（data【0】-min）* diff）；data . foreach（（e，I）=》{ let cur point，prePoint，nextPoint1，nextPoint2，x，y；//当前点x = startX+diffX * I；y = baseY -（E-Min）* diffY；curPoint =新点（x，y）；//上一点x = startX+diffX *（I -1）；y = baseY -（data【I -1】-Min）* diffY；prePoint =新点（x，y）；//下一个点x = startX+diffX *（I+1）；y = baseY -（data【I+1】-Min）* diffY；nextPoint1 =新点（x，y）；//下一个点x = startX+diffX *（I+2）；y = baseY -（data【I+2】-Min）* diffY；nextPoint2 =新点（x，y）；If（I = = = 0）{//如果是第一个点，前一个点将被当前prePoint = curPoint替换；} else If（I = = = data . length -2）{//如果是倒数第二个点，则下一个点将被下一个点替换:next point 2 = next point 1；} else if（I = = = data . length -1）{//最后一点直接退出return} const { controlPointA，control pointb } = this . calcbeziercontrolpoints（prePoint，curPoint，nextPoint1，next point 2）；ctx.bezierCurveTo（控制点A.x，控制点A.y，控制点B.x，控制点B.y，下一个点1.x，下一个点1 . y）；});CTX . stroke（）；}、【相关学习推荐:小程序开发教程】

以上是教你如何在微信小程序中用画布绘制天气折线图（带代码）的详细内容。更多资讯请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 介绍了微信小程序画布开发的注意事项。
• 使用applet canvas编写一个简单的图片应用程序（applet canvas生成海报）
• 通过实例了解如何在小程序中实现画布拖动功能（微信小程序画布插件）
• 如何使用小程序的画布绘制二维码？（如何利用小程序的画布绘制二维码图形）
• 本文介绍了微信小程序canvas开发中的注意事项。

本文由主机参考刊发，转载请注明：教你如何在微信小程序中用画布绘制天气折线图（附代码）（小程序天气预报源代码） https://zhujicankao.com/104394.html