|
|
@@ -4,6 +4,7 @@ import Taro from "@tarojs/taro";
|
|
|
import { useDidShow, useReady } from "@tarojs/taro";
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
import { useSelector } from "react-redux";
|
|
|
+import '../../../app.scss'
|
|
|
|
|
|
export type RingCommon = {
|
|
|
useCase: string;
|
|
|
@@ -17,9 +18,9 @@ export type CurrentDot = {
|
|
|
color: string;
|
|
|
lineWidth: number;
|
|
|
borderColor: string;
|
|
|
- timestamp?:number;
|
|
|
- offset?:number;
|
|
|
- whiteIcon?:boolean;
|
|
|
+ timestamp?: number;
|
|
|
+ offset?: number;
|
|
|
+ whiteIcon?: boolean;
|
|
|
}
|
|
|
|
|
|
export type RealRing = {
|
|
|
@@ -28,7 +29,7 @@ export type RealRing = {
|
|
|
durationArc: number;
|
|
|
radius?: number;
|
|
|
lineWidth?: number;
|
|
|
- hideBg?:boolean;
|
|
|
+ hideBg?: boolean;
|
|
|
}
|
|
|
|
|
|
export type TargetRing = {
|
|
|
@@ -50,22 +51,24 @@ export type BgRing = {
|
|
|
}
|
|
|
|
|
|
let arrowImg;
|
|
|
+let startTime;
|
|
|
|
|
|
export default function Rings(props: {
|
|
|
- common: RingCommon;
|
|
|
+ common: RingCommon;
|
|
|
currentDot?: CurrentDot;
|
|
|
- realRing?: RealRing;
|
|
|
- targetRing?: TargetRing;
|
|
|
- scheduleRing?:ScheduleRing;
|
|
|
- breathAnimation?:boolean;
|
|
|
- bgRing: BgRing;
|
|
|
+ realRing?: RealRing;
|
|
|
+ targetRing?: TargetRing;
|
|
|
+ scheduleRing?: ScheduleRing;
|
|
|
+ breathAnimation?: boolean;
|
|
|
+ bgRing: BgRing;
|
|
|
canvasId?: string;
|
|
|
- ctx?:any;
|
|
|
- setCtx?:any;
|
|
|
- canvas?:any;
|
|
|
- setCanvas?:any;
|
|
|
- dotList?:Array<CurrentDot>;
|
|
|
- stageList?:Array<RealRing>;
|
|
|
+ ctx?: any;
|
|
|
+ setCtx?: any;
|
|
|
+ canvas?: any;
|
|
|
+ setCanvas?: any;
|
|
|
+ dotList?: Array<CurrentDot>;
|
|
|
+ stageList?: Array<RealRing>;
|
|
|
+ scale?: number;
|
|
|
}) {
|
|
|
const r = props.common.radius
|
|
|
const strokeWidth = props.common.lineWidth;
|
|
|
@@ -78,71 +81,61 @@ export default function Rings(props: {
|
|
|
const time = useSelector((state: any) => state.time);
|
|
|
const user = useSelector((state: any) => state.user);
|
|
|
|
|
|
- useEffect(()=>{
|
|
|
+ const [scale, setScale] = useState(props.scale ?? 1.0)
|
|
|
+
|
|
|
+ const animationDuration = 150; // 动画时长（毫秒
|
|
|
+ const animateScale = (newScale) => {
|
|
|
+ // const startTime = performance.now();
|
|
|
+ const animate = () => {
|
|
|
+ const elapsed = new Date().getTime() - startTime.getTime();
|
|
|
+ const progress = Math.min(elapsed / animationDuration, 1);
|
|
|
+ const currentScale = scale + (newScale - scale) * progress;
|
|
|
+
|
|
|
+ setScale(currentScale);
|
|
|
+
|
|
|
+ if (progress < 1) {
|
|
|
+ requestAnimationFrame(animate);
|
|
|
+ } else {
|
|
|
+ setScale(newScale);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ requestAnimationFrame(animate);
|
|
|
+ };
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
// drawCircle()
|
|
|
- },[])
|
|
|
+ if (props.scale && props.scale != scale) {
|
|
|
+ // setScale(props.scale ?? 1.0)
|
|
|
+ startTime = new Date()
|
|
|
+ animateScale(props.scale)
|
|
|
+ }
|
|
|
+ }, [props.scale])
|
|
|
|
|
|
useReady(() => {
|
|
|
drawCircle()
|
|
|
})
|
|
|
useEffect(() => {
|
|
|
-
|
|
|
- if (props.ctx){
|
|
|
+
|
|
|
+ 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(()=>{
|
|
|
- // if (props.breathAnimation){
|
|
|
- // animation()
|
|
|
- // }
|
|
|
- // else {
|
|
|
- // global.breathAlpha = 1
|
|
|
- // animation()
|
|
|
- // }
|
|
|
- },[props.breathAnimation])
|
|
|
-
|
|
|
- function animation(){
|
|
|
- const duration = 1000; // 动画执行时间（毫秒）
|
|
|
- let animationId: number | null = null;
|
|
|
- let startTime: number | null = null;
|
|
|
- const animate = (timestamp: number) => {
|
|
|
- if (!startTime) {
|
|
|
- startTime = timestamp;
|
|
|
- }
|
|
|
-
|
|
|
- const elapsed = timestamp - startTime;
|
|
|
- const progress = elapsed / duration; // 动画进度（0 到 1）
|
|
|
- global.breathAlpha = progress
|
|
|
-
|
|
|
- if (elapsed < duration) {
|
|
|
- animationId = requestAnimationFrame(animate);
|
|
|
- } else {
|
|
|
- // 动画完成后重新开始
|
|
|
- startTime = null;
|
|
|
- animationId = requestAnimationFrame(animate);
|
|
|
- }
|
|
|
- }
|
|
|
- animationId = requestAnimationFrame(animate);
|
|
|
- }
|
|
|
|
|
|
-
|
|
|
+ }, [time.status, time.scenario, user.isLogin, props.targetRing, props.currentDot, props.realRing, props.currentDot?.color, props.canvasId]);
|
|
|
+
|
|
|
|
|
|
var retryCount = 0;
|
|
|
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) => {
|
|
|
if (res[0] == null) {
|
|
|
retryCount++;
|
|
|
- if (retryCount>5){
|
|
|
+ if (retryCount > 5) {
|
|
|
return;
|
|
|
}
|
|
|
drawCircle()
|
|
|
@@ -155,7 +148,7 @@ export default function Rings(props: {
|
|
|
const ctx = _canvas.getContext('2d');
|
|
|
global.canvas2 = _canvas
|
|
|
|
|
|
- if (props.setCtx){
|
|
|
+ if (props.setCtx) {
|
|
|
props.setCtx(ctx)
|
|
|
props.setCanvas(_canvas)
|
|
|
drawContent(ctx)
|
|
|
@@ -170,25 +163,24 @@ export default function Rings(props: {
|
|
|
});
|
|
|
}
|
|
|
|
|
|
- function calculateCoordinates(x, y, r, angle) {
|
|
|
- const radians = angle * Math.PI / 180; // 将角度转换为弧度
|
|
|
- const xPrime = x + r * Math.cos(radians);
|
|
|
- const yPrime = y + r * Math.sin(radians);
|
|
|
- return { x: xPrime, y: yPrime };
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- function drawContent(ctx){
|
|
|
- if (props.canvas){
|
|
|
+ function drawContent(ctx) {
|
|
|
+ if (props.canvas) {
|
|
|
props.canvas.width = ((radius * 2 + lineWidth)) * dpr;
|
|
|
props.canvas.height = ((radius * 2 + lineWidth)) * dpr;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
const center = radius + lineWidth / 2; // 圆心坐标
|
|
|
ctx.clearRect(0, 0, radius * 2, radius * 2); // 清除画布
|
|
|
|
|
|
+
|
|
|
// 设置画布尺寸
|
|
|
- ctx.scale(dpr, dpr);
|
|
|
+ ctx.scale(dpr, dpr)
|
|
|
+
|
|
|
+ ctx.translate(center, center)
|
|
|
+ ctx.scale(scale, scale);
|
|
|
+ ctx.translate(-center, -center);
|
|
|
+
|
|
|
+
|
|
|
|
|
|
// 绘制背景圆
|
|
|
ctx.beginPath();
|
|
|
@@ -199,11 +191,11 @@ export default function Rings(props: {
|
|
|
ctx.stroke();
|
|
|
|
|
|
// 绘制schedule进度环
|
|
|
- if (props.scheduleRing){
|
|
|
+ if (props.scheduleRing) {
|
|
|
ctx.beginPath();
|
|
|
ctx.arc(center, center, radius, props.scheduleRing!.startArc,
|
|
|
props.scheduleRing!.startArc + props.scheduleRing!.durationArc);
|
|
|
- ctx.lineWidth = lineWidth+4;
|
|
|
+ ctx.lineWidth = lineWidth + 4;
|
|
|
ctx.strokeStyle = MainColorType.bg;
|
|
|
ctx.lineCap = 'round'; // 设置为圆角
|
|
|
ctx.stroke();
|
|
|
@@ -221,17 +213,17 @@ export default function Rings(props: {
|
|
|
// 绘制target进度环
|
|
|
if (props.targetRing) {
|
|
|
ctx.beginPath();
|
|
|
- ctx.arc(center, center, props.targetRing!.radius?props.targetRing!.radius:radius, props.targetRing!.startArc,
|
|
|
+ ctx.arc(center, center, props.targetRing!.radius ? props.targetRing!.radius : radius, props.targetRing!.startArc,
|
|
|
props.targetRing!.startArc + props.targetRing!.durationArc);
|
|
|
- ctx.lineWidth = props.targetRing!.lineWidth?props.targetRing!.lineWidth+4:lineWidth+4;
|
|
|
+ ctx.lineWidth = props.targetRing!.lineWidth ? props.targetRing!.lineWidth + 4 : lineWidth + 4;
|
|
|
ctx.strokeStyle = MainColorType.bg;
|
|
|
ctx.lineCap = 'round'; // 设置为圆角
|
|
|
ctx.stroke();
|
|
|
-
|
|
|
+
|
|
|
ctx.beginPath();
|
|
|
- ctx.arc(center, center, props.targetRing!.radius?props.targetRing!.radius:radius, props.targetRing!.startArc,
|
|
|
+ ctx.arc(center, center, props.targetRing!.radius ? props.targetRing!.radius : radius, props.targetRing!.startArc,
|
|
|
props.targetRing!.startArc + props.targetRing!.durationArc);
|
|
|
- ctx.lineWidth = props.targetRing!.lineWidth?props.targetRing!.lineWidth:lineWidth;
|
|
|
+ ctx.lineWidth = props.targetRing!.lineWidth ? props.targetRing!.lineWidth : lineWidth;
|
|
|
ctx.strokeStyle = props.targetRing!.color;
|
|
|
ctx.lineCap = 'round'; // 设置为圆角
|
|
|
ctx.stroke();
|
|
|
@@ -239,49 +231,49 @@ export default function Rings(props: {
|
|
|
|
|
|
//绘制real进度环
|
|
|
if (props.realRing) {
|
|
|
- if (props.realRing.durationArc <0.01) props.realRing.durationArc=0.01;
|
|
|
- if (!props.realRing.hideBg){
|
|
|
+ if (props.realRing.durationArc < 0.01) props.realRing.durationArc = 0.01;
|
|
|
+ if (!props.realRing.hideBg) {
|
|
|
ctx.beginPath();
|
|
|
- ctx.arc(center, center, props.realRing!.radius?props.realRing!.radius:radius, props.realRing!.startArc,
|
|
|
+ ctx.arc(center, center, props.realRing!.radius ? props.realRing!.radius : radius, props.realRing!.startArc,
|
|
|
props.realRing!.startArc + props.realRing!.durationArc);
|
|
|
- ctx.lineWidth = props.realRing!.lineWidth?props.realRing!.lineWidth+4:lineWidth+4;
|
|
|
+ ctx.lineWidth = props.realRing!.lineWidth ? props.realRing!.lineWidth + 4 : lineWidth + 4;
|
|
|
ctx.strokeStyle = MainColorType.bg;
|
|
|
ctx.lineCap = 'round'; // 设置为圆角
|
|
|
ctx.stroke();
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
|
|
|
ctx.beginPath();
|
|
|
- ctx.arc(center, center, props.realRing!.radius?props.realRing!.radius:radius, props.realRing!.startArc,
|
|
|
+ ctx.arc(center, center, props.realRing!.radius ? props.realRing!.radius : radius, props.realRing!.startArc,
|
|
|
props.realRing!.startArc + props.realRing!.durationArc);
|
|
|
- ctx.lineWidth = props.realRing!.lineWidth?props.realRing!.lineWidth:lineWidth;
|
|
|
+ ctx.lineWidth = props.realRing!.lineWidth ? props.realRing!.lineWidth : lineWidth;
|
|
|
ctx.strokeStyle = props.realRing!.color;
|
|
|
ctx.lineCap = 'round'; // 设置为圆角
|
|
|
ctx.stroke();
|
|
|
}
|
|
|
|
|
|
- if (props.stageList){
|
|
|
- props.stageList.map(item=>{
|
|
|
- if (item.durationArc <0.01) item.durationArc=0.01;
|
|
|
- ctx.beginPath();
|
|
|
- ctx.arc(center, center, radius, item.startArc,
|
|
|
- item.startArc + item.durationArc);
|
|
|
- ctx.lineWidth = lineWidth;
|
|
|
- ctx.strokeStyle = item.color;
|
|
|
- ctx.lineCap = 'round'; // 设置为圆角
|
|
|
- ctx.stroke();
|
|
|
+ if (props.stageList) {
|
|
|
+ props.stageList.map(item => {
|
|
|
+ if (item.durationArc < 0.01) item.durationArc = 0.01;
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(center, center, radius, item.startArc,
|
|
|
+ item.startArc + item.durationArc);
|
|
|
+ ctx.lineWidth = lineWidth;
|
|
|
+ ctx.strokeStyle = item.color;
|
|
|
+ ctx.lineCap = 'round'; // 设置为圆角
|
|
|
+ ctx.stroke();
|
|
|
})
|
|
|
}
|
|
|
//绘制current_dot点
|
|
|
if (props.currentDot) {
|
|
|
var time = new Date();
|
|
|
var seconds = time.getHours() * 3600 + time.getMinutes() * 60 + time.getSeconds();
|
|
|
- seconds += props.currentDot.offset!*60
|
|
|
- if (seconds>24*3600){
|
|
|
- seconds -= 24*3600
|
|
|
- }
|
|
|
- else if (seconds<0){
|
|
|
- seconds += 24*3600
|
|
|
+ seconds += props.currentDot.offset! * 60
|
|
|
+ if (seconds > 24 * 3600) {
|
|
|
+ seconds -= 24 * 3600
|
|
|
+ }
|
|
|
+ else if (seconds < 0) {
|
|
|
+ seconds += 24 * 3600
|
|
|
}
|
|
|
var arc = seconds / 86400 * 2 * Math.PI - Math.PI / 2.0;
|
|
|
const radians = arc;//angle * Math.PI / 180; // 将角度转换为弧度
|
|
|
@@ -290,25 +282,25 @@ export default function Rings(props: {
|
|
|
|
|
|
ctx.beginPath();
|
|
|
var dotLineWidth = 2
|
|
|
- if (lineWidth==28){
|
|
|
+ if (lineWidth == 28) {
|
|
|
dotLineWidth = 4
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
- ctx.arc(xPrime, yPrime, lineWidth/2.0+dotLineWidth/2, 0, 2 * Math.PI);
|
|
|
+ ctx.arc(xPrime, yPrime, lineWidth / 2.0 + dotLineWidth / 2, 0, 2 * Math.PI);
|
|
|
ctx.lineWidth = dotLineWidth;
|
|
|
ctx.strokeStyle = props.currentDot.borderColor//'#1C1C1C';
|
|
|
ctx.lineCap = 'round'; // 设置为圆角
|
|
|
ctx.stroke();
|
|
|
|
|
|
- if (props.currentDot.color!='#ffffffff'){
|
|
|
+ if (props.currentDot.color != '#ffffffff') {
|
|
|
ctx.beginPath();
|
|
|
ctx.arc(xPrime, yPrime, lineWidth / 2, 0, 2 * Math.PI, false);
|
|
|
ctx.fillStyle = props.currentDot.color;
|
|
|
ctx.fill();
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
if (arrowImg) {
|
|
|
//绘制终点图标
|
|
|
ctx.save()
|
|
|
@@ -316,13 +308,13 @@ export default function Rings(props: {
|
|
|
ctx.translate(xPrime, yPrime)
|
|
|
ctx.rotate(arc)
|
|
|
ctx.translate(-xPrime, -yPrime)
|
|
|
- ctx.drawImage(arrowImg, xPrime - lineWidth/2, yPrime - lineWidth/2, lineWidth, lineWidth)
|
|
|
+ ctx.drawImage(arrowImg, xPrime - lineWidth / 2, yPrime - lineWidth / 2, lineWidth, lineWidth)
|
|
|
ctx.restore()
|
|
|
ctx.closePath()
|
|
|
}
|
|
|
else {
|
|
|
let tempImage = global.canvas2.createImage()
|
|
|
- tempImage.src = require(props.currentDot.whiteIcon?'@/assets/images/dot_arrow_white.png':'@/assets/images/dot_arrow.png')//'./watch_line.png'//'..//assets/images/watch_line.png'
|
|
|
+ tempImage.src = require(props.currentDot.whiteIcon ? '@/assets/images/dot_arrow_white.png' : '@/assets/images/dot_arrow.png')//'./watch_line.png'//'..//assets/images/watch_line.png'
|
|
|
tempImage.onload = () => {
|
|
|
arrowImg = tempImage
|
|
|
ctx.save()
|
|
|
@@ -330,16 +322,16 @@ export default function Rings(props: {
|
|
|
ctx.translate(xPrime, yPrime)
|
|
|
ctx.rotate(arc)
|
|
|
ctx.translate(-xPrime, -yPrime)
|
|
|
- ctx.drawImage(arrowImg, xPrime - lineWidth/2, yPrime - lineWidth/2, lineWidth, lineWidth)
|
|
|
+ ctx.drawImage(arrowImg, xPrime - lineWidth / 2, yPrime - lineWidth / 2, lineWidth, lineWidth)
|
|
|
ctx.restore()
|
|
|
ctx.closePath()
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
// ctx.beginPath();
|
|
|
// ctx.arc(center, center, radius, arc,
|
|
|
// arc + 0.001);
|
|
|
@@ -347,7 +339,7 @@ export default function Rings(props: {
|
|
|
// ctx.strokeStyle = props.currentDot!.borderColor;
|
|
|
// ctx.lineCap = 'round'; // 设置为圆角
|
|
|
// ctx.stroke();
|
|
|
-
|
|
|
+
|
|
|
// ctx.save()
|
|
|
// ctx.beginPath();
|
|
|
// ctx.arc(center, center, radius, arc,
|
|
|
@@ -360,19 +352,19 @@ export default function Rings(props: {
|
|
|
}
|
|
|
|
|
|
|
|
|
- if (props.dotList){
|
|
|
- props.dotList.map(item=>{
|
|
|
- var time = item.timestamp?new Date(item.timestamp):new Date();
|
|
|
+ if (props.dotList) {
|
|
|
+ props.dotList.map(item => {
|
|
|
+ var time = item.timestamp ? new Date(item.timestamp) : new Date();
|
|
|
var seconds = time.getHours() * 3600 + time.getMinutes() * 60 + time.getSeconds();
|
|
|
var arc = seconds / 86400 * 2 * Math.PI - Math.PI / 2.0;
|
|
|
ctx.beginPath();
|
|
|
ctx.arc(center, center, radius, arc,
|
|
|
arc + 0.001);
|
|
|
- ctx.lineWidth = lineWidth+6;
|
|
|
+ ctx.lineWidth = lineWidth + 6;
|
|
|
ctx.strokeStyle = item.borderColor;
|
|
|
ctx.lineCap = 'round'; // 设置为圆角
|
|
|
ctx.stroke();
|
|
|
-
|
|
|
+
|
|
|
ctx.save()
|
|
|
ctx.beginPath();
|
|
|
ctx.arc(center, center, radius, arc,
|
|
|
@@ -387,111 +379,6 @@ export default function Rings(props: {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- return <Canvas canvasId={canvasId} id={canvasId} className={canvasId} type="2d" style={{ width: (radius * 2 + lineWidth), height: (radius * 2 + lineWidth), zIndex: 0 }} ref={canvasRef} />
|
|
|
-
|
|
|
-}
|
|
|
+ return <Canvas canvasId={canvasId} id={canvasId} className="canvas" type="2d" style={{ width: (radius * 2 + lineWidth), height: (radius * 2 + lineWidth), zIndex: 0 }} ref={canvasRef} />
|
|
|
|
|
|
-// export default function Rings(props: {
|
|
|
-// common: RingCommon; currentDot?: CurrentDot;
|
|
|
-// realRing?: RealRing; targetRing?: TargetRing; bgRing: BgRing; canvasId?: string;test?:boolean
|
|
|
-// }) {
|
|
|
-// 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; // 圆形进度条的线宽
|
|
|
-
|
|
|
-// useDidShow(() => {
|
|
|
-// // drawCircle()
|
|
|
-// })
|
|
|
-
|
|
|
-// useReady(() => {
|
|
|
-// drawCircle()
|
|
|
-
|
|
|
-// })
|
|
|
-
|
|
|
-// function drawCircle() {
|
|
|
-// const query = Taro.createSelectorQuery();
|
|
|
-// query.select(`.${canvasId}`).fields({ node: true, size: true });
|
|
|
-// query.exec((res) => {
|
|
|
-// if (res[0] == null) return;
|
|
|
-// 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.clearRect(0, 0, radius * 2, radius * 2); // 清除画布
|
|
|
-
|
|
|
-// // 设置画布尺寸
|
|
|
-// ctx.scale(dpr, dpr);
|
|
|
-
|
|
|
-// // 绘制背景圆
|
|
|
-// ctx.beginPath();
|
|
|
-// ctx.arc(center, center, radius, 0, 2 * Math.PI);
|
|
|
-// ctx.lineWidth = lineWidth;
|
|
|
-// ctx.strokeStyle = props.bgRing.color;
|
|
|
-// ctx.lineCap = 'round'; // 设置为圆角
|
|
|
-// ctx.stroke();
|
|
|
-
|
|
|
-// // 绘制target进度环
|
|
|
-// if (props.common.useCase == 'ChooseScenario' || (props.common.useCase == 'Clock' && 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();
|
|
|
-// }
|
|
|
-
|
|
|
-// //绘制real进度环
|
|
|
-// if (props.common.status != 'WAIT_FOR_START' && props.realRing) {
|
|
|
-
|
|
|
-// 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();
|
|
|
-// }
|
|
|
-
|
|
|
-// //绘制current_dot点
|
|
|
-// if (props.common.useCase == 'Clock') {
|
|
|
-// 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;
|
|
|
-// ctx.beginPath();
|
|
|
-// ctx.arc(center, center, radius, arc,
|
|
|
-// arc + 0.001);
|
|
|
-// ctx.lineWidth = lineWidth;
|
|
|
-// ctx.strokeStyle = props.currentDot!.borderColor;
|
|
|
-// ctx.lineCap = 'round'; // 设置为圆角
|
|
|
-// ctx.stroke();
|
|
|
-
|
|
|
-// ctx.beginPath();
|
|
|
-// ctx.arc(center, center, radius, arc,
|
|
|
-// arc + 0.001);
|
|
|
-// ctx.lineWidth = lineWidth - 2;
|
|
|
-// ctx.strokeStyle = props.currentDot!.color;
|
|
|
-// ctx.lineCap = 'round'; // 设置为圆角
|
|
|
-// ctx.stroke();
|
|
|
-// }
|
|
|
-
|
|
|
-
|
|
|
-// // ctx.draw();
|
|
|
-// });
|
|
|
-// }
|
|
|
-
|
|
|
-// useEffect(() => {
|
|
|
-// drawCircle()
|
|
|
-// }, [props.targetRing, props.currentDot]);
|
|
|
-// return <Canvas canvasId={canvasId} id={canvasId} className={canvasId} type="2d" style={{ width: (radius * 2 + lineWidth), height: (radius * 2 + lineWidth), zIndex: 0 }} ref={canvasRef} />
|
|
|
-
|
|
|
-// }
|
|
|
+}
|
