优化控制栏的绘制

js/app.js

@@ -114,7 +114,7 @@ Anot({
     canvas.height = this.__HEIGHT__
     this.__CTX__ = canvas.getContext('2d')
 
-    this.draw()
+    this.draw(true)
 
     // 修改歌曲进度
     canvas.addEventListener(
@@ -231,26 +231,14 @@ Anot({
       Anot.ls('volume', volume)
     },
 
-    draw() {
+    __draw__() {
-      let img1 = new Image()
-      let img2 = new Image()
-      let p1 = Promise.defer()
-      let p2 = Promise.defer()
-      let { title, artist, cover } = this.curr
       let play = this.isPlaying
-
-      img1.onload = p1.resolve
-      img2.onload = p2.resolve
-      img1.src = '/images/disk.png'
-      img2.src = cover || '/images/album.png'
-
       let rx = (play ? 112 : 40) + this.__HEIGHT__ / 2 // 旋转唱片的圆心坐标X
       let ry = this.__HEIGHT__ / 2 // 旋转唱片的圆心坐标Y
       let pw = this.__WIDTH__ - this.__HEIGHT__ - 180 // 进度条总长度
       let wl = this.__HEIGHT__ + 180 // 文字的坐标X
 
-      const draw = () => {
+      let { time, duration, title, artist } = this.curr
-        let { time, duration } = this.curr
       let pp = time / duration // 进度百分比
       time = Anot.filters.time(time)
       duration = Anot.filters.time(duration)
@@ -264,7 +252,7 @@ Anot({
       this.__CTX__.translate(-rx, -ry)
 
       this.__CTX__.drawImage(
-          img1,
+        this.__img1__,
         play ? 112 : 40,
         0,
         this.__HEIGHT__,
@@ -273,7 +261,13 @@ Anot({
 
       this.__CTX__.restore()
 
-        this.__CTX__.drawImage(img2, 0, 0, this.__HEIGHT__, this.__HEIGHT__)
+      this.__CTX__.drawImage(
+        this.__img2__,
+        0,
+        0,
+        this.__HEIGHT__,
+        this.__HEIGHT__
+      )
 
       // 歌曲标题和歌手
       this.__CTX__.fillStyle = COLORS[this.ktvMode].title
@@ -283,11 +277,7 @@ Anot({
       // 时间
       this.__CTX__.fillStyle = COLORS[this.ktvMode].lrc
       this.__CTX__.font = '48px' + FONTS_NAME
-        this.__CTX__.fillText(
+      this.__CTX__.fillText(`${time} / ${duration}`, this.__WIDTH__ - 280, 100)
-          `${time} / ${duration}`,
-          this.__WIDTH__ - 280,
-          100
-        )
 
       // 歌词
       this.__CTX__.fillStyle = COLORS[this.ktvMode].lrc
@@ -301,19 +291,42 @@ Anot({
       this.__CTX__.fillRect(wl, 230, pw * pp, 16)
 
       this.__DEG__ += 0.01
-      }
+    },
+
+    draw(force) {
+      if (force) {
+        this.__img1__ = new Image()
+        this.__img2__ = new Image()
+
+        let p1 = Promise.defer()
+        let p2 = Promise.defer()
+
+        this.__img1__.onload = p1.resolve
+        this.__img2__.onload = p2.resolve
+        this.__img1__.src = '/images/disk.png'
+        this.__img2__.src = this.curr.cover || '/images/album.png'
 
         Promise.all([p1.promise, p2.promise]).then(_ => {
           clearInterval(this.timer)
           this.__DEG__ = 0.01
-        if (play) {
+          if (this.isPlaying) {
-          this.timer = setInterval(() => {
+            this.timer = setInterval(_ => {
-            draw(img1, img2, play, rx, ry)
+              this.__draw__()
             }, 20)
           } else {
-          draw(img1, img2, play, rx, ry)
+            this.__draw__()
           }
         })
+      } else {
+        clearInterval(this.timer)
+        if (this.isPlaying) {
+          this.timer = setInterval(_ => {
+            this.__draw__()
+          }, 20)
+        } else {
+          this.__draw__()
+        }
+      }
     },
 
     nextSong(step) {
@@ -350,27 +363,29 @@ Anot({
         song.time = 0
         this.updateCurr(song)
         this.isPlaying = true
+        this.draw(true)
       } else {
         if (SONIST.stat === 'ready') {
+          let played = this.isPlaying
+          this.isPlaying = !this.isPlaying
           if (this.curr.id) {
-            if (this.isPlaying) {
+            if (played) {
               SONIST.pause()
             } else {
               SONIST.play()
             }
+            this.draw()
           } else {
             let lastPlay = Anot.ls('last-play') || 0
             SONIST.play(lastPlay).then(it => {
               it.time = 0
               this.updateCurr(it)
-              this.draw()
+              this.draw(true)
               // this.ktvMode = 1
             })
           }
-          this.isPlaying = !this.isPlaying
         }
       }
-      this.draw()
     }
   }
 })

js/modules/local.js

@@ -111,7 +111,7 @@ export default Anot({
               SONIST.push(LS.getAll())
 
               this.__APP__.updateCurr(it)
-              this.__APP__.draw()
+              this.__APP__.draw(true)
 
               fs.echo(json.lyrics, it.lyrics)
               fs.echo(JSON.stringify(LS.getAll(), '', 2), MUSIC_DB_PATH)