教你在微信小程序中使用canvas绘制天气折线图(附代码)-小程序开发

首页 2024-07-09 09:50:08

如何在微信applet中绘制天气折线图？下面的文章将介绍在微信applet中使用canvas绘制天气折线图的方法，以及使用三阶贝塞尔曲线拟合温度点使其光滑。曲线底部有背景色。我希望它能帮助你！

折线

效果图：

自定义组件 line-chart

<canvas type="2d" id="line" class="line-class" style="width:{{width}}px;height:{{height}}px" />

Component({
  externalClasses: [&#39;line-class&#39;],
  properties: {
    width: String,
    height: String,
    data: Array,
  },
  observers: {
    width() {
      // 这里监听 width 变化重绘 canvas
      // 动态传入 width 这似乎是唯一的办法..
      const query = this.createSelectorQuery();
      query
        .select(&#39;#line&#39;)
        .fields({ node: true, size: true })
        .exec(res => {
          const canvas = res[0].node;
          const ctx = canvas.getContext(&#39;2d&#39;);
          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 = &#39;center&#39;;
      ctx.font = &#39;13px Microsoft YaHei&#39;;
      ctx.lineWidth = 2;
      ctx.strokeStyle = &#39;#ABDCFF&#39;;

      // 画折线图的线
      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, &#39;rgba(255，255，255，0.9)&#39;);
      lingrad.addColorStop(1, &#39;rgba(171,220,255,0)&#39;);
      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 = &#39;#0396FF&#39;;
      ctx.fill();
    },
  },
});

data 就是温度数组，比如 [1, 2, ...]

因为我不知道有多少温度值，所以这里 width 动态传入

有一个小问题，就是宽度太大，真机不会显示。...

 // 获取 scroll-view 的总宽度
 wx.createSelectorQuery()
      .select(&#39;.hourly&#39;)
      .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绘制天气折线图(附代码)-小程序开发

首页 2024-07-09 09:50:08

最新文章

相关文章