mirror of
https://github.com/konvajs/konva.git
synced 2025-06-28 06:55:17 +08:00
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
This commit is contained in:
Eric Rowell
parent
cc35abd0f6
commit
a2defa4bed
50
dist/kinetic-core.js
vendored
50
dist/kinetic-core.js
vendored
@ -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('mouseover', function(evt) {
|
||||
that._handleStageEvent(evt);
|
||||
}, false);
|
||||
*/
|
||||
|
||||
this.content.addEventListener('mouseout', function(evt) {
|
||||
// if there's a current target shape, run mouseout handlers
|
||||
@ -2095,14 +2113,14 @@ Kinetic.Stage.prototype = {
|
||||
this.content.addEventListener('touchstart', function(evt) {
|
||||
evt.preventDefault();
|
||||
that.touchStart = true;
|
||||
|
||||
|
||||
/*
|
||||
* init stage drag and drop
|
||||
*/
|
||||
if(that.attrs.draggable) {
|
||||
that._initDrag();
|
||||
}
|
||||
|
||||
|
||||
that._handleStageEvent(evt);
|
||||
}, false);
|
||||
|
||||
@ -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
4
dist/kinetic-core.min.js
vendored
File diff suppressed because one or more lines are too long
34
src/Stage.js
34
src/Stage.js
@ -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('mouseover', function(evt) {
|
||||
that._handleStageEvent(evt);
|
||||
}, false);
|
||||
*/
|
||||
|
||||
this.content.addEventListener('mouseout', function(evt) {
|
||||
// if there's a current target shape, run mouseout handlers
|
||||
@ -641,14 +659,14 @@ Kinetic.Stage.prototype = {
|
||||
this.content.addEventListener('touchstart', function(evt) {
|
||||
evt.preventDefault();
|
||||
that.touchStart = true;
|
||||
|
||||
|
||||
/*
|
||||
* init stage drag and drop
|
||||
*/
|
||||
if(that.attrs.draggable) {
|
||||
that._initDrag();
|
||||
}
|
||||
|
||||
|
||||
that._handleStageEvent(evt);
|
||||
}, false);
|
||||
|
||||
|
||||
@ -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]);
|
||||
|
||||
@ -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"
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -1173,38 +1173,39 @@ 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) {
|
||||
var c = worldMap[key];
|
||||
// induce scope
|
||||
( function() {
|
||||
var path = new Kinetic.Path({
|
||||
commands: c,
|
||||
fill: '#ccc',
|
||||
stroke: '#999',
|
||||
strokeWidth: 1
|
||||
});
|
||||
for(var key in worldMap.shapes) {
|
||||
var c = worldMap.shapes[key];
|
||||
|
||||
path.on('mouseover', function() {
|
||||
//console.log(1)
|
||||
//path.setFill('red');
|
||||
//layer.draw();
|
||||
});
|
||||
var path = new Kinetic.Path({
|
||||
commands: c,
|
||||
fill: '#ccc',
|
||||
stroke: '#999',
|
||||
strokeWidth: 1
|
||||
});
|
||||
|
||||
path.on('mouseout', function() {
|
||||
//path.setFill('#ccc');
|
||||
//layer.draw();
|
||||
});
|
||||
path.on('mouseover', function() {
|
||||
//console.log(1)
|
||||
this.setFill('red');
|
||||
mapLayer.draw();
|
||||
});
|
||||
|
||||
layer.add(path);
|
||||
path.on('mouseout', function() {
|
||||
this.setFill('#ccc');
|
||||
mapLayer.draw();
|
||||
});
|
||||
|
||||
}());
|
||||
|
||||
stage.add(layer);
|
||||
mapLayer.add(path);
|
||||
}
|
||||
|
||||
stage.add(mapLayer);
|
||||
|
||||
},
|
||||
'SHAPE - add shape with custom attr pointing to self': function(containerId) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user