VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云最新优惠促销活动
jtti最新优惠促销活动

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

locvps
主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

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

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

折线渲染:

1.gif

自定义组件行-图表

组件({ externalClasses:

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

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

3.gif

三阶贝塞尔曲线渲染

4.gif

Emmm,好像不太顺利。

计算控制点

先写一个点类。

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

5.gif

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

只是浓缩它

6.gif

其中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。

7.gif

至于最后一个点,你不需要做任何事情,因为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();}、【相关学习推荐:小程序开发教程】

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

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

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

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 教你如何在微信小程序中用画布绘制天气折线图(附代码)(小程序天气预报源代码)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!