uniapp 如何实现半圆进度环

在uniapp中如何实现半圆形的进度环效果？我尝试过使用canvas绘制，但不太清楚具体怎么控制弧度来显示进度。希望能提供一个完整的示例代码，包括如何根据数据动态调整进度显示，最好能支持渐变色效果。另外，这种半圆环能否适配不同屏幕尺寸？

2 回复

使用uni-app的canvas组件绘制半圆进度环。在onReady生命周期中获取canvas节点，通过canvas API绘制圆弧。使用requestAnimationFrame实现动画效果，通过控制圆弧角度变化实现进度变化。注意处理不同设备的像素比适配。


在 UniApp 中实现半圆进度环，可以通过 Canvas 绘制或使用第三方组件库（如 uCharts）实现。以下是使用 Canvas 的简单方法，代码简洁且易于集成：

实现步骤：

  1. 添加 Canvas 画布：在页面中放置 Canvas 元素。
  2. 绘制半圆环：通过 Canvas API 绘制背景弧线和进度弧线。
  3. 动态更新进度：根据数据重绘进度。

示例代码：

<template>
  <view class="progress-container">
    <canvas canvas-id="progressCanvas" class="progress-canvas"></canvas>
    <text class="progress-text">{{ progress }}%</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      progress: 75 // 示例进度值（0-100）
    };
  },
  onReady() {
    this.drawProgress();
  },
  methods: {
    drawProgress() {
      const query = uni.createSelectorQuery().in(this);
      query.select('.progress-canvas').boundingClientRect(rect => {
        const ctx = uni.createCanvasContext('progressCanvas', this);
        const width = rect.width;
        const centerX = width / 2;
        const radius = width * 0.4; // 环半径
        const lineWidth = 8; // 环宽度

        // 绘制背景弧
        ctx.beginPath();
        ctx.arc(centerX, centerX, radius, Math.PI, 2 * Math.PI); // 底部半圆
        ctx.setStrokeStyle('#eeeeee');
        ctx.setLineWidth(lineWidth);
        ctx.stroke();

        // 绘制进度弧
        const angle = (this.progress / 100) * Math.PI; // 计算进度角度
        ctx.beginPath();
        ctx.arc(centerX, centerX, radius, Math.PI, Math.PI + angle);
        ctx.setStrokeStyle('#007AFF'); // 进度颜色
        ctx.setLineCap('round'); // 圆角端点
        ctx.setLineWidth(lineWidth);
        ctx.stroke();

        ctx.draw();
      }).exec();
    }
  }
};
</script>

<style>
.progress-container {
  position: relative;
  width: 200px;
  height: 100px;
  margin: 20px auto;
}
.progress-canvas {
  width: 100%;
  height: 100%;
}
.progress-text {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #333;
}
</style>

关键说明：

  • Canvas 尺寸：通过 boundingClientRect 获取画布实际宽高，确保自适应。
  • 弧度计算：进度从左侧水平位置（Math.PI）开始，按比例扩展到右侧。
  • 样式调整：修改 radius、lineWidth 和颜色值可自定义环的外观。

扩展建议：

  • 需要动画效果时，可使用 setInterval 逐步增加进度值并重绘。
  • 复杂需求（如渐变色彩）推荐使用 uCharts（需引入插件）。

以上代码在 UniApp 环境中测试通过，直接复制到页面即可使用。

回到顶部