小程序学习（12）：组件--彩色环形进度条

小程序学习（12）：组件–彩色环形进度条

2019年9月26日

代码片段

代码片段 https://developers.weixin.qq.com/s/UoErDFma7Ebq

主文件

json

"usingComponents": {
  "w-annulus2": "/component/w-annulus2/w-annulus2"
 }

wxml

<!-- 
  参数==
  percentage=>进度条进度，取值范围0~2
  text=>中间文本
  size=>文本字体大小，只需要填写数字，单位rpx
 -->
<view class="page">
  <w-annulus2 percentage='1.2' text='进度1.2' />
</view>

css

.page{
  width: 100%;
  height: 500rpx;
}

组件

wxml

<!--component/w-annulus2/w-annulus2.wxml-->
<view id="cct" class="all">
  <canvas canvas-id='customCanvas' class='canvas' />
  <canvas canvas-id='progressBar' class='canvas' />
  <view class="viewText" style="font-size: {{size}}rpx;">{{text}}</view>
</view>

css

/* component/w-annulus2/w-annulus2.wxss */
.all{
  width: 100%;
  height: 100%;
  position: relative;
  /* border: 1rpx solid red; */
}
.canvas{
  width: 100%;
  height: 100%;
  position: absolute;
}
.viewText{
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666666;
}

js

// component/w-annulus2/w-annulus2.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    percentage: { //百分比
      type: Number,
      value: 0.6
    },
    text: {    //中间文本
      type: String,
      value: '完成度···'
    },
    size: {    //文本大小
      type: Number,
      value: 27
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },
  /**
   * 生命周期函数--组件挂载后执行
   */
  ready: function () {
    this.getMySelf();
    this.getText();
  },
  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 方法--获取组件高度等信息
     * 并画出整体和进度条
     */
    getMySelf() {
      const that = this;
      var query = wx.createSelectorQuery().in(this);
      query.select('#cct').boundingClientRect()
      query.exec(function (res) {
        that.runA(res[0].width, res[0].height); //画背景黑线
        that.runB(res[0].width, res[0].height, that.data.percentage); //画彩色进度
      })
    },
    /**
     * 方法--canvas画图--背景
     * W => 组件宽度
     * Y => 组件高度
     */
    runA(W = 100, Y = 100) {
      var ctx = wx.createCanvasContext('customCanvas', this);
      var R = W < Y ? W : Y;
      ctx.setLineWidth(2);    //设置宽度
      ctx.setStrokeStyle('#666666'); // 设置圆环的颜色
      ctx.setLineCap('round') // 设置圆环端点的形状
      ctx.beginPath();//开始一个新的路径
      ctx.arc(W / 2, Y / 2, R / 3, 0, 2 * Math.PI, false);
      ctx.stroke();//对当前路径进行描边
      ctx.draw();
    },
    /**
     * 方法--canvas画图--加载进度条
     */
    runB(W = 100, Y = 100, J) {
      var pgB = wx.createCanvasContext('progressBar', this);
      //设置颜色
      var cColor = pgB.createLinearGradient(200, 100, 100, 200);
      cColor.addColorStop("0", "#2661DD");
      cColor.addColorStop("0.5", "#40ED94");
      cColor.addColorStop("1.0", "#5956CC");
      var R = W < Y ? W : Y;
      pgB.setLineWidth(6);
      pgB.setLineCap('round');
      var j = 0;
      var timeDraw = setInterval(function () {
        if (j >= J)
          clearInterval(timeDraw);
        j = j + 0.01;
        pgB.setStrokeStyle(cColor);
        pgB.beginPath();
        pgB.arc(W / 2, Y / 2, R / 3, -Math.PI / 2, j * Math.PI - Math.PI / 2, false);
        pgB.stroke();
        pgB.draw();
      }, 35)
    },
    /**
     * 方法--获取文本
     */
    getText() {

    },
  }
})

注释

1.组件中的json没有东西，就没有放，同样，引入也只需要写json和wxml所以别的没有放，代码片段可以直接导入，没有别的多余的

2.这个组件外部包裹的view必须设置大小，要不然可能出现显示在屏幕外面找不到的问题，外部的view没有要求，不一定必须是正方形，我写组件的时候计算过外部高度和宽度，所以只要是写了外部的大小，不管是%、rpx、rem什么的，都是可以居中显示的

3.本来想对传入的文本进行操作的，通过参数修改字体颜色什么的，但是做这个的目的就是学一下环形进度条，突然发现已经做完了，就没有别的修改的欲望了