Merge branch 'next'

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
+`MIT` © [leon-kfd](https://github.com/leon-kfd) 2023

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)

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>
+  )
+}

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
         }
       })