如何在微信applet中绘制天气折线图？下面的文章将介绍在微信applet中使用canvas绘制天气折线图的方法，以及使用三阶贝塞尔曲线拟合温度点使其光滑。曲线底部有背景色。我希望它能帮助你！
折线效果图：
自定义组件 line-chart
<canvas type="2d" id="line" class="line-class" style="width:{{width}}px;height:{{height}}px" />Component({
externalClasses: ['line-class'],
properties: {
width: String,
height: String,
data: Array,
},
observers: {
width() {
// 这里监听 width 变化重绘 canvas
// 动态传入 width 这似乎是唯一的办法..
const query = this.createSelectorQuery();
query
.select('#line')
.fields({ node: true, size: true })
.exec(res => {
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
const width = res[0].width; // 画布宽度
const height = res[0].height; // 画布高度
console.log(`宽度: ${width}, 高度: ${height}`);
const dpr = wx.getSystemInfoSync().pixelRatio;
canvas.width = width * dpr;
canvas.height = height * dpr;
ctx.scale(dpr, dpr);
// 开始绘图
this.drawLine(ctx, width, height, this.data.data);
});
},
},
methods: {
drawLine(ctx, width, height, data) {
const Max = Math.max(...data);
const Min = Math.min(...data);
// 把 canvas 的宽度, 高度按一定规则平分
const startX = width / (data.length * 2), // 起点的横坐标 X
baseY = height * 0.9, // 基线纵坐标 Y
diffX = width / data.length,
diffY = (height * 0.7) / (Max - Min); // 高度预留 0.2 写温度
ctx.beginPath();
ctx.textAlign = 'center';
ctx.font = '13px Microsoft YaHei';
ctx.lineWidth = 2;
ctx.strokeStyle = '#ABDCFF';
// 画折线图的线
data.forEach((item, index) => {
const x = startX diffX * index,
y = baseY - (item - Min) * diffY;
ctx.fillText(`${item}°`, x, y - 10);
ctx.lineTo(x, y);
});
ctx.stroke();
// 绘制折线图背景
ctx.lineTo(startX (data.length - 1) * diffX, baseY); // 基线终点
ctx.lineTo(startX, baseY); // 基线起点
const lingrad = ctx.createLinearGradient(0, 0, 0, height * 0.7);
lingrad.addColorStop(0, 'rgba(255，255，255，0.9)');
lingrad.addColorStop(1, 'rgba(171,220,255,0)');
ctx.fillStyle = lingrad;
ctx.fill();
// 在折线图上画一个小点
ctx.beginPath();
data.forEach((item, index) => {
const x = startX diffX * index,
y = baseY - (item - Min) * diffY;
ctx.moveTo(x, y);
ctx.arc(x, y, 3, 0, 2 * Math.PI);
});
ctx.fillStyle = '#0396FF';
ctx.fill();
},
},
});data 就是温度数组，比如 [1, 2, ...]
因为我不知道有多少温度值，所以这里 width 动态传入
有一个小问题，就是宽度太大，真机不会显示。...
// 获取 scroll-view 的总宽度
wx.createSelectorQuery()
.select('.hourly')
.boundingClientRect(rect => {
this.setData({
scrollWidth: rect.right - rect.left,
});
})
.exec();<view class="title">小时概述</view>
<scroll-view scroll-x scroll-y class="scroll" show-scrollbar="{{false}}" enhanced="{{true}}">
<view class="hourly">
<view wx:for="{{time}}" wx:key="index">{{item}}</view>
</view>
<line-chart line-class="line" width="{{scrollWidth}}" height="100" data="{{temp}}" />
</scroll-view>这里写 scroll-x 和 scroll-y，不知道为什么会出现绝对定位偏移的问题
.scroll {
position: relative;
height: 150px;
width: 100%;
}
.hourly {
display: flex;
height: 150px;
position: absolute;
top: 0;
}
.hourly > view {
min-width: 3.5em;
text-align: center;
}
.line { // 折线图绝对定位到底部
position: absolute;
bottom: 0;
}在这里使用绝对定位实际上是为了模拟墨天气的折线图和每天在一个块内的效果，所以 hourly 要和 scroll-view 等高，canvas 需要定位
我不知道如何实现墨迹天气，所以我只能暂时这样做
贝塞尔曲线的三阶效果图
emmm，好像不是很光滑
计算控制点
首先写一个点类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}Canvas贝塞尔曲线绘制工具 (karlew.com)http://wx.karlew.com/canvas/bezier/
通过以上网站，我们可以知道三阶贝塞尔曲线各参数的意义
也就是使用 bezierCurveTo 最后一点是下一点，前两点是控制点
控制点的计算参考： 确定贝塞尔曲线控制点的方法 - 百度文库
https://wenku.baidu.com/view/c790f8d46bec0975f56.html
浓缩就是
这里的 a 和 b 可以是任何正数
因此，定义计算某一点的控制点 A 和 B 的方法
/**
* 计算当前贝塞尔曲线控制点
* @param {Point} previousPoint: 前一个点
* @param {Point} currentPoint: 当前点
* @param {Point} nextpointt1: 下一个点
* @param {Point} nextpoint2: 下下个点
* @param {Number} scale: 系数
*/
calcBezierControlPoints(
previousPoint,
currentPoint,
NextPoint1，
NextPoint2，
scale = 0.25
) {
let x = currentPoint.x scale * (nextPoint1.x - previousPoint.x);
let y = currentPoint.y scale * (nextPoint1.y - previousPoint.y);
const controlPointA = new Point(x, y); // 控制点 A
x = nextpointt1.x - scale * (nextPoint2.x - currentPoint.x);
y = nextpointt1.y - scale * (nextPoint2.y - currentPoint.y);
const controlPointB = new Point(x, y); // 控制点 B
return { controlPointA, controlPointB };
}这里 scale 就是 a 和 b，然而，相等于它们的值
但是第一点没有 previousPoint，倒数第二点没有 nextpoint2
所以当点是第一次使用时， currentPoint 代替 previousPoint
使用倒数第二点时 nextpointt1 代替 nextpoint2
至于最后一点，没有必要做任何事情，因为 bezierCurveTo 第三个参数是下一点，只需提供坐标即可连接，无需计算控制点
因此，绘制三阶贝塞尔曲线的方法：
/**
* 绘制贝塞尔曲线
* ctx.bezierCurveTo(控制点1, 控制点2, 当前点);
*/
drawBezierLine(ctx, data, options) {
const { startX, diffX, baseY, diffY, Min } = options;
ctx.beginPath();
// 先移动到第一点
ctx.moveTo(startX, baseY - (data[0] - Min) * diffY);
data.forEach((e, i) => {
let curPoint, prePoint, NextPoint1， NextPoint2， x, y;
// 当前点
x = startX diffX * i;
y = baseY - (e - Min) * diffY;
curPoint = new Point(x, y);
// 前一个点
x = startX diffX * (i - 1);
y = baseY - (data[i - 1] - Min) * diffY;
prePoint = new Point(x, y);
// 下一个点
x = startX diffX * (i 1);
y = baseY - (data[i 1] - Min) * diffY;
nextpointt1 = new Point(x, y);
// 下下个点
x = startX diffX * (i 2);
y = baseY - (data[i 2] - Min) * diffY;
nextpoint2 = new Point(x, y);
if (i === 0) {
// 假如是第一点， 前一点用当前点代替
prePoint = curPoint;
} else if (i === data.length - 2) {
// 如果是倒数第二点， 下一个点用下一个点代替
nextpoint2 = nextpointt1;
} else if (i === data.length - 1) {
// 最后一点直接退出
return;
}
const { controlPointA, controlPointB } = this.calcBezierControlPoints(
prePoint,
curPoint,
NextPoint1，
nextpoint2
);
ctx.bezierCurveTo(
controlPointA.x,
controlPointA.y,
controlPointB.x,
controlPointB.y,
nextpointt1.x,
nextpointt1.y
);
});
ctx.stroke();
},【相关学习推荐:小程序开发教程】
以上是微信小程序中使用canvas绘制天气折线图(附代码)的详细内容。请多关注其他相关文章！
高效稳定：文件服务器搭建全面解决方案
教你在微信小程序中使用canvas绘制天气折线图(附代码)-小程序开发
远程控制电脑，轻松保持屏幕常亮解锁！
高效应对：大数据粘贴难题的解决之道
远程掌控，网页版一键连接，高效无忧
如何快速升级剑与远征——手游攻略
服务器端口设置：关键步骤，高效配置
如何快速升级剑与远征——手游攻略
实现微信发布文章信息收集-微信开发
转发和合并转发的区别是什么——微信开发
behaviors在小程序中是什么？如何创建和使用？-小程序开发
总结和分享微信小程序开发步骤-小程序开发
本文为您带来了微信小程序的相关知识，主要介绍了微信小程序的开发步骤和主要流程，希望对您有所帮助。
【相关学习推荐:小程序学习教程】
目前，applet行业已成为互联网营销的热门黑马之一。applet行业依托主流平台，具有自然的用户基础和独特的资源优势。它以其方便快捷的操作和简单流行的模式，在短短一年内迎来了爆炸性的增长。目前市场上开发的小程序从几千到几万不等。以腾讯云为例，腾讯官方团队设
谈谈小程序如何实现“全文收起”功能-小程序开发
微信小程序开发的底部导航-小程序开发
总结整理微信小程序常用表单组件-小程序开发
总结分享微信小程序常见面试题-小程序开发
简单分析微信小程序元素-小程序开发
总结整理微信小程序权限界面-小程序开发
