update

dist/common.js

@@ -57,23 +57,21 @@ function Buttons(props) {
 
 
 function Rings(props) {
-  var progress = 0.5;
+  var progress = 0.85;
   var r = props.radius || 80;
   var strokeWidth = props.strokeWidth || 10;
   var color = props.color || 'orange';
   var canvasRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
   var canvasId = props.canvasId ? 'canvas_' + props.canvasId : 'progress-canvas';
   var dpr = _tarojs_taro__WEBPACK_IMPORTED_MODULE_0___default().getSystemInfoSync().pixelRatio; // 获取设备的像素比
-  var radius = r * dpr; // 圆形进度条的半径
-  var lineWidth = strokeWidth * dpr; // 圆形进度条的线宽
+  var radius = r; // 圆形进度条的半径
+  var lineWidth = strokeWidth; // 圆形进度条的线宽
 
   (0,_tarojs_taro__WEBPACK_IMPORTED_MODULE_0__.useDidShow)(function () {
     // drawCircle()
   });
   (0,_tarojs_taro__WEBPACK_IMPORTED_MODULE_0__.useReady)(function () {
-    setTimeout(function () {
-      drawCircle();
-    }, 500);
+    drawCircle();
   });
   function drawCircle() {
     var query = _tarojs_taro__WEBPACK_IMPORTED_MODULE_0___default().createSelectorQuery();
@@ -82,18 +80,21 @@ function Rings(props) {
       size: true
     });
     query.exec(function (res) {
-      var ctx = res[0].node.getContext('2d');
+      var _canvas = res[0].node;
+      _canvas.width = res[0].width * dpr;
+      _canvas.height = res[0].height * dpr;
+      var ctx = _canvas.getContext('2d');
       // const ctx = Taro.createCanvasContext(canvasId);
 
       var center = radius + lineWidth / 2; // 圆心坐标
 
       // 设置画布尺寸
-      ctx.scale(1 / dpr, 1 / dpr);
+      ctx.scale(dpr, dpr);
 
       // 绘制背景圆
       ctx.beginPath();
       ctx.arc(center, center, radius, 0, 2 * Math.PI);
-      ctx.lineWith = lineWidth;
+      ctx.lineWidth = lineWidth;
       ctx.strokeStyle = 'lightgray';
       ctx.lineCap = 'round'; // 设置为圆角
       ctx.stroke();
@@ -101,7 +102,7 @@ function Rings(props) {
       // 绘制进度圆
       ctx.beginPath();
       ctx.arc(center, center, radius, -Math.PI / 2 + 1, 2 * Math.PI * progress - Math.PI / 2);
-      ctx.lineWith = lineWidth;
+      ctx.lineWidth = lineWidth;
       ctx.strokeStyle = color;
       ctx.lineCap = 'round'; // 设置为圆角
       ctx.stroke();
@@ -111,10 +112,6 @@ function Rings(props) {
   }
 
   (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
-    // setTimeout(()=>{
-    //     drawCircle()
-    // },500)
-
     // const ctx = Taro.createCanvasContext(canvasId);
 
     // const center = radius + lineWidth / 2; // 圆心坐标
@@ -146,8 +143,8 @@ function Rings(props) {
     className: canvasId,
     type: "2d",
     style: {
-      width: (radius * 2 + lineWidth) / dpr,
-      height: (radius * 2 + lineWidth) / dpr,
+      width: radius * 2 + lineWidth,
+      height: radius * 2 + lineWidth,
       zIndex: 0
     },
     ref: canvasRef

src/components/Rings.weapp.tsx

@@ -2,66 +2,63 @@ import { Canvas } from "@tarojs/components";
 import Taro, { useDidShow, useReady } from "@tarojs/taro";
 import { useEffect, useRef } from "react";
 
-export default function Rings(props: { strokeWidth: number; radius: number;color:string;canvasId?:string }) {
-    const progress = 0.5
+export default function Rings(props: { strokeWidth: number; radius: number; color: string; canvasId?: string }) {
+    const progress = 0.85
     const r = props.radius || 80
     const strokeWidth = props.strokeWidth || 10;
     const color = props.color || 'orange'
     const canvasRef = useRef(null);
-    const canvasId = props.canvasId?'canvas_'+props.canvasId:'progress-canvas';
+    const canvasId = props.canvasId ? 'canvas_' + props.canvasId : 'progress-canvas';
     const dpr = Taro.getSystemInfoSync().pixelRatio; // 获取设备的像素比
-    const radius = r * dpr; // 圆形进度条的半径
-    const lineWidth = strokeWidth * dpr; // 圆形进度条的线宽
+    const radius = r; // 圆形进度条的半径
+    const lineWidth = strokeWidth; // 圆形进度条的线宽
 
-    useDidShow(()=>{
+    useDidShow(() => {
         // drawCircle()
     })
 
-    useReady(()=>{
-        setTimeout(()=>{
-            drawCircle()
-        },500)
+    useReady(() => {
+        drawCircle()
+
     })
 
-    function drawCircle(){
+    function drawCircle() {
         const query = Taro.createSelectorQuery();
-        query.select(`.${canvasId}`).fields({node:true,size:true});
+        query.select(`.${canvasId}`).fields({ node: true, size: true });
         query.exec((res) => {
-            const  ctx = res[0].node.getContext('2d');
+            const _canvas = res[0].node;
+            _canvas.width = res[0].width * dpr;
+            _canvas.height = res[0].height * dpr;
+            const ctx = _canvas.getContext('2d');
             // const ctx = Taro.createCanvasContext(canvasId);
 
 
-
             const center = radius + lineWidth / 2; // 圆心坐标
-    
+
             // 设置画布尺寸
-            ctx.scale(1 / dpr, 1 / dpr);
-    
+            ctx.scale(dpr, dpr);
+
             // 绘制背景圆
             ctx.beginPath();
             ctx.arc(center, center, radius, 0, 2 * Math.PI);
-            ctx.lineWith =  lineWidth;
-            ctx.strokeStyle =  'lightgray';
-            ctx.lineCap  = 'round'; // 设置为圆角
+            ctx.lineWidth = lineWidth;
+            ctx.strokeStyle = 'lightgray';
+            ctx.lineCap = 'round'; // 设置为圆角
             ctx.stroke();
-    
+
             // 绘制进度圆
             ctx.beginPath();
             ctx.arc(center, center, radius, -Math.PI / 2 + 1, (2 * Math.PI * progress) - Math.PI / 2);
-            ctx.lineWith =  lineWidth;
-            ctx.strokeStyle =  color;
-            ctx.lineCap  = 'round'; // 设置为圆角
+            ctx.lineWidth = lineWidth;
+            ctx.strokeStyle = color;
+            ctx.lineCap = 'round'; // 设置为圆角
             ctx.stroke();
-    
+
             // ctx.draw();
         });
     }
 
     useEffect(() => {
-        // setTimeout(()=>{
-        //     drawCircle()
-        // },500)
-
         // const ctx = Taro.createCanvasContext(canvasId);
 
 
@@ -89,6 +86,6 @@ export default function Rings(props: { strokeWidth: number; radius: number;color
 
         // ctx.draw();
     }, [progress]);
-    return <Canvas canvasId={canvasId} id={canvasId}  className={canvasId} type="2d" style={{ width: (radius * 2 + lineWidth) / dpr, height: (radius * 2 + lineWidth) / dpr,zIndex:0 }} ref={canvasRef} />
+    return <Canvas canvasId={canvasId} id={canvasId} className={canvasId} type="2d" style={{ width: (radius * 2 + lineWidth), height: (radius * 2 + lineWidth), zIndex: 0 }} ref={canvasRef} />
 
 }