u-circle-progress 进度条组件在2.0里没有了

[QianSeNianHua]

版本

2.0.36

转载链接

重现步骤

在1.0文档里，还能看到该进度条组件。但是在2.0.36版本里，该组件在文档上消失了，查看源码该组件的代码是有缺陷的，至少在props上只剩下了 ”percentage“ 这个。

期望的结果是什么？

希望完善 u-circle-progress ，或者恢复到1.0的功能，让我们能继续使用下去。

实际的结果是什么？

2.0.36版本里的u-circle-progress有缺陷。

[Coderhyp]

后面用什么替代了呀

[sRect]

从1.x版本中复制过来，修改了点。使用了新的api获取了ctx，canvas锯齿已修复。

1. u-circle-progress.vue

<template>
  <view
	class="u-circle-progress"
	:style="{
      	width: originWidthPx + 'px',
      	height: originWidthPx + 'px',
      	backgroundColor: bgColor
   }"
>
	<!-- 支付宝小程序不支持canvas-id属性，必须用id属性 -->
	<canvas
		class="u-canvas-bg"
    type="2d"
		:canvas-id="elBgId"
		:id="elBgId"
		:style="{
			width: originWidthPx + 'px',
			height: originWidthPx + 'px'
		}"
	></canvas>
	<canvas
		class="u-canvas"
    type="2d"
		:canvas-id="elId"
		:id="elId"
		:style="{
			width: originWidthPx + 'px',
			height: originWidthPx + 'px'
		}"
	></canvas>
	<slot></slot>
</view>
</template>

<script>
import props from "./props.js";

/**
 * CircleProgress 圆形进度条 TODO: 待完善
 * @description 展示操作或任务的当前进度，比如上传文件，是一个圆形的进度环。
 * @tutorial https://www.uviewui.com/components/circleProgress.html
 * @property {String | Number}	percentage	圆环进度百分比值，为数值类型，0-100 (默认 30 )
 * @example
 */
