added layer throttling which greatly improves drag and drop and other mousemove drawing performance

This commit is contained in:
Eric Rowell
2012-04-28 11:18:40 -07:00
parent 04554e0e6a
commit 4e82139b74
4 changed files with 72 additions and 13 deletions

View File

@@ -10,8 +10,15 @@
* @param {Object} config
*/
Kinetic.Layer = function(config) {
// default attrs
if(this.attrs === undefined) {
this.attrs = {};
}
this.attrs.throttle = 12;
this.nodeType = 'Layer';
this.lastDrawTime = 0;
this.canvas = document.createElement('canvas');
this.context = this.canvas.getContext('2d');
this.canvas.style.position = 'absolute';
@@ -29,7 +36,28 @@ Kinetic.Layer.prototype = {
* or shapes
*/
draw: function() {
this._draw();
var throttle = this.attrs.throttle;
var date = new Date();
var time = date.getTime();
var timeDiff = time - this.lastDrawTime;
if(timeDiff >= throttle) {
this._draw();
this.lastDrawTime = time;
}
},
/**
* set throttle
* @param {Number} throttle in ms
*/
setThrottle: function(throttle) {
this.attrs.throttle = throttle;
},
/**
* get throttle
*/
getThrottle: function() {
return this.attrs.throttle;
},
/**
* clears the canvas context tied to the layer. Clearing