wechat-pilelog/components/circle-progress/circle-progress.js

// components/circle/circle.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 新增一个进度百分比属性，外部可通过此属性传递进度值
    progress: {
      type: Number,
      value: 0,
      observer(newVal) {
        this.updateProgress(newVal);
      }
    },
    disabled: {
        type: Boolean,
        value: false,
        observer(newVal) {
          this.updateDisabled(newVal);
        }
      },
    width: {
        type: Number,
        value: 100,
        observer(newVal) {
            this.updateWidth(newVal);
        }
    },
    r: {
        type: Number,
        value: 90,
        observer(newVal) {
            this.updateR(newVal);
        }
    },
    lw: {
        type: Number,
        value: 5,
        observer(newVal) {
            this.updateLw(newVal);
        }
    },
  },

  
    /**
     * 组件的初始数据
     */
    data: {
      progress_txt: '加载中...', // 提示文字
      progress: 0,
      disabled: false,
      width:110,
      r:110,
      lw:7,
    },
  
    lifetimes: {
      attached() {
        // 组件加载后准备绘制
        this.initCanvas();
      },
    },
  
    /**
     * 组件的方法列表
     */
    methods: {
      /**
       * 初始化 Canvas 上下文
       */
      initCanvas() {
        // 获取两个canvas元素的上下文
        this.bgContext = wx.createCanvasContext('canvasProgressbg', this);
        this.progressContext = wx.createCanvasContext('canvasProgress', this);
        this.drawProgressbg();
        this.drawCircle(this.data.progress);
      },
  
      /**
       * 画progress底部背景
       */
      drawProgressbg() {
        let w = this.data.width;
        let r = this.data.r;
        let lw = this.data.lw;

        this.progressContext.setFillStyle('#FFFFFF');
        this.progressContext.beginPath();
        this.progressContext.arc(w, w, r, 0, 2 * Math.PI, false);
        this.progressContext.fill();

        this.bgContext.setLineWidth(lw);
        this.bgContext.setStrokeStyle('#FFFFFF');
        this.bgContext.setLineCap('round');
        this.bgContext.beginPath();
        this.bgContext.arc(w, w, r, 0, 2 * Math.PI, false);
        this.bgContext.stroke();
        this.bgContext.draw(false, () => {}); // 第二个参数用于兼容旧版API，新版不需要传入回调函数

        this.progressContext.setFillStyle('red');


    


      },

      /**
      * 更新并画progress进度
      */
      updateProgress(progressPercentage) {
        this.setData({
            progress:progressPercentage
        })
        //const normalizedProgress = (progressPercentage / 100) * 2; // 转换成弧度，最大值为2（对应100%）
        if(this.progressContext){
            this.drawCircle(this.data.progressPercentage);
        }
      },
            /**
      * 更新并画disabled
      */
     updateDisabled(dis) {
        this.setData({
            disabled:dis
        })
        //const normalizedProgress = (progressPercentage / 100) * 2; // 转换成弧度，最大值为2（对应100%）
        if(this.progressContext){
            this.drawCircle(this.data.progressPercentage);
        }
      }, 
                  /**
      * 更新并画disabled
      */
     updateWidth(dis) {
        this.setData({
            width:dis
        })
        //const normalizedProgress = (progressPercentage / 100) * 2; // 转换成弧度，最大值为2（对应100%）
        if(this.progressContext){
            this.drawCircle(this.data.progressPercentage);
        }
      }, 
      updateR(dis) {
        this.setData({
            r:dis
        })
        //const normalizedProgress = (progressPercentage / 100) * 2; // 转换成弧度，最大值为2（对应100%）
        if(this.progressContext){
            this.drawCircle(this.data.progressPercentage);
        }
      },
      updateLw(dis) {
        this.setData({
            r:dis
        })
        //const normalizedProgress = (progressPercentage / 100) * 2; // 转换成弧度，最大值为2（对应100%）
        if(this.progressContext){
            this.drawCircle(this.data.progressPercentage);
        }
      },
      /**
       * 画progress进度
       */
      drawCircle(step) {
        step = step * 2 / 100;
        let w = this.data.width;
        let r = this.data.r;
        let lw = this.data.lw;
        this.progressContext.setLineWidth(lw+1);
        this.progressContext.setStrokeStyle(this.data.disabled?'#B6B3C1':'#21ADFF');
        this.progressContext.setLineCap('round');
        this.progressContext.beginPath();
        this.progressContext.arc(w, w, r, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
        this.progressContext.stroke();
        this.progressContext.draw(false, () => {}); // 同样添加false参数
        this.setData({
            progress_txt:this.data.progress + "%"
        })
      },
  
    }
  })