lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-03-10 00:23:32 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

after doing some more performance testing, decided to remove class level cache in favor of local method variable caching only

Browse Source
This commit is contained in:
Eric Rowell
2012-11-13 23:48:30 -08:00
parent 3c3351ec6f
commit 914ee2fb4b
3 changed files with 27 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/Node.js
View File

@@ -1,7 +1,4 @@
Kinetic.Node = (function() { Kinetic.Node = (function() {
// variable cache
var TYPE = Kinetic.Type;
/** /**
* Node constructor.  Nodes are entities that can be transformed, layered, * Node constructor.  Nodes are entities that can be transformed, layered,
* and have events bound to them. They are the building blocks of a KineticJS * and have events bound to them. They are the building blocks of a KineticJS
@@ -223,7 +220,7 @@ Kinetic.Node = (function() {
for(var key in config) { for(var key in config) {
var method = 'set' + key.charAt(0).toUpperCase() + key.slice(1); var method = 'set' + key.charAt(0).toUpperCase() + key.slice(1);
// use setter if available // use setter if available
if(TYPE._isFunction(this[method])) { if(Kinetic.Type._isFunction(this[method])) {
this[method](config[key]); this[method](config[key]);
} }
// otherwise set directly // otherwise set directly
@@ -342,7 +339,7 @@ Kinetic.Node = (function() {
* @param {Number} y * @param {Number} y
*/ */
setPosition: function() { setPosition: function() {
var pos = TYPE._getXY([].slice.call(arguments)); var pos = Kinetic.Type._getXY([].slice.call(arguments));
this.setAttr('x', pos.x); this.setAttr('x', pos.x);
this.setAttr('y', pos.y); this.setAttr('y', pos.y);
}, },
@@ -376,7 +373,7 @@ Kinetic.Node = (function() {
* y property * y property
*/ */
setAbsolutePosition: function() { setAbsolutePosition: function() {
var pos = TYPE._getXY([].slice.call(arguments)); var pos = Kinetic.Type._getXY([].slice.call(arguments));
var trans = this._clearTransform(); var trans = this._clearTransform();
// don't clear translation // don't clear translation
this.attrs.x = trans.x; this.attrs.x = trans.x;
@@ -405,8 +402,7 @@ Kinetic.Node = (function() {
* @param {Number} y * @param {Number} y
*/ */
move: function() { move: function() {
var pos = TYPE._getXY([].slice.call(arguments)); var pos = Kinetic.Type._getXY([].slice.call(arguments));
var x = this.getX(); var x = this.getX();
var y = this.getY(); var y = this.getY();
@@ -558,6 +554,7 @@ Kinetic.Node = (function() {
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
*/ */
toObject: function() { toObject: function() {
var type = Kinetic.Type;
var obj = {}; var obj = {};
obj.attrs = {}; obj.attrs = {};
@@ -565,7 +562,7 @@ Kinetic.Node = (function() {
// serialize only attributes that are not function, image, DOM, or objects with methods // serialize only attributes that are not function, image, DOM, or objects with methods
for(var key in this.attrs) { for(var key in this.attrs) {
var val = this.attrs[key]; var val = this.attrs[key];
if(!TYPE._isFunction(val) && !TYPE._isElement(val) && !(TYPE._isObject(val) && TYPE._hasMethods(val))) { if(!type._isFunction(val) && !type._isElement(val) && !(type._isObject(val) && kineticType._hasMethods(val))) {
obj.attrs[key] = val; obj.attrs[key] = val;
} }
} }
@@ -764,7 +761,7 @@ Kinetic.Node = (function() {
* is very high quality * is very high quality
*/ */
toImage: function(config) { toImage: function(config) {
TYPE._getImage(this.toDataURL(config), function(img) { Kinetic.Type._getImage(this.toDataURL(config), function(img) {
config.callback(img); config.callback(img);
}); });
}, },
@@ -776,7 +773,7 @@ Kinetic.Node = (function() {
* @param {Number} y * @param {Number} y
*/ */
setOffset: function() { setOffset: function() {
var pos = TYPE._getXY([].slice.call(arguments)); var pos = Kinetic.Type._getXY([].slice.call(arguments));
if(pos.x === undefined) { if(pos.x === undefined) {
pos.x = this.getOffset().x; pos.x = this.getOffset().x;
} }
@@ -793,7 +790,7 @@ Kinetic.Node = (function() {
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
*/ */
setScale: function() { setScale: function() {
var pos = TYPE._getXY([].slice.call(arguments)); var pos = Kinetic.Type._getXY([].slice.call(arguments));
if(pos.x === undefined) { if(pos.x === undefined) {
pos.x = this.getScale().x; pos.x = this.getScale().x;
@@ -813,7 +810,7 @@ Kinetic.Node = (function() {
*/ */
setSize: function() { setSize: function() {
// set stage dimensions // set stage dimensions
var size = TYPE._getSize(Array.prototype.slice.call(arguments)); var size = Kinetic.Type._getSize(Array.prototype.slice.call(arguments));
this.setWidth(size.width); this.setWidth(size.width);
this.setHeight(size.height); this.setHeight(size.height);
}, },

24
src/Shape.js
View File

@@ -1,7 +1,4 @@
Kinetic.Shape = (function() { Kinetic.Shape = (function() {
// variable cache
var TYPE = Kinetic.Type;
/** /**
* Shape constructor. Shapes are primitive objects such as rectangles, * Shape constructor. Shapes are primitive objects such as rectangles,
* circles, text, lines, etc. * circles, text, lines, etc.
@@ -73,7 +70,7 @@ Kinetic.Shape = (function() {
var shapes = Kinetic.Global.shapes; var shapes = Kinetic.Global.shapes;
var key; var key;
while(true) { while(true) {
key = TYPE._getRandomColorKey(); key = Kinetic.Type._getRandomColorKey();
if(key && !( key in shapes)) { if(key && !( key in shapes)) {
break; break;
} }
@@ -144,10 +141,11 @@ Kinetic.Shape = (function() {
} }
}, },
_getFillType: function(fill) { _getFillType: function(fill) {
var type = Kinetic.Type;
if(!fill) { if(!fill) {
return undefined; return undefined;
} }
else if(TYPE._isString(fill)) { else if(type._isString(fill)) {
return 'COLOR'; return 'COLOR';
} }
else if(fill.image) { else if(fill.image) {
@@ -156,7 +154,7 @@ Kinetic.Shape = (function() {
else if(fill.start && fill.end && !fill.start.radius && !fill.end.radius) { else if(fill.start && fill.end && !fill.start.radius && !fill.end.radius) {
return 'LINEAR_GRADIENT'; return 'LINEAR_GRADIENT';
} }
else if(fill.start && fill.end && TYPE._isNumber(fill.start.radius) && TYPE._isNumber(fill.end.radius)) { else if(fill.start && fill.end && type._isNumber(fill.start.radius) && type._isNumber(fill.end.radius)) {
return 'RADIAL_GRADIENT'; return 'RADIAL_GRADIENT';
} }
else { else {
@@ -316,10 +314,11 @@ Kinetic.Shape = (function() {
* @param {Number} config.opacity * @param {Number} config.opacity
*/ */
setShadow: function(config) { setShadow: function(config) {
var type = Kinetic.Type;
if(config.offset !== undefined) { if(config.offset !== undefined) {
config.offset = TYPE._getXY(config.offset); config.offset = type._getXY(config.offset);
} }
this.setAttr('shadow', TYPE._merge(config, this.getShadow())); this.setAttr('shadow', type._merge(config, this.getShadow()));
}, },
/** /**
* set fill which can be a color, linear gradient object, * set fill which can be a color, linear gradient object,
@@ -329,6 +328,7 @@ Kinetic.Shape = (function() {
* @param {String|Object} fill * @param {String|Object} fill
*/ */
setFill: function(fill) { setFill: function(fill) {
var type = Kinetic.Type;
var oldFill = this.getFill(); var oldFill = this.getFill();
var fillType = this._getFillType(fill); var fillType = this._getFillType(fill);
var oldFillType = this._getFillType(oldFill); var oldFillType = this._getFillType(oldFill);
@@ -337,7 +337,7 @@ Kinetic.Shape = (function() {
// if fill.offset is defined, normalize the xy value // if fill.offset is defined, normalize the xy value
if(fill.offset !== undefined) { if(fill.offset !== undefined) {
fill.offset = TYPE._getXY(fill.offset); fill.offset = type._getXY(fill.offset);
} }
/* /*
@@ -346,7 +346,7 @@ Kinetic.Shape = (function() {
* overwrite the fill entirely * overwrite the fill entirely
*/ */
if(!newOrOldFillIsColor && changedFillType) { if(!newOrOldFillIsColor && changedFillType) {
fill = TYPE._merge(fill, oldFill); fill = type._merge(fill, oldFill);
} }
this.setAttr('fill', fill); this.setAttr('fill', fill);
@@ -357,7 +357,7 @@ Kinetic.Shape = (function() {
* @methodOf Kinetic.Shape.prototype * @methodOf Kinetic.Shape.prototype
*/ */
setSize: function() { setSize: function() {
var size = TYPE._getSize(Array.prototype.slice.call(arguments)); var size = Kinetic.Type._getSize(Array.prototype.slice.call(arguments));
this.setWidth(size.width); this.setWidth(size.width);
this.setHeight(size.height); this.setHeight(size.height);
}, },
@@ -412,7 +412,7 @@ Kinetic.Shape = (function() {
* element is the y component * element is the y component
*/ */
intersects: function() { intersects: function() {
var pos = TYPE._getXY(Array.prototype.slice.call(arguments)); var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments));
var stage = this.getStage(); var stage = this.getStage();
var bufferCanvas = stage.bufferCanvas; var bufferCanvas = stage.bufferCanvas;
bufferCanvas.clear(); bufferCanvas.clear();

7
tests/js/performanceTests.js
View File

@@ -67,7 +67,7 @@ Test.Modules.PERFORMANCE = {
anim.start(); anim.start();
}, 4000); }, 4000);
}, },
'DRAWING - draw 10,000 small circles with tooltips': function(containerId) { '*DRAWING - draw 10,000 small circles with tooltips': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
@@ -79,6 +79,7 @@ Test.Modules.PERFORMANCE = {
var colors = ["red", "orange", "yellow", "green", "blue", "cyan", "purple"]; var colors = ["red", "orange", "yellow", "green", "blue", "cyan", "purple"];
var colorIndex = 0; var colorIndex = 0;
startTimer();
for(var n = 0; n < 10000; n++) { for(var n = 0; n < 10000; n++) {
// induce scope // induce scope
( function() { ( function() {
@@ -134,7 +135,9 @@ Test.Modules.PERFORMANCE = {
stage.add(circlesLayer); stage.add(circlesLayer);
stage.add(tooltipLayer); stage.add(tooltipLayer);
document.body.appendChild(circlesLayer.bufferCanvas.element) endTimer('drew 10,000 circles');
//document.body.appendChild(circlesLayer.bufferCanvas.element)
}, },
'DRAWING - draw rect vs image from image data': function(containerId) { 'DRAWING - draw rect vs image from image data': function(containerId) {