分步说明如何在微信小程序中使用canvas绘制天气折线图（附代码）（天气小程序源码）

如何在微信小程序中绘制天气线图？下一篇我们将在微信小程序中使用canvas绘制天气线图，并使用三次贝塞尔曲线来绘制温度点。 、平滑，并在曲线底部添加背景颜色。 。 我希望这有帮助！

折线

渲染：

自定义组件线-图表

组件 ({ externalClasses: ['line-class'], 属性: { width: String, height: String, data: Array, }, obse rvers: { width() { // 现在监听宽度变化并重新绘制画布 // 这似乎是动态传递宽度的唯一方法 const query = this.createSelectorQuery(); query .select('#line ') . : true }) .exec( res => { const Canvas = res[0].node; const ctx = Canvas.getContext('2d'); // 画布宽度 const height; = res[0].height; // 画布宽度高度 console.log(`width: ${width}, height: ${height}`);etSystemInfoSync().pixelRatio; Canvas.width = width * dpr; Canvas.height = height * dpr; ctx.scale(dpr, dpr); // 开始绘制 this.drawLine(ctx, width, height, th is.data.数据); }, }, 方法: {drawLine(ctx, 宽度, 高度, 数据) { const Max = Math.max(...data); const Min = Math.min(...data); // 按照一定规则均匀划分画布的宽度和高度 const startX = width / (data.length * 2 ), // 起点X的横坐标 BaseY = height * 0.9, // 起点Baseline Y的纵坐标 diffX = width / data.length, diffY = (height * 0.7) / (maximum - min); 高度保留 0.2 写入温度 ctx.textAlign = 'center'; ctx.font = '13px 微软雅黑'; // 绘制线条图表 data.forEach((item,index) => {const x = startX + diffX * 索引, y = BaseY - (item - 最小值) * diffY; ctx.f illText(`${item}°`, x, y - ctx.lineTo); (x, y); }); // 绘制折线图 背景 ctx.lineTo(startX + (data.length) - 1) * diffX,baseY); // 基线终点 ctx.lineTo(startX, baseY); // 基线起点 const lingrad = ctx.createLinearGradient(0, 0, 0, height * 0.7 ); linggrad.ad dColorStop(0, 'rgba(255,255,255,0.9)'); linggrad.addColorStop(1, 'rgba(171,220,255,0)'); c tx.fillStyle = linggrad; ctx.fill(); // 在线图上画一个小点 ctx.beginPath(); ( 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) });e = '#0396FF'; ctx.fill(); }, },});

数据为温度数组，如[1, 2, ...]。

这里的宽度是动态传递的，因为我们不知道有多少个温度值。

有一个小问题。 也就是说，宽度太大的话，在实际设备上是不会显示的...

// 获取总滚动宽度 - ] wx.createSelectorQuery() Display .s elect('.每小时') .boundingClientRect(rect => { this.setData({scrollWidth: re ct.right -ect.left, }); .exec(); w> {{item}}

在此处写入 滚动 - x 并滚动-y，我不知道为什么绝对位置偏移有问题。顶部： 0;} 时间 > 显示 { min-width: 3.5em;-align: center;}.line { // 将折线图定位在绝对底部位置: Absolute; Bottom: 0;}

这里实际使用的绝对位置 时间单位应该与scroll[相同的高度k3]view，canvas，因为它的目的是模拟像 Moji 天气或每日这样的折线图，并在块内产生效果。 放置的主要原因是我们不知道如何实现Moji Weather，所以只能暂时做一下。

三次贝塞尔曲线

渲染

嗯，看起来不太平滑。

计算控制点

首先创建点类

class Point {constructor( x, y) { this.x = x; } }Canvas贝塞尔曲线绘制工具(karlew.com)http://wx.karlew.com/canvas/bezier/

通过上述网站了解三次贝塞尔曲线各个参数的含义您可以

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

总结一下：

a 和 b 可以是任何正数。

因此，定义控制点A和B来计算特定点。 方法

/ ** * 计算当前点的贝塞尔曲线控制点 * @param {Point}PreviousPoint: 上一个点 * @param {Point} currentPoint: 当前点 * @param {Point} nextPoint1: 下一个点* @param {Point} nextPoint2: 下一个点 * @param {number} scale: 系数 */calcBezierControlPoints(PreviousPoint, currentPoint, nextPoint1, nextPoint2, scale = 0.25) { let x = currentPoint.x +scale * (nextPoint1.x -PreviousPoint .x); y = currentPoint.y + scale * (nextPoint1.y -previousPoint.y ); const controlPointA = new point(x, y); // 控制点 A x = nextPoint1.x - 缩放 * (nextPoint2.x - currentPoint.x); y = nextPoint1.y - 缩放 * (nextPoint2.y - currentPoint.y); const controlPointB = new point(x, y); Point B return { controlPointA, controlPointB };}

这里的尺度是a和b 但要使它们的值相同。

但是，第一个点没有previousPoint，倒数第二个点没有nextPoint2。

如果该点是第一个或倒数第二个点，请使用 currentPoint 而不是 previousPoint。

对于倒数第二个点，请改用 nextPoint1。 NextPoint2的

对于最后一个点，你不需要做任何事情，因为bezierCurveTo第三个参数是下一个点。 只需指定连接坐标，无需计算控制点。

所以，这里是如何绘制三次贝塞尔曲线。

/** * 绘制贝塞尔曲线 * ctx .bezierCurveTo(控制点1,控制点2,当前点); */drawBezierLine(ctx, data, options) { const { startX, diffX, BaseY, diffY, Min } = options; ct x.beginPath(); // 移动到第一个点 ctx.moveTo(startX,baseY [ k3 ] (data[0] - Min) * diffY); data.forEac h((e, i) => { 让 curPoint, prePoint, nextPoint1, nextPoint2, x, y; // 当前点 x = startX + di ffX * i; y = BaseY - (e - Min) * diffY; // 前一个点 x = st artX + diffX * (i - ] 1); BaseY - (data[i - 1] - Min) * prePoint = new Point(x, y) // 下一个点 x = startX + diffX * (i + 1); BaseY - (data[i + 1] - Min) * d iffY; nextPoint1 = new Point(x, y) // 下一个点 x = startX + diffX; ; y = BaseY - (data[i + 2] - Min) * diffY = new Point(x, y); if (i === 0);然后将前一个点替换为当前点。 } else if (i === data.length - 2) { // 对于倒数第二个点，将下一个点替换为下一个点 nextPoint2 = nextPoint ; ControlPoints( prePoint, curPoint, nextPoint1, nextPoint2); x，控制点A.y，控制点B.x，控制点B.y，下一个点1.x， nextPoint1.y ); }); ctx.lines();},

【相关学习推荐：小程序开发教程】

下载微信小程序

微信支持支持发送语音消息的手机通讯软件、视频、照片和文本。 电话网络。 微信可以单独聊天、群聊，甚至可以根据地理位置找到附近的人，给大家带来全新的移动通讯体验。 陷入困境的人保存您的下载体验！

下载

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

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

本文由主机参考刊发，转载请注明：分步说明如何在微信小程序中使用canvas绘制天气折线图（附代码）（天气小程序源码） https://zhujicankao.com/141501.html