lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 15:23:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

turns out there was no performance problems with the path (made a dumb mistake with implementation). However, during the analysis, I ended up adding event detection throttling which is pretty handy. It cuts down unecessary mousemove event handling dramatically and greatly improves performance when you have thousands of shapes

Browse Source
This commit is contained in:
Eric Rowell 2012-05-27 23:41:05 -07:00
parent cc35abd0f6
commit a2defa4bed
7 changed files with 95 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
dist/kinetic-core.js vendored
View File

@ -1468,10 +1468,12 @@ Kinetic.Container.prototype = {
Kinetic.Stage = function(config) {
this.setDefaultAttrs({
width: 400,
height: 200
height: 200,
throttle: 80
});
this.nodeType = 'Stage';
this.lastEventTime = 0;
/*
* if container is a string, assume it's an id for
@ -2003,11 +2005,26 @@ Kinetic.Stage.prototype = {
return false;
},
_handleStageEvent: function(evt) {
var throttle = this.attrs.throttle;
var date = new Date();
var time = date.getTime();
var timeDiff = time - this.lastEventTime;
var tt = 1000 / throttle;
if(timeDiff >= tt) {
this._handleStageEventContinue(evt);
}
},
/**
* handle incoming event
* @param {Event} evt
*/
_handleStageEvent: function(evt) {
_handleStageEventContinue: function(evt) {
var date = new Date();
var time = date.getTime();
this.lastEventTime = time;
var go = Kinetic.GlobalObject;
if(!evt) {
evt = window.event;
@ -2077,10 +2094,11 @@ Kinetic.Stage.prototype = {
that._handleStageEvent(evt);
that.clickStart = false;
}, false);
/*
this.content.addEventListener('mouseover', function(evt) {
that._handleStageEvent(evt);
}, false);
*/
this.content.addEventListener('mouseout', function(evt) {
// if there's a current target shape, run mouseout handlers
@ -4072,24 +4090,20 @@ Kinetic.Path = function(config) {
var c = ca[n].command;
var p = ca[n].points;
switch(c) {
case 'M':
context.moveTo(p[0], p[1]);
break;
case 'L':
context.lineTo(p[0], p[1]);
break;
case 'M':
context.moveTo(p[0], p[1]);
break;
case 'z':
context.closePath();
break;
}
}
context.closePath();
//this.fill();
context.fillStyle = '#999';
context.fill();
context.strokeStyle = '#555';
context.stroke();
//this.stroke();
this.fill();
this.stroke();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);

4
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

24
src/Stage.js
View File

@ -14,10 +14,12 @@
Kinetic.Stage = function(config) {
this.setDefaultAttrs({
width: 400,
height: 200
height: 200,
throttle: 80
});
this.nodeType = 'Stage';
this.lastEventTime = 0;
/*
* if container is a string, assume it's an id for
@ -549,11 +551,26 @@ Kinetic.Stage.prototype = {
return false;
},
_handleStageEvent: function(evt) {
var throttle = this.attrs.throttle;
var date = new Date();
var time = date.getTime();
var timeDiff = time - this.lastEventTime;
var tt = 1000 / throttle;
if(timeDiff >= tt) {
this._handleStageEventContinue(evt);
}
},
/**
* handle incoming event
* @param {Event} evt
*/
_handleStageEvent: function(evt) {
_handleStageEventContinue: function(evt) {
var date = new Date();
var time = date.getTime();
this.lastEventTime = time;
var go = Kinetic.GlobalObject;
if(!evt) {
evt = window.event;
@ -623,10 +640,11 @@ Kinetic.Stage.prototype = {
that._handleStageEvent(evt);
that.clickStart = false;
}, false);
/*
this.content.addEventListener('mouseover', function(evt) {
that._handleStageEvent(evt);
}, false);
*/
this.content.addEventListener('mouseout', function(evt) {
// if there's a current target shape, run mouseout handlers

16
src/shapes/Path.js
View File

@ -23,24 +23,20 @@ Kinetic.Path = function(config) {
var c = ca[n].command;
var p = ca[n].points;
switch(c) {
case 'M':
context.moveTo(p[0], p[1]);
break;
case 'L':
context.lineTo(p[0], p[1]);
break;
case 'M':
context.moveTo(p[0], p[1]);
break;
case 'z':
context.closePath();
break;
}
}
context.closePath();
//this.fill();
context.fillStyle = '#999';
context.fill();
context.strokeStyle = '#555';
context.stroke();
//this.stroke();
this.fill();
this.stroke();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);

4
tests/assets/worldMap.js
View File

@ -1,5 +1,5 @@
var worldMap = {
shapes: {
AE: "M604.196,161.643l0.514-0.129l0,0.772l2.188-0.386l2.189,0l1.672,0.129l1.803-1.802l2.058-1.802l1.674-1.673l0.518,0.900l0.385,2.189l-1.417,0l-0.258,1.802l0.517,0.386l-1.159,0.515l-0.129,1.029l-0.773,1.159l0,1.030l-0.514,0.644l-8.110-1.416l-1.031-2.704l0.127,0.643z",
AF: "M630.069,130.876l2.832,1.030l2.059-0.257l0.517-1.288l2.058-0.386l1.546-0.772l0.515-2.188l2.317-0.516l0.387-1.030l1.285,0.774l0.902,0.128l1.416,0l2.059,0.515l0.773,0.385l2.059-0.900l0.901,0.515l0.773-1.287l1.674,0.128l0.386-0.387l0.256-1.157l1.160-0.903l1.543,0.645l-0.384,0.772l0.901,0.129l-0.259,2.317l1.030,0.900l0.904-0.643l1.285-0.257l1.674-1.159l1.802,0.129l2.832,0l0.387,0.773l-1.545,0.385l-1.416,0.516l-3.090,0.256l-2.833,0.517l-1.545,1.287l0.645,1.029l0.257,1.416l-1.287,1.159l0.129,1.029l-0.773,0.902l-2.575,0l1.030,1.673l-1.673,0.772l-1.158,1.545l0.129,1.674l-1.031,0.772l-1.029-0.257l-2.061,0.386l-0.257,0.644l-2.058,0l-1.417,1.544l-0.129,2.317l-3.476,1.159l-1.931-0.257l-0.514,0.643l-1.674-0.386l-2.704,0.386l-4.504-1.415l2.445-2.447l-0.129-1.673l-2.060-0.515l-0.256-1.674l-0.902-2.188l1.158-1.416l-1.158-0.386l0.773-1.930l-1.029,3.477z",
AL: "M520.651,114.27l-0.257,0.900l0.385,1.160l1.029,0.643l0,0.644l-0.901,0.386l-0.128,0.901l-1.288,1.287l-0.386-0.128l-0.127-0.644l-1.417-0.900l-0.259-1.288l0.259-1.803l0.256-0.901l-0.384-0.386l-0.258-0.901l1.287-1.288l0.129,0.516l0.771-0.258l0.516,0.773l0.643,0.257l-0.130-1.030z",
@ -173,5 +173,5 @@ var worldMap = {
ZA: "M550.13,305.822l-0.516,0.387l-1.158,1.287l-0.773,1.416l-1.544,1.93l-2.96,2.832l-1.932,1.545l-2.061,1.287l-2.832,1.031l-1.287,0.128l-0.387,0.772l-1.672-0.386l-1.288,0.514l-2.961-0.514l-1.544,0.257l-1.158-0.128l-2.834,1.028l-2.316,0.517l-1.545,1.028h-1.285l-1.16-0.9l-0.9-0.128l-1.158-1.16l-0.131,0.388l-0.385-0.772v-1.546l-0.771-1.801l0.771-0.516v-2.061l-1.802-2.445l-1.288-2.316l-1.931-3.478l1.286-1.415l1.032,0.773l0.384,1.158l1.288,0.129l1.673,0.514l1.418-0.129l2.445-1.416v-9.912l0.772,0.387l1.544,2.574l-0.258,1.674l0.645,0.9l1.93-0.256l1.289-1.287l1.287-0.774l0.643-1.286l1.287-0.645l1.158,0.387l1.288,0.773l2.188,0.129l1.801-0.645l0.258-0.901l0.387-1.287l1.545-0.128l0.772-1.03l0.901-1.804l2.445-2.059l3.733-1.93h1.157l1.289,0.514l0.9-0.387l1.416,0.258l1.287,3.862l0.771,1.802l-0.514,3.09l0.258,0.9l-1.416-0.385l-0.773,0.129l-0.258,0.771l-0.771,1.029L547.94,299l1.545,1.544l1.545-0.386l0.644-1.158h2.059l-0.772,1.93l-0.258,2.318l-0.77,1.157L550.13,305.822zM543.306,304.922l-1.158-0.773l-1.287,0.516l-1.416,1.029l-1.416,1.803l1.931,2.059l1.03-0.258l0.514-0.9l1.417-0.386l0.515-0.901l0.773-1.287L543.306,304.922z",
ZM: "M553.476,251.883l1.287,1.160l0.644,2.315l-0.386,0.644l-0.645,2.189l0.516,2.317l-0.773,0.902l-0.772,2.447l1.416,0.770l-8.239,2.189l0.258,1.932l-2.060,0.385l-1.543,1.031l-0.259,1.028l-1.028,0.130l-2.319,2.188l-1.545,1.802l-0.902,0l-0.772,-0.257l-3.088,-0.256l-0.515,-0.259l0,-0.259l-1.030,-0.513l-1.803,-0.258l-2.187,0.644l-1.673,-1.674l-1.804,-2.187l0.128,-8.625l5.536,0.127l-0.257,-1.028l0.387,-0.903l-0.387,-1.287l0.257,-1.286l-0.257,-0.902l0.901,0.130l0.128,0.772l1.289,0l1.672,0.258l0.903,1.158l2.187,0.385l1.674,-0.901l0.644,1.416l2.058,0.387l0.903,1.158l1.159,1.545l2.058,0l-0.258,-2.961l-0.642,0.516l-1.932,-1.031l-0.772,-0.514l0.387,-2.705l0.514,-3.088l-0.642,-1.288l0.771,-1.673l0.643,-0.387l3.733,-0.386l1.030,0.258l1.159,0.773l1.030,0.387l1.675,0.384l-1.543,-0.901z",
ZW: "M549.228,286.898l-1.416,-0.257l-0.901,0.386l-1.289,-0.513l-1.157,0l-1.673,-1.290l-2.061,-0.385l-0.772,-1.674l0,-1.030l-1.158,-0.256l-3.089,-2.962l-0.900,-1.544l-0.516,-0.516l-1.030,-2.058l3.088,0.256l0.772,0.257l0.902,0l1.545,-1.802l2.319,-2.188l1.028,-0.130l0.259,-1.028l1.543,-1.031l2.060,-0.385l0.129,1.029l2.317,-0.129l1.287,0.645l0.515,0.645l1.287,0.254l1.415,0.774l0,3.475l-0.513,1.801l-0.128,2.061l0.385,0.773l-0.257,1.545l-0.386,0.258l-0.773,1.930l2.832,-3.089z"
}
};

2
tests/js/Test.js
View File

@ -16,7 +16,7 @@ function log(message) {
* Test constructor
*/
function Test() {
this.testOnly = 'SHAPE - add path';
this.testOnly = '';
this.counter = 0;
testCounter = document.createElement('div');

31
tests/js/unitTests.js
View File

@ -1173,14 +1173,17 @@ Test.prototype.tests = {
var stage = new Kinetic.Stage({
container: containerId,
width: 1024,
height: 480
height: 480,
throttle: 80,
scale: 0.5,
x: 50,
y: 10
});
var layer = new Kinetic.Layer();
var mapLayer = new Kinetic.Layer();
for(var key in worldMap.shapes) {
var c = worldMap.shapes[key];
for(var key in worldMap) {
var c = worldMap[key];
// induce scope
( function() {
var path = new Kinetic.Path({
commands: c,
fill: '#ccc',
@ -1190,22 +1193,20 @@ Test.prototype.tests = {
path.on('mouseover', function() {
//console.log(1)
//path.setFill('red');
//layer.draw();
this.setFill('red');
mapLayer.draw();
});
path.on('mouseout', function() {
//path.setFill('#ccc');
//layer.draw();
this.setFill('#ccc');
mapLayer.draw();
});
layer.add(path);
}());
stage.add(layer);
mapLayer.add(path);
}
stage.add(mapLayer);
},
'SHAPE - add shape with custom attr pointing to self': function(containerId) {
var stage = new Kinetic.Stage({