performance: add 16ms delay for canvas draw.

antvis · Jun 11, 2018 · 012c9fc · 012c9fc
1 parent 9ac5a54
commit 012c9fc
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 41 deletions.
diff --git a/demos/column-00.html b/demos/column-00.html
@@ -31,7 +31,7 @@
 
   chart.source(data, {
     sales: {
-      tickCount: 5
+      min: 20,
     }
   });
   chart.tooltip({

diff --git a/src/graphic/animate/timeline.js b/src/graphic/animate/timeline.js
@@ -1,10 +1,4 @@
-const requestAnimationFrame = typeof window === 'object' && window.requestAnimationFrame ? window.requestAnimationFrame : function(fn) {
-  return setTimeout(fn, 16);
-};
-// const cancelAnimationFrame = typeof window === 'object' && window.cancelAnimationFrame ? window.cancelAnimationFrame : function(id) {
-//   return clearInterval(id);
-// };
-
+const { requestAnimationFrame } = require('../util/requestAnimationFrame');
 const clock = typeof performance === 'object' && performance.now ? performance : Date;
 
 class Timeline {
@@ -116,11 +110,4 @@ class Timeline {
   }
 }
 
-// Timeline.getGlobalInstance = function() {
-//   if (!Timeline.globalInstance) {
-//     Timeline.globalInstance = new Timeline();
-//   }
-//   return Timeline.globalInstance;
-// };
-
 module.exports = Timeline;
diff --git a/src/graphic/canvas.js b/src/graphic/canvas.js
@@ -1,6 +1,7 @@
 const Util = require('../util/common');
 const Container = require('./container');
 const Group = require('./group');
+const { requestAnimationFrame } = require('./util/requestAnimationFrame');
 
 class Canvas {
   get(name) {
@@ -27,7 +28,7 @@ class Canvas {
     }
   }
 
-  _beforeDraw() {
+  beforeDraw() {
     const context = this._attrs.context;
     const el = this._attrs.el;
     !Util.isWx && !Util.isMy && context && context.clearRect(0, 0, el.width, el.height);
@@ -138,26 +139,49 @@ class Canvas {
     };
   }
 
+  _beginDraw() {
+    this._attrs.toDraw = true;
+  }
+  _endDraw() {
+    this._attrs.toDraw = false;
+  }
+
   draw() {
     const self = this;
-    if (self._attrs.destroyed) {
-      return;
-    }
-    self._beforeDraw();
-    try {
-      const context = self._attrs.context;
-      const children = self._attrs.children;
-      for (let i = 0, len = children.length; i < len; i++) {
-        const child = children[i];
-        child.draw(context);
+    function drawInner() {
+      self.set('animateHandler', requestAnimationFrame(() => {
+        self.set('animateHandler', undefined);
+        if (self.get('toDraw')) {
+          drawInner();
+        }
+      }));
+      self.beforeDraw();
+      try {
+        const context = self._attrs.context;
+        const children = self._attrs.children;
+        for (let i = 0, len = children.length; i < len; i++) {
+          const child = children[i];
+          child.draw(context);
+        }
+
+        if (Util.isWx || Util.isMy) {
+          context.draw();
+        }
+      } catch (ev) { // 绘制时异常，中断重绘
+        console.warn('error in draw canvas, detail as:');
+        console.warn(ev);
+        self._endDraw();
       }
+      self._endDraw();
+    }
 
-      if (Util.isWx || Util.isMy) {
-        context.draw();
-      }
-    } catch (ev) { // 绘制时异常，中断重绘
-      console.warn('error in draw canvas, detail as:');
-      console.warn(ev);
+    if (self.get('destroyed')) {
+      return;
+    }
+    if (self.get('animateHandler')) {
+      this._beginDraw();
+    } else {
+      drawInner();
     }
   }
 

diff --git a/src/graphic/util/requestAnimationFrame.js b/src/graphic/util/requestAnimationFrame.js
@@ -0,0 +1,5 @@
+module.exports = {
+  requestAnimationFrame: typeof window === 'object' && window.requestAnimationFrame ? window.requestAnimationFrame : function(fn) {
+    return setTimeout(fn, 16);
+  }
+};
diff --git a/src/interaction/category-pan.js b/src/interaction/category-pan.js
@@ -14,7 +14,8 @@ class CategoryPan extends Interaction {
       threshold: 10, // Minimal pan distance required before recognizing.
       currentDeltaX: null,
       panning: false,
-      originValues: null
+      originValues: null,
+      _timestamp: 0
     });
   }
 
@@ -45,7 +46,13 @@ class CategoryPan extends Interaction {
       this.panning = true;
       const deltaX = e.deltaX - currentDeltaX;
       this.currentDeltaX = e.deltaX;
-      this._doPan(deltaX);
+
+      const lastTimestamp = this._timestamp;
+      const now = +new Date();
+      if ((now - lastTimestamp) > 16) {
+        this._doPan(deltaX);
+        this._timestamp = now;
+      }
     }
   }
 

diff --git a/src/interaction/category-pinch.js b/src/interaction/category-pinch.js
@@ -13,7 +13,8 @@ class CategoryPinch extends Interaction {
       currentPinchScaling: null,
       originValues: null,
       minScale: 1, // Minimum zoom
-      maxScale: 4 // Maximum zoom
+      maxScale: 4, // Maximum zoom
+      _timestamp: 0
     });
   }
 
@@ -49,7 +50,12 @@ class CategoryPinch extends Interaction {
       x: offsetX,
       y: offsetY
     };
-    this._doZoom(diff, center);
+    const lastTimestamp = this._timestamp;
+    const now = +new Date();
+    if ((now - lastTimestamp) > 16) {
+      this._doZoom(diff, center);
+      this._timestamp = now;
+    }
 
     // Keep track of overall scale
     this.currentPinchScaling = e.scale;

diff --git a/src/interaction/linear-pan.js b/src/interaction/linear-pan.js
@@ -16,7 +16,8 @@ class LinearPan extends Interaction {
       currentDeltaX: null,
       currentDeltaY: null,
       panning: false,
-      limitRange: {} // 限制范围
+      limitRange: {}, // 限制范围
+      _timestamp: 0
     });
   }
 
