feat(ball): 增加可调参数

pages/component/canvas/canvas/ball.uvue

 <template>
   <view class="page-body">
-    <canvas id="canvas" class="canvas"></canvas>
+    <canvas id="canvas" class="canvas"></canvas>
     <text class="fps">FPS: {{fpsString}}</text>
+    <view class="item">
+      <text class="item-label">Speed</text>
+      <text class="item-value">{{ballSpeed}}</text>
+      <view class="item-fill"></view>
+      <button size="mini" @click="lessClick('speed')">-</button>
+      <button size="mini" @click="plusClick('speed')">+</button>
+    </view>
+    <view class="item">
+      <text class="item-label">Layer</text>
+      <text class="item-value">{{ballLayer}}</text>
+      <view class="item-fill"></view>
+      <button size="mini" @click="lessClick('layer')">-</button>
+      <button size="mini" @click="plusClick('layer')">+</button>
+    </view>
+    <view class="item">
+      <text class="item-label">Inlayer</text>
+      <text class="item-value">{{ballInlayer}}</text>
+      <view class="item-fill"></view>
+      <button size="mini" @click="lessClick('inLayer')">-</button>
+      <button size="mini" @click="plusClick('inLayer')">+</button>
+    </view>
   </view>
 </template>
 
-<script setup>
-  let fpsString = ref("-/-ms")
+<script setup>
+  let fpsString = ref("-/-ms")
+  let ballSpeed = ref(3)
+  let ballLayer = ref(3)
+  let ballInlayer = ref(20)
 
   class Ball {
     private width : number
@@ -51,18 +75,18 @@
   class BallAnimation {
     private ctx : CanvasRenderingContext2D
     private ballList : Array<Ball> = []
-    private speed = 3
-    private layer = 3
-    private ballInlayer = 20
-    private runningFlag : boolean = false
-
-    private _animateTaskId: number = 0
-    private frameCount = 0
-    private lastTime = 0
+    private _speed = 3
+    private _layer = 3
+    private _ballInlayer = 20
+    private runningFlag : boolean = false
+
+    private _animateTaskId : number = 0
+    private frameCount = 0
+    private lastTime = 0
 
     constructor(ctx : CanvasRenderingContext2D) {
       this.ctx = ctx
-      this.initBall()
+      this.initBall()
       this.ctx.fillStyle = '#007AFF'
     }
 
@@ -73,10 +97,10 @@
     private initBall() {
       const canvasWidth = this.ctx.canvas.offsetWidth;
       const canvasHeight = this.ctx.canvas.offsetHeight;
-      for (let i = 0; i < this.layer; i++) {
-        let radius = this.getDistance(canvasWidth / 2, canvasHeight / 2) / this.layer * i
-        for (let j = 0; j < this.ballInlayer; j++) {
-          let deg = j * 2 * Math.PI / this.ballInlayer,
+      for (let i = 0; i < this._layer; i++) {
+        let radius = this.getDistance(canvasWidth / 2, canvasHeight / 2) / this._layer * i
+        for (let j = 0; j < this._ballInlayer; j++) {
+          let deg = j * 2 * Math.PI / this._ballInlayer,
             sin = Math.sin(deg),
             cos = Math.cos(deg),
             x = radius * cos + canvasWidth / 2,
@@ -88,42 +112,71 @@
       }
     }
 
+    private reset() {
+      this.ballList.length = 0
+      this.initBall()
+    }
+
+    public get speed() : number {
+      return this._speed
+    }
+    public set speed(value : number) {
+      this._speed = value
+      this.reset()
+    }
+
+    public get layer() : number {
+      return this._layer
+    }
+    public set layer(value : number) {
+      this._layer = value
+      this.reset()
+    }
+
+    public get inLayer() : number {
+      return this._ballInlayer
+    }
+    public set inLayer(value : number) {
+      this._ballInlayer = value
+      this.reset()
+    }
+
     public animate() {
       this.ctx.clearRect(0, 0, this.ctx.canvas.offsetWidth, this.ctx.canvas.offsetHeight)
       this.ballList.forEach((item) => {
         item.move()
-        this.ctx.beginPath()
-        this.ctx.arc(item.x, item.y, item.radius, 0, 2 * Math.PI)
-        // this.ctx.ellipse(item.x, item.y, item.radius, item.radius, 0, 0, Math.PI * 2)
+        this.ctx.beginPath()
+        this.ctx.arc(item.x, item.y, item.radius, 0, 2 * Math.PI)
+        // this.ctx.ellipse(item.x, item.y, item.radius, item.radius, 0, 0, Math.PI * 2)
         this.ctx.fill()
-      })
-
-      if (!this.runningFlag) {
-        return
+      })
+
+      if (!this.runningFlag) {
+        return
       }
-      this._animateTaskId = requestAnimationFrame((timestamp: number) => {
-        this.animate()
-        this.updateFPS(timestamp)
+      this._animateTaskId = requestAnimationFrame((timestamp : number) => {
+        this.animate()
+        this.updateFPS(timestamp)
       })
     }
-
-    updateFPS(timestamp : number) {
-      this.frameCount++
-      if (timestamp - this.lastTime >= 1000) {
-        const timeOfFrame = (1000 / this.frameCount)
-        fpsString.value = `${this.frameCount} / ${timeOfFrame.toFixed(3)}ms`
-        this.frameCount = 0
-        this.lastTime = timestamp
-      }
-    }
-
-    start() {
-      cancelAnimationFrame(this._animateTaskId)
+
+    updateFPS(timestamp : number) {
+      this.frameCount++
+      if (timestamp - this.lastTime >= 1000) {
+        const timeOfFrame = (1000 / this.frameCount)
+        fpsString.value = `${this.frameCount} / ${timeOfFrame.toFixed(3)}ms`
+        this.frameCount = 0
+        this.lastTime = timestamp
+      }
+    }
+
+    start() {
+      cancelAnimationFrame(this._animateTaskId)
       this.runningFlag = true
       this.animate()
     }
 
-    stop() {
+    stop() {
       this.runningFlag = false
       cancelAnimationFrame(this._animateTaskId)
     }
@@ -146,6 +199,32 @@
     }
   })
 
+  let lessClick = (type : string) => {
+    if (type == 'speed') {
+      animation!.speed--;
+      ballSpeed.value = animation!.speed
+    } else if (type == 'layer') {
+      animation!.layer--;
+      ballLayer.value = animation!.layer
+    } else if (type == 'inLayer') {
+      animation!.inLayer--;
+      ballInlayer.value = animation!.inLayer
+    }
+  }
+
+  let plusClick = (type : string) => {
+    if (type == 'speed') {
+      animation!.speed++;
+      ballSpeed.value = animation!.speed
+    } else if (type == 'layer') {
+      animation!.layer++;
+      ballLayer.value = animation!.layer
+    } else if (type == 'inLayer') {
+      animation!.inLayer++;
+      ballInlayer.value = animation!.inLayer
+    }
+  }
+
   onUnload(() => {
     animation?.stop()
     animation = null
@@ -163,6 +242,10 @@
 <style>
   .page-body-wrapper {
     text-align: center;
+  }
+
+  .page-body {
+    padding: 15px;
   }
 
   .canvas {
@@ -170,10 +253,30 @@
     height: 300px;
     margin: auto;
     background-color: #fff;
+  }
+
+  .fps {
+    margin-top: 30px;
+    margin-bottom: 20px;
+  }
+
+  .item {
+    flex-direction: row;
+    align-items: center;
+    margin-top: 10px;
   }
 
-  .fps {
-    margin-left: 15px;
-    margin-top: 30px;
+  .item-label {
+    width: 120px;
+  }
+
+  .item-value {
+    margin-left: 5px;
+    color: cornflowerblue;
+    width: 50px;
+  }
+
+  .item-fill {
+    flex: 1;
   }
 </style>