commit 64d0d1da4d6b4ba7f302d109e376d76edf0bb423
author pissang <bm2736892@gmail.com> Tue Feb 22 12:52:03 2022 +0800
committer pissang <bm2736892@gmail.com> Tue Feb 22 12:52:03 2022 +0800
tree ea5befebb6aa77456aa6837839c1f121a86df594
parent c39e54b1499668df35bcc4e0d94c231481361653

exporting progress with higher precision

src/components/BChart.vue

diff --git a/src/components/BChart.vue b/src/components/BChart.vue
index a1cec57..f56b291 100644
--- a/src/components/BChart.vue
+++ b/src/components/BChart.vue
@@ -7,7 +7,7 @@
             </a>
         </div>
         <div v-else slot="header" class="text-base flex items-center">
-            <el-progress width="30" class="mr-5" type="circle" :show-text="false" :percentage="exportingProgress"></el-progress>
+            <el-progress :width="30" class="mr-5" type="circle" :show-text="false" :percentage="exportingProgress"></el-progress>
             {{$t('exporting')}} {{exportingProgress.toFixed(0) + '%'}}
             <el-button @click="cancelDownload()" size="mini" icon="el-icon-close" class="ml-5">
                 {{$t('cancel')}}
@@ -86,7 +86,7 @@
                 }
 
                 recorder = new WebMWriter({
-                    frameRate: fps || 30,
+                    frameRate: fps,
                     transparent: true
                 });
 
@@ -97,7 +97,7 @@
 
                 const title = this.title || this.$t('toolName') || 'bar-racing';
 
-                await this.doRun((curr, total) => {
+                await this.doRun(fps, (curr, total) => {
                     this.exportingProgress = curr / total * 100;
                 });
                 // Canceld
@@ -225,7 +225,7 @@
             catch (e) {}
         },
 
-        async doRun(onProgress?: (curr: number, total: number) => void) {
+        async doRun(fps = 60, onProgress?: (curr: number, total: number) => void) {
             if (!this.chartData || this.chartData.length < headerLength) {
                 return;
             }
@@ -248,6 +248,7 @@
                     }]
                 });
 
+
                 return new Promise((resolve) => {
                     setTimeout(() => {
                         resolve(undefined);
@@ -255,16 +256,29 @@
                 })
             }
 
+            let frameCount = 0;
+            let totalFrames = fps * this.animationDuration / 1000 * dataCnt;
+            function frameCounter() {
+                frameCount++;
+                onProgress && onProgress(frameCount, totalFrames);
+            }
+
+            if (onProgress) {
+                chart.getZr().animation.on('frame', frameCounter);
+            }
+
             for (let i = 0; i < dataCnt; ++i) {
                 onProgress && onProgress(i, dataCnt);
                 // Cancled.
                 if (!this.isExportingVideo) {
+                    chart.getZr().animation.off('frame', frameCounter);
                     return;
                 }
                 const row = that.chartData[headerLength + i + 1] as string[];
                 await step(row);
             }
 
+            chart.getZr().animation.off('frame', frameCounter);
             onProgress && onProgress(dataCnt, dataCnt);
         }
     }