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() {

        const container = this.selectComponent('#container')
        // const width = container.offsetWidth;
        // const height = container.offsetHeight;
        console.log("xxxxxxxxxxxxxxxxxxxxxxx")
        console.log(container)
        // console.log(width)
        // console.log(height)
        console.log("xxxxxxxxxxxxxxxxxxxxxxx")


        // 组件加载后准备绘制
        this.initCanvas();
      },
    },
  
    /**
     * 组件的方法列表
     */
    methods: {
      /**
       * 初始化 Canvas 上下文
       */
      initCanvas() {
          let that = this
        // 获取两个canvas元素的上下文
        this.bgContext = wx.createCanvasContext('canvasProgressbg', this);
        this.progressContext = wx.createCanvasContext('canvasProgress', this);


        const container = this.selectComponent('#container')
        var query = wx.createSelectorQuery().in(this);
        query.select('#container').boundingClientRect()
        query.exec(function (res) {
            //res就是 所有标签为publicImg的元素的信息 的数组
            console.log(res);
            that.data.width = res[0].width / 2
            that.data.r = that.data.width - 1
            that.data.lw = 1

            that.drawProgressbg();
            that.drawCircle(that.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.progress);
        }
      }, 
                  /**
      * 更新并画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 + "%"
        })
      },
  
    }
  })