Permalink
Browse files

performance: add 16ms delay for canvas draw.

  • Loading branch information...
simaQ committed Jun 7, 2018
1 parent 9ac5a54 commit 012c9fcc51a0fae11eca797741e941df31aed89d
@@ -31,7 +31,7 @@
chart.source(data, {
sales: {
tickCount: 5
min: 20,
}
});
chart.tooltip({
@@ -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;
@@ -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();
}
}

@@ -0,0 +1,5 @@
module.exports = {
requestAnimationFrame: typeof window === 'object' && window.requestAnimationFrame ? window.requestAnimationFrame : function(fn) {
return setTimeout(fn, 16);
}
};
@@ -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;
}
}
}

@@ -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;
@@ -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;
}
}
}

@@ -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;
@@ -1,4 +1,4 @@
const { Shape } = require('../graphic/');
const { Shape } = require('../graphic/index');
module.exports = {
getClip(coord) {
const start = coord.start;

0 comments on commit 012c9fc

Please sign in to comment.