export default {
  name: "u-circle-progress",
  mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  data() {
    return {
      // #ifdef MP-WEIXIN
      elBgId: "uCircleProgressBgId", // 微信小程序中不能使用this.$u.guid()形式动态生成id值，否则会报错
      elId: "uCircleProgressElId",
      // #endif
      // #ifndef MP-WEIXIN
      elBgId: this.$u.guid(), // 非微信端的时候，需用动态的id，否则一个页面多个圆形进度条组件数据会混乱
      elId: this.$u.guid(),
      // #endif
      // widthPx: uni.upx2px(this.width), // 转成px后的整个组件的背景宽度
      // borderWidthPx: uni.upx2px(this.borderWidth), // 转成px后的圆环的宽度

      originWidthPx: uni.upx2px(this.width), // 转成px后的整个组件的背景宽度

      startAngle: -Math.PI / 2, // canvas画圆的起始角度，默认为3点钟方向，定位到12点钟方向
      progressContext: null, // 活动圆的canvas上下文
      newPercent: 0, // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用
      oldPercent: 0, // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用
    };
  },
  watch: {
    percent(nVal, oVal = 0) {
      if (nVal > 100) nVal = 100;
      if (nVal < 0) oVal = 0;
      // 此值其实等于this.percent，命名一个新
      this.newPercent = nVal;
      this.oldPercent = oVal;
      setTimeout(() => {
        // 无论是百分比值增加还是减少，需要操作还是原来的旧的百分比值
        // 将此值减少或者新增到新的百分比值
        this.drawCircleByProgress(oVal);
      }, 50);
    },
  },
  created() {
    // 赋值，用于加载后第一个画圆使用
    this.newPercent = this.percent;
    this.oldPercent = 0;
  },
  computed: {
    // 有type主题时，优先起作用
    circleColor() {
      if (
        ["success", "error", "info", "primary", "warning"].indexOf(this.type) >=
        0
      )
        return this.$u.color[this.type];
      else return this.activeColor;
    },
    dpr() {
      return uni.getSystemInfoSync().pixelRatio || 1;
    },
    widthPx() {
      return this.originWidthPx * this.dpr;
    },
    borderWidthPx() {
      return uni.upx2px(this.borderWidth) * this.dpr;
    },
  },
  mounted() {
    // 在h5端，必须要做一点延时才起作用，this.$nextTick()无效(HX2.4.7)
    setTimeout(() => {
      this.drawProgressBg();
      this.drawCircleByProgress(this.oldPercent);
    }, 50);
  },
  methods: {
    drawProgressBg() {
      const query = uni.createSelectorQuery().in(this);
      query.select(`#${this.elBgId}`)
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node;
        canvas.width = this.widthPx;
        canvas.height = this.widthPx;
        const ctx = canvas.getContext('2d');

        // let ctx = uni.createCanvasContext(this.elBgId, this);
        // ctx.scale(1/this.dpr, 1/this.dpr);
        // ctx.scale(this.dpr, this.dpr);
        ctx.lineWidth = this.borderWidthPx; // 设置圆环宽度
        // ctx.setStrokeStyle(this.inactiveColor); // 线条颜色
        ctx.strokeStyle = this.inactiveColor;
        ctx.beginPath(); // 开始描绘路径
        // 设置一个原点(110,110)，半径为100的圆的路径到当前路径
        let radius = this.widthPx / 2;
        ctx.arc(
          radius,
          radius,
          radius - this.borderWidthPx,
          0,
          2 * Math.PI,
          false
        );
        ctx.stroke(); // 对路径进行描绘
        // ctx.draw();
      });
    },
    drawCircleByProgress(progress) {
      // 第一次操作进度环时将上下文保存到了this.data中，直接使用即可
      // let ctx = this.progressContext;

      const query = uni.createSelectorQuery().in(this);
      query.select(`#${this.elId}`)
        .fields({ node: true, size: true })
        .exec((res) => {
          const canvas = res[0].node;
          canvas.width = this.widthPx;
          canvas.height = this.widthPx;
          const ctx = canvas.getContext('2d');
          // if (!ctx) {
          //   ctx = uni.createCanvasContext(this.elId, this);
          //   this.progressContext = ctx;
          // }
          // ctx.scale(1/this.dpr, 1/this.dpr);
          // ctx.scale(this.dpr, this.dpr);
          // 表示进度的两端为圆形
          // ctx.setLineCap("round");
          ctx.lineCap = "round";
          // 设置线条的宽度和颜色
          // ctx.setLineWidth(this.borderWidthPx);
          ctx.lineWidth = this.borderWidthPx;
          // ctx.setStrokeStyle(this.circleColor);
          ctx.strokeStyle = this.circleColor;
          // 将总过渡时间除以100，得出每修改百分之一进度所需的时间
          let time = Math.floor(this.duration / 100);
          // 结束角的计算依据为：将2π分为100份，乘以当前的进度值，得出终止点的弧度值，加起始角，为整个圆从默认的
          // 3点钟方向开始画图，转为更好理解的12点钟方向开始作图，这需要起始角和终止角同时加上this.startAngle值
          let endAngle = ((2 * Math.PI) / 100) * progress + this.startAngle;
          ctx.beginPath();
          // 半径为整个canvas宽度的一半
          let radius = this.widthPx / 2;
          ctx.arc(
            radius,
            radius,
            radius - this.borderWidthPx,
            this.startAngle,
            endAngle,
            false
          );
          ctx.stroke();
          // ctx.draw();
          // 如果变更后新值大于旧值，意味着增大了百分比
          if (this.newPercent > this.oldPercent) {
            // 每次递增百分之一
            progress++;
            // 如果新增后的值，大于需要设置的值百分比值，停止继续增加
            if (progress > this.newPercent) return;
          } else {
            // 同理于上面
            progress--;
            if (progress < this.newPercent) return;
          }
          // setTimeout(() => {
          //   // 定时器，每次操作间隔为time值，为了让进度条有动画效果
          //   this.drawCircleByProgress(progress);
          // }, time);

          canvas.requestAnimationFrame(this.drawCircleByProgress.bind(this, progress));
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

.u-circle-progress {
  position: relative;
  /* #ifndef APP-NVUE */
  display: inline-flex;
  /* #endif */
  align-items: center;
  justify-content: center;
}

.u-canvas-bg,
.u-canvas {
  position: absolute;
  top: 0;
  left: 0;
}
</style>

2. props.vue

export default {
    props: {
	// 圆环进度百分比值
	percent: {
		type: Number,
		default: 0,
		// 限制值在0到100之间
		validator: val => {
			return val >= 0 && val <= 100;
		}
	},
	// 底部圆环的颜色（灰色的圆环）
	inactiveColor: {
		type: String,
		default: '#ececec'
	},
	// 圆环激活部分的颜色
	activeColor: {
		type: String,
		default: '#19be6b'
	},
	// 圆环线条的宽度，单位rpx
	borderWidth: {
		type: [Number, String],
		default: 14
	},
	// 整个圆形的宽度，单位rpx
	width: {
		type: [Number, String],
		default: 200
	},
	// 整个圆环执行一圈的时间，单位ms
	duration: {
		type: [Number, String],
		default: 1500
	},
	// 主题类型
	type: {
		type: String,
		default: ''
	},
	// 整个圆环进度区域的背景色
	bgColor: {
		type: String,
		default: '#ffffff'
	}
    }
}

使用示例：

<u-circle-progress
	width="220"
	borderWidth="15"
	:percent="20"
	inactive-color="#EAEAEA"
	active-color="#00AE82"
>
	<view class="flex flex-col items-center gap-[10rpx]">
		<text class="text-[#666666] text-[14px] font-[400]"
			>完成率</text
		>
		<text class="text-main-color2 font-[600] text-[26px]"
			>{{ rate }}</text
		>
	</view>
</u-circle-progress>
</view>