From b9fb45ff3a95ee1e2b380d7e4d800ad4c1e08ade Mon Sep 17 00:00:00 2001
From: kfd <kfd_personal@163.com>
Date: Thu, 19 Oct 2023 10:58:13 +0800
Subject: [PATCH] feat: init s-circle-multiple

---
 README.md                            |  2 +-
 src/components/g-audio.tsx           |  3 +-
 src/components/s-circle-multiple.tsx | 86 ++++++++++++++++++++++++++++
 src/components/s-line.tsx            |  4 +-
 4 files changed, 91 insertions(+), 4 deletions(-)
 create mode 100644 src/components/s-circle-multiple.tsx

diff --git a/README.md b/README.md
index d47ecb9..3172fe7 100644
--- a/README.md
+++ b/README.md
@@ -21,4 +21,4 @@ Online Demo: [Click Here](https://leon-kfd.github.io/g-music-visualizer)
 
 ## License
 
-`MIT` © [leon-kfd](https://github.com/leon-kfd) 2021
\ No newline at end of file
+`MIT` © [leon-kfd](https://github.com/leon-kfd) 2023
\ No newline at end of file
diff --git a/src/components/g-audio.tsx b/src/components/g-audio.tsx
index 0332d67..c414df9 100644
--- a/src/components/g-audio.tsx
+++ b/src/components/g-audio.tsx
@@ -8,11 +8,12 @@ import SCircle from './s-circle'
 import SPathDouble from './s-path-double'
 import SDot from "./s-dot";
 import SPaticle from "./s-particle";
+import SCircleMultiple from './s-circle-multiple';
 import { apiURL, DEFAULT_IMG } from '@/global'
 
 export const MusicVisualizerCtx = new MusicVisualizer()
 
-const exampleList = [SLine, SPathDouble, SPath, SPathFill, SDot, SCircle, SPaticle ]
+const exampleList = [SLine, SPathDouble, SPath, SPathFill, SDot, SPaticle, SCircle, SCircleMultiple]
 
 export default function GAudio() {
   const audio = useRef<HTMLAudioElement>(null)
diff --git a/src/components/s-circle-multiple.tsx b/src/components/s-circle-multiple.tsx
new file mode 100644
index 0000000..1ee9be2
--- /dev/null
+++ b/src/components/s-circle-multiple.tsx
@@ -0,0 +1,86 @@
+import React, { useEffect, useRef } from "react";
+import { Canvas, Image, Circle } from '@antv/g';
+import { Renderer } from '@antv/g-canvas';
+import { formatToTransit } from '../utils'
+import { getImageCircle } from '../utils/base'
+import { X, Y, R } from '../utils/constanst'
+import useAudioImg from "@/hooks/useAudioImg";
+
+export default function SLine(props: SComponentProps) {
+  const CIRCLE_NUM = 8
+  const OFFSET = 8
+  const CIRCLE_COLOR = '#e9dcf7'
+
+  const canvas = useRef<Canvas>()
+  const circle = useRef<Image>()
+  const sArr = useRef<Circle[]>([])
+
+  function getArray(arr: number[]) {
+    let _arr: number[] = [];
+    arr.map((item,index) => {
+      if (index % 2) {
+        _arr.push(item)
+      }
+    })
+    return formatToTransit(_arr, 5, 0.75)
+  }
+
+  useEffect(() => {
+    if (props.data?.length) {
+      const arr = getArray(props.data)
+      const part = 64 / CIRCLE_NUM
+      arr.map((item,index) => {
+        if (index % part === 0) {
+          const _index = index / part
+          const offset = item / 8
+          const deg = _index * (360 / CIRCLE_NUM) - 150;
+          const l = Math.cos(deg * Math.PI / 180)
+          const t = Math.sin(deg * Math.PI / 180)
+          sArr.current[_index]?.attr('cx', X + l * offset)
+          sArr.current[_index]?.attr('cy', Y + t * offset)
+        }
+      })
+    }
+  }, [
+    props.data
+  ])
+
+  useEffect(() => {
+    canvas.current = new Canvas({
+      container: 'SCircleMultiple',
+      width: 2 * X,
+      height: 2 * Y,
+      renderer: new Renderer()
+    });
+
+    sArr.current = Array.from({ length: CIRCLE_NUM }, (item, index: number) => {
+      const circle = new Circle({
+        style: {
+          cx: X,
+          cy: Y,
+          r: R + OFFSET,
+          stroke: CIRCLE_COLOR,
+          strokeWidth: 1,
+          shadowColor: '#ffaa44',
+          shadowBlur: 2,
+        }
+      })
+
+      canvas.current?.appendChild(circle)
+      return circle
+    })
+
+    circle.current = getImageCircle(canvas.current, {
+      x: X,
+      y: Y,
+      r: R,
+      shadowColor: CIRCLE_COLOR
+    })
+  }, [])
+
+  useAudioImg(canvas, circle, props.isPlaying, props.audioImg)
+
+  return (
+    <div id="SCircleMultiple" className="s-canvas-wrapper"></div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/s-line.tsx b/src/components/s-line.tsx
index b6c313e..d4c265d 100644
--- a/src/components/s-line.tsx
+++ b/src/components/s-line.tsx
@@ -64,8 +64,8 @@ export default function SLine(props: SComponentProps) {
           width: RECT_WIDTH,
           height: RECT_WIDTH,
           radius: RECT_WIDTH / 2,
-          x: X + l * r - RECT_WIDTH / 2,
-          y: Y + t * r - RECT_WIDTH / 2,
+          x: X + l * r,
+          y: Y + t * r,
           fill: RECT_COLOR
         }
       })