@@ -51,7 +52,13 @@ class LinearPan extends Interaction {
       const deltaY = e.deltaY - currentDeltaY;
       this.currentDeltaX = e.deltaX;
       this.currentDeltaY = e.deltaY;
-      this._doPan(deltaX, deltaY);
+
+      const lastTimestamp = this._timestamp;
+      const now = +new Date();
+      if ((now - lastTimestamp) > 16) {
+        this._doPan(deltaX, deltaY);
+        this._timestamp = now;
+      }
     }
   }
 

diff --git a/src/interaction/linear-pinch.js b/src/interaction/linear-pinch.js
@@ -14,7 +14,8 @@ class LinearPinch extends Interaction {
       mode: 'x', // 方向，可取值 x、y、xy
       currentPinchScaling: null, // 当前
       minScale: null,
-      maxScale: null
+      maxScale: null,
+      _timestamp: 0
     });
   }
 
@@ -66,7 +67,12 @@ class LinearPinch extends Interaction {
     } else {
       xy = 'y';
     }
-    this._doZoom(diff, center, xy);
+    const lastTimestamp = this._timestamp;
+    const now = +new Date();
+    if ((now - lastTimestamp) > 16) {
+      this._doZoom(diff, center, xy);
+      this._timestamp = now;
+    }
 
     // Keep track of overall scale
     this.currentPinchScaling = e.scale;

diff --git a/src/util/helper.js b/src/util/helper.js
@@ -1,4 +1,4 @@
-const { Shape } = require('../graphic/');
+const { Shape } = require('../graphic/index');
 module.exports = {
   getClip(coord) {
     const start = coord.start;