|
@@ -4,10 +4,11 @@ import { rpxToPx } from "@/utils/tools";
|
|
|
import Taro, { useReady } from "@tarojs/taro";
|
|
import Taro, { useReady } from "@tarojs/taro";
|
|
|
import { View } from "@tarojs/components";
|
|
import { View } from "@tarojs/components";
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
|
|
+// import RNRingProgress from "./rn_ring_progress";
|
|
|
|
|
|
|
|
let Canvas
|
|
let Canvas
|
|
|
|
|
|
|
|
-if (process.env.TARO_ENV == 'weapp'){
|
|
|
|
|
|
|
+if (process.env.TARO_ENV == 'weapp') {
|
|
|
Canvas = require("@tarojs/components").Canvas
|
|
Canvas = require("@tarojs/components").Canvas
|
|
|
}
|
|
}
|
|
|
export default function RingProgress(props: {
|
|
export default function RingProgress(props: {
|
|
@@ -30,7 +31,7 @@ export default function RingProgress(props: {
|
|
|
const dpr = info.pixelRatio; // 获取设备的像素比
|
|
const dpr = info.pixelRatio; // 获取设备的像素比
|
|
|
const [ctx, setCtx] = useState<any>(null)
|
|
const [ctx, setCtx] = useState<any>(null)
|
|
|
const [canvas, setCanvas] = useState<any>(null)
|
|
const [canvas, setCanvas] = useState<any>(null)
|
|
|
- const [checkImg,setCheckImg] = useState<any>(null)
|
|
|
|
|
|
|
+ const [checkImg, setCheckImg] = useState<any>(null)
|
|
|
const canvasRef = useRef(null);
|
|
const canvasRef = useRef(null);
|
|
|
|
|
|
|
|
|
|
|
|
@@ -38,8 +39,6 @@ export default function RingProgress(props: {
|
|
|
const canvasHeight = props.height ?? rpxToPx(720)
|
|
const canvasHeight = props.height ?? rpxToPx(720)
|
|
|
const scale = props.scale ?? 1
|
|
const scale = props.scale ?? 1
|
|
|
|
|
|
|
|
- if (process.env.TARO_ENV=='rn') return <View />
|
|
|
|
|
-
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
if (ctx) {
|
|
if (ctx) {
|
|
|
drawContent(ctx, canvas)
|
|
drawContent(ctx, canvas)
|
|
@@ -123,7 +122,7 @@ export default function RingProgress(props: {
|
|
|
if (props.real) {
|
|
if (props.real) {
|
|
|
if (props.isCompleted) {
|
|
if (props.isCompleted) {
|
|
|
ctx.beginPath();
|
|
ctx.beginPath();
|
|
|
- ctx.arc(canvasWidth / 2.0, canvasHeight / 2.0, props.radius, 0, Math.PI*2);
|
|
|
|
|
|
|
+ ctx.arc(canvasWidth / 2.0, canvasHeight / 2.0, props.radius, 0, Math.PI * 2);
|
|
|
ctx.lineWidth = rpxToPx(4);
|
|
ctx.lineWidth = rpxToPx(4);
|
|
|
ctx.strokeStyle = 'rgba(0,0,0,0.05)';
|
|
ctx.strokeStyle = 'rgba(0,0,0,0.05)';
|
|
|
ctx.lineCap = 'round'; // 设置为圆角
|
|
ctx.lineCap = 'round'; // 设置为圆角
|
|
@@ -177,7 +176,7 @@ export default function RingProgress(props: {
|
|
|
// dotLineWidth = 4
|
|
// dotLineWidth = 4
|
|
|
|
|
|
|
|
// }
|
|
// }
|
|
|
- ctx.arc(xPrime, yPrime, props.target.width / 2.0+rpxToPx(3), 0, 2 * Math.PI);
|
|
|
|
|
|
|
+ ctx.arc(xPrime, yPrime, props.target.width / 2.0 + rpxToPx(3), 0, 2 * Math.PI);
|
|
|
ctx.lineWidth = dotLineWidth;
|
|
ctx.lineWidth = dotLineWidth;
|
|
|
ctx.fillStyle = 'transparent'
|
|
ctx.fillStyle = 'transparent'
|
|
|
ctx.fill()
|
|
ctx.fill()
|
|
@@ -237,7 +236,7 @@ export default function RingProgress(props: {
|
|
|
if (props.isCompleted) {
|
|
if (props.isCompleted) {
|
|
|
if (_canvas) {
|
|
if (_canvas) {
|
|
|
|
|
|
|
|
- if (!checkImg){
|
|
|
|
|
|
|
+ if (!checkImg) {
|
|
|
const img1 = _canvas.createImage(); // 创建图像对象
|
|
const img1 = _canvas.createImage(); // 创建图像对象
|
|
|
img1.src = global.checkImg
|
|
img1.src = global.checkImg
|
|
|
img1.onload = () => {
|
|
img1.onload = () => {
|
|
@@ -260,7 +259,7 @@ export default function RingProgress(props: {
|
|
|
save(_canvas)
|
|
save(_canvas)
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
else {
|
|
else {
|