|
|
@@ -1,4 +1,8 @@
|
|
|
import { View } from "@tarojs/components";
|
|
|
+import Taro from "@tarojs/taro";
|
|
|
+import { useRef } from "react";
|
|
|
+import Svg, { Circle, Path } from 'react-native-svg';
|
|
|
+import { useSelector } from "react-redux";
|
|
|
|
|
|
export type RingCommon = {
|
|
|
useCase: string;
|
|
|
@@ -30,6 +34,124 @@ export type BgRing = {
|
|
|
color: string;
|
|
|
}
|
|
|
|
|
|
-export default function Component(){
|
|
|
- return <View />
|
|
|
+export default function Component(props: {
|
|
|
+ common: RingCommon; currentDot?: CurrentDot;
|
|
|
+ realRing?: RealRing; targetRing?: TargetRing;
|
|
|
+ breathAnimation?: boolean;
|
|
|
+ bgRing: BgRing; canvasId?: string;
|
|
|
+ ctx?: any; setCtx?: any;
|
|
|
+ canvas?: any; setCanvas?: any;
|
|
|
+}) {
|
|
|
+ const r = props.common.radius
|
|
|
+ const strokeWidth = props.common.lineWidth;
|
|
|
+ // const color = props.color || 'orange'
|
|
|
+ const canvasRef = useRef(null);
|
|
|
+ const canvasId = props.canvasId ? 'canvas_' + props.canvasId : 'progress-canvas';
|
|
|
+ const dpr = Taro.getSystemInfoSync().pixelRatio; // 获取设备的像素比
|
|
|
+ const radius = r; // 圆形进度条的半径
|
|
|
+ const lineWidth = strokeWidth; // 圆形进度条的线宽
|
|
|
+ const time = useSelector((state: any) => state.time);
|
|
|
+ const user = useSelector((state: any) => state.user);
|
|
|
+
|
|
|
+ const center = radius + lineWidth / 2 + 3; // 圆心坐标
|
|
|
+
|
|
|
+ function drawContent() {
|
|
|
+ var time = new Date();
|
|
|
+ var seconds = time.getHours() * 3600 + time.getMinutes() * 60 + time.getSeconds();
|
|
|
+ var arc = seconds / 86400 * 2 * Math.PI - Math.PI / 2.0;
|
|
|
+
|
|
|
+
|
|
|
+ return <Svg width={(radius * 2 + lineWidth) + 6} height={(radius * 2 + lineWidth) + 6} fillOpacity={0}>
|
|
|
+ <Circle
|
|
|
+ cx={center}
|
|
|
+ cy={center}
|
|
|
+ r={radius}
|
|
|
+ fillOpacity={0}
|
|
|
+ stroke={props.bgRing.color}
|
|
|
+ strokeWidth={strokeWidth}
|
|
|
+ strokeLinecap="round"
|
|
|
+ />
|
|
|
+ {/* // 绘制target进度环
|
|
|
+ if (props.targetRing) {
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(center, center, radius, props.targetRing!.startArc,
|
|
|
+ props.targetRing!.startArc + props.targetRing!.durationArc);
|
|
|
+ ctx.lineWidth = lineWidth;
|
|
|
+ ctx.strokeStyle = props.targetRing!.color;
|
|
|
+ ctx.lineCap = 'round'; // 设置为圆角
|
|
|
+ ctx.stroke();
|
|
|
+ } */}
|
|
|
+ {
|
|
|
+ props.targetRing && <Circle
|
|
|
+ cx={center}
|
|
|
+ cy={center}
|
|
|
+ r={radius}
|
|
|
+ fillOpacity={0}
|
|
|
+ stroke={props.targetRing!.color}
|
|
|
+ transform={`rotate(${props.targetRing!.startArc / (2 * Math.PI) * 360} ${center} ${center})`}
|
|
|
+ strokeDasharray={`${props.targetRing!.durationArc*radius},1000`}
|
|
|
+ strokeWidth={lineWidth}
|
|
|
+ strokeLinecap="round"
|
|
|
+ />
|
|
|
+ }
|
|
|
+ {/* //绘制real进度环
|
|
|
+ if (props.realRing) {
|
|
|
+ if (props.realRing.durationArc <0.01) props.realRing.durationArc=0.01;
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(center, center, radius, props.realRing!.startArc,
|
|
|
+ props.realRing!.startArc + props.realRing!.durationArc);
|
|
|
+ ctx.lineWidth = lineWidth;
|
|
|
+ ctx.strokeStyle = props.realRing!.color;
|
|
|
+ ctx.lineCap = 'round'; // 设置为圆角
|
|
|
+ ctx.stroke();
|
|
|
+ } */}
|
|
|
+ {
|
|
|
+ props.realRing && <Circle
|
|
|
+ cx={center}
|
|
|
+ cy={center}
|
|
|
+ r={radius}
|
|
|
+ fillOpacity={0}
|
|
|
+ stroke={props.realRing!.color}
|
|
|
+ transform={`rotate(${props.realRing!.startArc / (2 * Math.PI) * 360} ${center} ${center})`}
|
|
|
+ strokeDasharray={`${props.realRing!.durationArc*radius},1000`}
|
|
|
+ strokeWidth={lineWidth}
|
|
|
+ strokeLinecap="round"
|
|
|
+ />
|
|
|
+ }
|
|
|
+ {
|
|
|
+ props.currentDot && <Circle
|
|
|
+ cx={center}
|
|
|
+ cy={center}
|
|
|
+ r={radius}
|
|
|
+ fillOpacity={0}
|
|
|
+ stroke={props.currentDot!.borderColor}
|
|
|
+ transform={`rotate(${arc / (2 * Math.PI) * 360} ${center} ${center})`}
|
|
|
+ strokeDasharray={`0,1000`}
|
|
|
+ strokeWidth={lineWidth + 6}
|
|
|
+ strokeLinecap="round"
|
|
|
+ />
|
|
|
+ }
|
|
|
+ {
|
|
|
+ props.currentDot && <Circle
|
|
|
+ cx={center}
|
|
|
+ cy={center}
|
|
|
+ r={radius}
|
|
|
+ fillOpacity={0}
|
|
|
+ stroke={props.currentDot!.color}
|
|
|
+ transform={`rotate(${arc / (2 * Math.PI) * 360} ${center} ${center})`}
|
|
|
+ strokeDasharray={`0,1000`}
|
|
|
+ strokeWidth={lineWidth}
|
|
|
+ strokeLinecap="round"
|
|
|
+ />
|
|
|
+ }
|
|
|
+ </Svg>
|
|
|
+ }
|
|
|
+
|
|
|
+ return <Svg width={(radius * 2 + lineWidth) + 6} height={(radius * 2 + lineWidth) + 6} fillOpacity={0}>
|
|
|
+ {
|
|
|
+ drawContent()
|
|
|
+ }
|
|
|
+ </Svg>
|
|
|
+
|
|
|
+ // return <View style={{ width: 100, height: 100, backgroundColor: 'pink' }}></View>
|
|
|
}
|