canvas update

src/features/trackTimeDuration/components/Clock.tsx

@@ -17,29 +17,19 @@ export default function Component(props: { showCoverView: boolean }) {
     const [smallCtx, setSmallCtx] = useState(null)
     const [bigCtx, setBigCtx] = useState(null)
 
+    const [smallCanvas, setSmallCanvas] = useState(null)
+    const [bigCanvas, setBigCanvas] = useState(null)
+
     useEffect(() => {
         if (!user.isLogin) {
             setCheckData(null)
         }
     }, [user.isLogin])
 
-    // useEffect(()=>{
-    //     setCheckData(time)
-    // },[time.status,time.scenario])
-
-    useEffect(() => {
-        if (machine.context.checkData) {
-            setCheckData(machine.context.checkData as any);
-        }
-    }, [machine.context.checkData]);
-
     useEffect(() => {
-        trackTimeService.onTransition(_ => {
-            if (machine.context.checkData) {
-                setCheckData(machine.context.checkData as any);
-            }
-        });
-    }, []);
+        if (time.status != '' && user.isLogin)
+            setCheckData(time)
+    }, [time.status, time.scenario, user.isLogin])
 
     useEffect(() => {
         setShowCover(props.showCoverView)
@@ -52,70 +42,99 @@ export default function Component(props: { showCoverView: boolean }) {
         common.radius = 126;
         common.lineWidth = 28;
         var bgRing = getBgRing()
+        var currentDot1;
+        var realRing1;
+        var targetBigRing1
         if (!checkData) {
-            var currentDot1 = getDot(null, true)
-            return <Rings common={common} bgRing={bgRing} currentDot={currentDot1} canvasId={new Date().getTime()} />
-        }
-        var current_record = (checkData as any).current_record
-        var currentDot1 = getDot((checkData as any).current_record, true)
-        var targetBigRing1 = getTarget((checkData as any).current_record, true)
-        targetBigRing1.color = global.fastColor ? global.fastColor + '66' : ColorType.fast + '66'//'rgba(170,255,0,0.4)'
-        if ((checkData as any).current_record.scenario == 'SLEEP') {
-            targetBigRing1.color = global.sleepColor ? global.sleepColor + '66' : ColorType.sleep + '66'//'rgba(170,255,0,0.4)'
+            currentDot1 = getDot(null, true)
         }
+        else {
+            currentDot1 = getDot(time, true)
 
-        // console.log(targetBigRing1.color)
+            targetBigRing1 = getTarget(time, true)
+            targetBigRing1.color = global.fastColor ? global.fastColor + '66' : ColorType.fast + '66'//'rgba(170,255,0,0.4)'
+            if (time.scenario == 'SLEEP') {
+                targetBigRing1.color = global.sleepColor ? global.sleepColor + '66' : ColorType.sleep + '66'//'rgba(170,255,0,0.4)'
+            }
 
-        var realRing1;
-        if (current_record.status == 'ONGOING') {
-            realRing1 = getReal((checkData as any).current_record, true, false)
 
-            // return <Rings common={common} bgRing={bgRing} currentDot={currentDot1} realRing={realRing1} targetRing={targetBigRing1} canvasId='clock1' />
+            if (time.status == 'ONGOING') {
+                realRing1 = getReal(time, true, false)
+            }
+            realRing1 = getReal(time, true, false)
         }
-        // if (current_record.status == 'WAIT_FOR_START') {
-        //     return <Rings common={common} bgRing={bgRing} currentDot={currentDot1} canvasId='clock2' />
-        // }
 
-        realRing1 = getReal((checkData as any).current_record, true, false)
-        // return <Rings common={common} bgRing={bgRing} realRing={realRing1} currentDot={currentDot1} targetRing={targetBigRing1} canvasId='clock3' />
 
 
         return <Rings common={common} bgRing={bgRing} currentDot={currentDot1}
-            targetRing={current_record.status == 'WAIT_FOR_START' ? null : targetBigRing1} 
-            realRing={current_record.status == 'WAIT_FOR_START' ? null : realRing1}
-            canvasId='clockBig' />
+            targetRing={(!checkData || time.status == 'WAIT_FOR_START') ? null : targetBigRing1}
+            realRing={(!checkData || time.status == 'WAIT_FOR_START') ? null : realRing1}
+            ctx={bigCtx} setCtx={setBigCtx}
+            canvas={bigCanvas} setCanvas={setBigCanvas}
+            canvasId='bigRing' />
     }
 
 
     //内环
+    // function smallRing() {
+    //     // if (!checkData) return null
+    //     if (time.scenario == 'FAST_SLEEP') {
+    //         var common = getCommon(null, false)
+    //         common.radius = 90;
+    //         common.lineWidth = 28;
+    //         var bgRing = getBgRing()
+    //         var realRing = getReal(time, false, false)
+    //         var currentDot = getDot(time, false)
+    //         var targetRing = getTarget(time, false)
+    //         targetRing.color = global.sleepColor ? global.sleepColor + '66' : ColorType.sleep + '66'//'rgba(0, 255, 255, 0.4)'
+    //         // if (current_record.status == 'ONGOING2') {
+    //         //     return <Rings common={common} bgRing={bgRing} realRing={realRing} currentDot={currentDot} targetRing={targetRing} canvasId='clock7' />
+    //         // }
+
+    //         //ongoing3时，睡眠点整理亮度降低
+    //         if (time.status == 'ONGOING3') {
+    //             currentDot.color = global.sleepColor ? global.sleepColor + '66' : ColorType.sleep + '66'
+    //         }
+    //         // return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId='clock8' />
+
+    //         return <Rings common={common} bgRing={bgRing} currentDot={currentDot}
+    //             realRing={time.status == 'ONGOING2' ? realRing : null}
+    //             targetRing={time.status == 'ONGOING2' ? targetRing : null}
+    //             canvasId='smallRing'
+    //             canvas={smallCanvas} setCanvas={setSmallCanvas}
+    //             ctx={smallCtx} setCtx={setSmallCtx}
+    //         />
+    //     }
+    //     // return null;
+    // }
+
     function smallRing() {
-        if (!checkData) return null
-        var current_record = (checkData as any).current_record
-        if (current_record.scenario == 'FAST_SLEEP') {
-            var common = getCommon(null, false)
-            common.radius = 90;
-            common.lineWidth = 28;
-            var bgRing = getBgRing()
-            var realRing = getReal((checkData as any).current_record, false, false)
-            var currentDot = getDot((checkData as any).current_record, false)
-            var targetRing = getTarget((checkData as any).current_record, false)
+        // if (!checkData) return null
+        // if (time.scenario == 'FAST_SLEEP') {
+        var common = getCommon(null, false)
+        common.radius = 90;
+        common.lineWidth = 28;
+        var bgRing = getBgRing()
+        var realRing = time.scenario == 'FAST_SLEEP' ? getReal(time, false, false) : null
+        var currentDot = time.scenario == 'FAST_SLEEP'?getDot(checkData ? time : null, false):null
+        var targetRing = time.scenario == 'FAST_SLEEP' ? getTarget(time, false) : null
+        if (targetRing) {
             targetRing.color = global.sleepColor ? global.sleepColor + '66' : ColorType.sleep + '66'//'rgba(0, 255, 255, 0.4)'
-            // if (current_record.status == 'ONGOING2') {
-            //     return <Rings common={common} bgRing={bgRing} realRing={realRing} currentDot={currentDot} targetRing={targetRing} canvasId='clock7' />
-            // }
-
-            //ongoing3时，睡眠点整理亮度降低
-            if (current_record.status == 'ONGOING3') {
-                currentDot.color = global.sleepColor ? global.sleepColor + '66' : ColorType.sleep + '66'
-            }
-            // return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId='clock8' />
+        }
 
-            return <Rings common={common} bgRing={bgRing} currentDot={currentDot}
-                realRing={current_record.status == 'ONGOING2' ? realRing : null}
-                targetRing={current_record.status == 'ONGOING2' ? targetRing : null}
-                canvasId='clockSmall' ctx={smallCtx} setCtx={setSmallCtx} />
+        //ongoing3时，睡眠点整理亮度降低
+        if (time.status == 'ONGOING3') {
+            currentDot.color = global.sleepColor ? global.sleepColor + '66' : ColorType.sleep + '66'
         }
-        return null;
+
+        return <Rings common={common} bgRing={bgRing} currentDot={currentDot}
+            targetRing={time.status == 'ONGOING2' ? targetRing : null}
+            realRing={time.status == 'ONGOING2' ? realRing : null}
+            ctx={smallCtx} setCtx={setSmallCtx}
+            canvas={smallCanvas} setCanvas={setSmallCanvas}
+            canvasId='smallRing' />
+        // }
+        // return null;
     }
 
     function tapCover() {
@@ -128,12 +147,16 @@ export default function Component(props: { showCoverView: boolean }) {
     }
 
     return (
-        <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%', pointerEvents: 'none' }}>
+        <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%' }}>
             <View style={{ position: 'relative', zIndex: 1 }}>
                 {
                     bigRing()
                 }
-                <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
+                <View style={{
+                    display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0,
+                    opacity: (time.scenario == 'FAST_SLEEP' && user.isLogin) ? 1 : 0,
+                    alignItems: 'center', justifyContent: 'center',
+                }}>
                     {
                         smallRing()
                     }
@@ -143,39 +166,39 @@ export default function Component(props: { showCoverView: boolean }) {
                         !checkData && <Text className="clock_text" style={{ fontSize: 24, color: ColorType.fast }}>{TimeFormatter.getCurrentHourAndMinute()}</Text>
                     }
                     {
-                        checkData && (checkData as any).current_record.status == 'WAIT_FOR_START' && time.scenario == 'FAST_SLEEP' &&
+                        checkData && time.status == 'WAIT_FOR_START' && time.scenario == 'FAST_SLEEP' &&
                         <Text className="clock_text fast_sleep_text" style={{ fontSize: 24 }}>{TimeFormatter.getCurrentHourAndMinute()}</Text>
                     }
                     {
-                        checkData && (checkData as any).current_record.status == 'WAIT_FOR_START' && time.scenario != 'FAST_SLEEP' &&
+                        checkData && time.status == 'WAIT_FOR_START' && time.scenario != 'FAST_SLEEP' &&
                         <Text className="clock_text" style={{ color: time.scenario == 'FAST' ? ColorType.fast : ColorType.sleep, fontSize: 24 }}>{TimeFormatter.getCurrentHourAndMinute()}</Text>
                     }
                     {
-                        checkData && (checkData as any).current_record.status == 'ONGOING' && <Text className="clock_text" style={{ color: (checkData as any).current_record.scenario == 'FAST' ? global.fastColor ? global.fastColor : ColorType.fast : global.sleepColor ? global.sleepColor : ColorType.sleep, fontSize: 32 }}>
-                            {TimeFormatter.formateTimeNow((checkData as any).current_record.fast ?
-                                (checkData as any).current_record.fast.real_start_time :
-                                (checkData as any).current_record.sleep.real_start_time)}
+                        checkData && time.status == 'ONGOING' && <Text className="clock_text" style={{ color: time.scenario == 'FAST' ? global.fastColor ? global.fastColor : ColorType.fast : global.sleepColor ? global.sleepColor : ColorType.sleep, fontSize: 32 }}>
+                            {TimeFormatter.formateTimeNow(time.fast ?
+                                time.fast.real_start_time :
+                                time.sleep.real_start_time)}
                         </Text>
                     }
                     {
-                        checkData && (checkData as any).current_record.status == 'ONGOING1' && <Text className="clock_text" style={{ color: global.fastColor ? global.fastColor : ColorType.fast, fontSize: 32 }}>
-                            {TimeFormatter.formateTimeNow((checkData as any).current_record.fast.real_start_time)}
+                        checkData && time.status == 'ONGOING1' && <Text className="clock_text" style={{ color: global.fastColor ? global.fastColor : ColorType.fast, fontSize: 32 }}>
+                            {TimeFormatter.formateTimeNow(time.fast.real_start_time)}
                         </Text>
                     }
                     {
-                        checkData && (checkData as any).current_record.status == 'ONGOING2' && <View style={{ flexDirection: 'column', display: 'flex' }}>
+                        checkData && time.status == 'ONGOING2' && <View style={{ flexDirection: 'column', display: 'flex' }}>
                             <Text className="clock_text" style={{ color: global.fastColor ? global.fastColor : global.fastColor ? global.fastColor : ColorType.fast, fontSize: 32 }}>
-                                {TimeFormatter.formateTimeNow((checkData as any).current_record.fast.real_start_time)}
+                                {TimeFormatter.formateTimeNow(time.fast.real_start_time)}
                             </Text>
                             <Text className="clock_text" style={{ color: global.sleepColor ? global.sleepColor : ColorType.sleep, fontSize: 32 }}>
-                                {TimeFormatter.formateTimeNow((checkData as any).current_record.sleep.real_start_time)}
+                                {TimeFormatter.formateTimeNow(time.sleep.real_start_time)}
                             </Text>
                         </View>
                     }
                     {
-                        checkData && (checkData as any).current_record.status == 'ONGOING3' && <Text>
+                        checkData && time.status == 'ONGOING3' && <Text>
                             <Text className="clock_text" style={{ color: global.fastColor ? global.fastColor : ColorType.fast, fontSize: 32 }}>
-                                {TimeFormatter.formateTimeNow((checkData as any).current_record.fast.real_start_time)}
+                                {TimeFormatter.formateTimeNow(time.fast.real_start_time)}
                             </Text>
                         </Text>
                     }

src/features/trackTimeDuration/components/Rings.weapp.tsx

@@ -40,6 +40,7 @@ export default function Rings(props: {
     breathAnimation?:boolean;
     bgRing: BgRing; canvasId?: string;
     ctx?:any;setCtx?:any;
+    canvas?:any;setCanvas?:any;
 }) {
     const r = props.common.radius
     const strokeWidth = props.common.lineWidth;
@@ -50,10 +51,25 @@ export default function Rings(props: {
     const radius = r; // 圆形进度条的半径
     const lineWidth = strokeWidth; // 圆形进度条的线宽
     const time = useSelector((state: any) => state.time);
+    const user = useSelector((state: any) => state.user);
 
-    useEffect (()=>{
+    useEffect(()=>{
         drawCircle()
-    },[time.status,time.scenario])
+    },[])
+
+    useReady(() => {
+    })
+
+    useEffect(() => {
+        if (props.ctx){
+            drawContent(props.ctx)
+        }
+        else {
+
+            drawCircle()
+        }
+        
+    }, [time.status,time.scenario,user.isLogin,props.targetRing, props.currentDot,props.realRing,props.currentDot?.color,props.canvasId]);
     
 
     useEffect(()=>{
@@ -66,15 +82,6 @@ export default function Rings(props: {
         // }
     },[props.breathAnimation])
 
-    useDidShow(() => {
-        // drawCircle()
-    })
-
-    useReady(() => {
-        drawCircle()
-
-    })
-
     function animation(){
         const duration = 1000; // 动画执行时间（毫秒）
         let animationId: number | null = null;
@@ -102,10 +109,14 @@ export default function Rings(props: {
     
 
     function drawCircle() {
+        
         const query = Taro.createSelectorQuery();
         query.select(`.${canvasId}`).fields({ node: true, size: true });
         query.exec((res) => {
-            if (res[0] == null) return;
+            if (res[0] == null) {
+                drawCircle()
+                return;
+            }
             const _canvas = res[0].node;
             _canvas.width = res[0].width * dpr;
             _canvas.height = res[0].height * dpr;
@@ -113,19 +124,27 @@ export default function Rings(props: {
 
             if (props.setCtx){
                 props.setCtx(ctx)
+                props.setCanvas(_canvas)
+                drawContent(ctx)
+            }
+            else {
+                drawContent(ctx)
             }
             // setCanvas(_canvas)
             // setContext(ctx)
             // const ctx = Taro.createCanvasContext(canvasId);
-            drawContent(ctx)
-
-
+            // drawContent(ctx)
         });
     }
 
     function drawContent(ctx){
+        if (props.canvas){
+            props.canvas.width = ((radius * 2 + lineWidth)+6) * dpr;
+            props.canvas.height = ((radius * 2 + lineWidth)+6) * dpr;
+        }
+        
         const center = radius + lineWidth / 2+3; // 圆心坐标
-        ctx.clearRect(0, 0, radius * 2, radius * 2); // 清除画布
+        // ctx.clearRect(0, 0, radius * 2, radius * 2); // 清除画布
 
         // 设置画布尺寸
         ctx.scale(dpr, dpr);
@@ -160,7 +179,6 @@ export default function Rings(props: {
             ctx.lineCap = 'round'; // 设置为圆角
             ctx.stroke();
         }
-
         //绘制current_dot点
         if (props.currentDot) {
             var time = new Date();
@@ -187,12 +205,6 @@ export default function Rings(props: {
         }
     }
 
-    useEffect(() => {
-
-            drawCircle()
-        
-    }, [props.targetRing, props.currentDot,props.realRing,props.canvasId]);
-    // console.log('b',canvasId)
     return <Canvas canvasId={canvasId}  id={canvasId} className={canvasId} type="2d" style={{ width: (radius * 2 + lineWidth)+6, height: (radius * 2 + lineWidth)+6, zIndex: 0 }} ref={canvasRef} />
 
 }

src/services/http/request.ts

@@ -87,8 +87,6 @@ export async function request<T>(param: RequestParam): Promise<T> {
             reject('timeout');
         }, kTimeout);
 
-        console.log(url)
-
         requestTask = Taro.request({
             url: url,
             method: method,