From a7fca24669e31d3d27ba816f631f6b89cee1e623 Mon Sep 17 00:00:00 2001
From: leon-kfd <kfd_personal@163.com>
Date: Fri, 2 Jul 2021 08:22:56 +0800
Subject: [PATCH] feat: circle

---
 src/components/s-circle.tsx | 15 ++++++++++-----
 src/utils/base.ts           |  2 +-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/s-circle.tsx b/src/components/s-circle.tsx
index 280a113..fc6074b 100644
--- a/src/components/s-circle.tsx
+++ b/src/components/s-circle.tsx
@@ -15,6 +15,7 @@ export default function SCircle(props: SCircleProps) {
   const DOT_R = 5
   const CIRCLE_NUM = 3
   const CIRCLE_DELAY = 2000
+  const CIRCLE_SCALE_OFFSET = 80
 
   const canvas = useRef<Canvas>()
   const circle = useRef<IShape>()
@@ -63,12 +64,15 @@ export default function SCircle(props: SCircleProps) {
       })
 
       const addCircle = () => {
-        return (canvas.current as Canvas).addShape('path', {
+        return (canvas.current as Canvas).addShape('circle', {
           attrs: {
             stroke: LINE_COLOR,
             lineWidth: 2,
-            path: getCirclePath(X, Y, R),
-            opacity: 0
+            opacity: 0,
+            x: X,
+            y: Y,
+            r: R
+            //path: getCirclePath(X, Y, R),
           }
         })
       };
@@ -96,7 +100,8 @@ export default function SCircle(props: SCircleProps) {
         circleArr.current.push(addCircle())
         circleArr.current[index].animate((ratio: number) => {
           return {
-            path: getCirclePath(X, Y, R + ratio * 80),
+            r: R + ratio * CIRCLE_SCALE_OFFSET,
+            // path: getCirclePath(X, Y, R + ratio * 80),
             opacity: ratio > 0.02 && ratio < 0.9 ? 0.8 - ratio * 0.8 : 0
           }
         }, animateOption)
@@ -112,7 +117,7 @@ export default function SCircle(props: SCircleProps) {
           const deg = circleDotDegArr.current[index] + ratio * 360 - 180
           const l = Math.cos(deg * Math.PI / 180)
           const t = Math.sin(deg * Math.PI / 180)
-          const r = R + ratio * 80
+          const r = R + ratio * CIRCLE_SCALE_OFFSET
           return {
             x: X + l * r,
             y: Y + t * r,
diff --git a/src/utils/base.ts b/src/utils/base.ts
index 57b9f36..1e98886 100644
--- a/src/utils/base.ts
+++ b/src/utils/base.ts
@@ -1,4 +1,4 @@
-import { Canvas, IShape } from "@antv/g-canvas";
+import { Canvas } from "@antv/g-canvas";
 import { ext } from '@antv/matrix-util';
 
 const { transform } = ext