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

caching system now relies on attr change events to clear the appropriate cache attrs

Browse Source
This commit is contained in:
Eric Rowell
2013-08-10 13:04:02 -07:00
parent 6f078dc127
commit 1c51d65a93
4 changed files with 42 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Canvas.js
View File

@@ -436,11 +436,9 @@
if(stroke || strokeWidth) { if(stroke || strokeWidth) {
this._applyLineCap(shape); this._applyLineCap(shape);
context.save();
context.lineWidth = strokeWidth || 2; context.lineWidth = strokeWidth || 2;
context.strokeStyle = shape.colorKey; context.strokeStyle = shape.colorKey;
shape._strokeFuncHit(context); shape._strokeFuncHit(context);
context.restore();
} }
} }
}; };

52
src/Node.js
View File

@@ -36,7 +36,19 @@
UPPER_Y = 'Y', UPPER_Y = 'Y',
VISIBLE = 'visible', VISIBLE = 'visible',
X = 'x', X = 'x',
Y = 'y'; Y = 'y',
transformChangeStr = [
'xChange.kinetic',
'yChange.kinetic',
'scaleXChange.kinetic',
'scaleYChange.kinetic',
'skewXChange.kinetic',
'skewYChange.kinetic',
'rotationChange.kinetic',
'offsetXChange.kinetic',
'offsetYChange.kinetic'
].join(SPACE);
// clear transform cache pair // clear transform cache pair
function _clearTransformCacheEachChild(node) { function _clearTransformCacheEachChild(node) {
@@ -75,13 +87,6 @@
} }
} }
// custom clear cache functions
Kinetic.Node.clearCacheFuncs = {
transform: _clearTransformCache,
visible: _clearVisibleCache,
absoluteOpacity: _clearAbsoluteOpacityCache
};
Kinetic.Util.addMethods(Kinetic.Node, { Kinetic.Util.addMethods(Kinetic.Node, {
_init: function(config) { _init: function(config) {
this._id = Kinetic.Global.idCounter++; this._id = Kinetic.Global.idCounter++;
@@ -89,6 +94,11 @@
this.attrs = {}; this.attrs = {};
this.cache = {}; this.cache = {};
this.setAttrs(config); this.setAttrs(config);
// event bindings for cache handling
this.on(transformChangeStr, _clearTransformCache);
this.on('visibleChange.kinetic', _clearVisibleCache);
this.on('opacityChange.kinetic', _clearAbsoluteOpacityCache);
}, },
_handleCache: function(attr) { _handleCache: function(attr) {
var func; var func;
@@ -1226,28 +1236,28 @@
}); });
// getter setter adders // getter setter adders
Kinetic.Node.addGetterSetter = function(constructor, attr, def, cacheAttr) { Kinetic.Node.addGetterSetter = function(constructor, attr, def) {
this.addGetter(constructor, attr, def); this.addGetter(constructor, attr, def);
this.addSetter(constructor, attr, cacheAttr); this.addSetter(constructor, attr);
}; };
Kinetic.Node.addPointGetterSetter = function(constructor, attr, def, cacheAttr) { Kinetic.Node.addPointGetterSetter = function(constructor, attr, def) {
this.addPointGetter(constructor, attr, def); this.addPointGetter(constructor, attr, def);
this.addPointSetter(constructor, attr, cacheAttr); this.addPointSetter(constructor, attr);
// add invdividual component getters and setters // add invdividual component getters and setters
this.addGetter(constructor, attr + UPPER_X, def); this.addGetter(constructor, attr + UPPER_X, def);
this.addGetter(constructor, attr + UPPER_Y, def); this.addGetter(constructor, attr + UPPER_Y, def);
this.addSetter(constructor, attr + UPPER_X, cacheAttr); this.addSetter(constructor, attr + UPPER_X);
this.addSetter(constructor, attr + UPPER_Y, cacheAttr); this.addSetter(constructor, attr + UPPER_Y);
}; };
Kinetic.Node.addPointsGetterSetter = function(constructor, attr) { Kinetic.Node.addPointsGetterSetter = function(constructor, attr) {
this.addPointsGetter(constructor, attr); this.addPointsGetter(constructor, attr);
this.addPointsSetter(constructor, attr); this.addPointsSetter(constructor, attr);
this.addPointAdder(constructor, attr); this.addPointAdder(constructor, attr);
}; };
Kinetic.Node.addRotationGetterSetter = function(constructor, attr, def, cacheAttr) { Kinetic.Node.addRotationGetterSetter = function(constructor, attr, def) {
this.addRotationGetter(constructor, attr, def); this.addRotationGetter(constructor, attr, def);
this.addRotationSetter(constructor, attr, cacheAttr); this.addRotationSetter(constructor, attr);
}; };
Kinetic.Node.addColorGetterSetter = function(constructor, attr) { Kinetic.Node.addColorGetterSetter = function(constructor, attr) {
this.addGetter(constructor, attr); this.addGetter(constructor, attr);
@@ -1362,15 +1372,14 @@
this._setAttr('points', points); this._setAttr('points', points);
}; };
}; };
Kinetic.Node.addSetter = function(constructor, attr, cacheAttr) { Kinetic.Node.addSetter = function(constructor, attr) {
var method = SET + Kinetic.Util._capitalize(attr); var method = SET + Kinetic.Util._capitalize(attr);
constructor.prototype[method] = function(val) { constructor.prototype[method] = function(val) {
this._handleCache(cacheAttr);
this._setAttr(attr, val); this._setAttr(attr, val);
}; };
}; };
Kinetic.Node.addPointSetter = function(constructor, attr, cacheAttr) { Kinetic.Node.addPointSetter = function(constructor, attr) {
var that = this, var that = this,
baseMethod = SET + Kinetic.Util._capitalize(attr); baseMethod = SET + Kinetic.Util._capitalize(attr);
@@ -1385,7 +1394,6 @@
y = pos.y; y = pos.y;
this._fireBeforeChangeEvent(attr, oldVal, pos); this._fireBeforeChangeEvent(attr, oldVal, pos);
this._handleCache(cacheAttr);
if (x !== undefined) { if (x !== undefined) {
this[baseMethod + UPPER_X](x); this[baseMethod + UPPER_X](x);
} }
@@ -1396,18 +1404,16 @@
} }
}; };
}; };
Kinetic.Node.addRotationSetter = function(constructor, attr, cacheAttr) { Kinetic.Node.addRotationSetter = function(constructor, attr) {
var that = this, var that = this,
method = SET + Kinetic.Util._capitalize(attr); method = SET + Kinetic.Util._capitalize(attr);
// radians // radians
constructor.prototype[method] = function(val) { constructor.prototype[method] = function(val) {
this._handleCache(cacheAttr);
this._setAttr(attr, val); this._setAttr(attr, val);
}; };
// degrees // degrees
constructor.prototype[method + DEG] = function(deg) { constructor.prototype[method + DEG] = function(deg) {
this._handleCache(cacheAttr);
this._setAttr(attr, Kinetic.Util._degToRad(deg)); this._setAttr(attr, Kinetic.Util._degToRad(deg));
}; };
}; };

14
src/Shape.js
View File

@@ -14,6 +14,10 @@
context.stroke(); context.stroke();
} }
function _clearHasShadowCache() {
this._clearCache(HAS_SHADOW);
}
Kinetic.Util.addMethods(Kinetic.Shape, { Kinetic.Util.addMethods(Kinetic.Shape, {
__init: function(config) { __init: function(config) {
this.nodeType = 'Shape'; this.nodeType = 'Shape';
@@ -40,6 +44,8 @@
Kinetic.Node.call(this, config); Kinetic.Node.call(this, config);
this._setDrawFuncs(); this._setDrawFuncs();
this.on('shadowColorChange.kinetic shadowBlurChange.kinetic shadowOffsetChange.kinetic shadowOpacityChange.kinetic', _clearHasShadowCache);
}, },
hasChildren: function() { hasChildren: function() {
return false; return false;
@@ -438,7 +444,7 @@
* @memberof Kinetic.Shape.prototype * @memberof Kinetic.Shape.prototype
*/ */
Kinetic.Node.addColorGetterSetter(Kinetic.Shape, 'shadowColor', undefined, HAS_SHADOW); Kinetic.Node.addColorGetterSetter(Kinetic.Shape, 'shadowColor');
/** /**
* set shadow color * set shadow color
@@ -521,7 +527,7 @@
* @memberof Kinetic.Shape.prototype * @memberof Kinetic.Shape.prototype
*/ */
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'shadowBlur', undefined, HAS_SHADOW); Kinetic.Node.addGetterSetter(Kinetic.Shape, 'shadowBlur');
/** /**
* set shadow blur * set shadow blur
@@ -538,7 +544,7 @@
* @memberof Kinetic.Shape.prototype * @memberof Kinetic.Shape.prototype
*/ */
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'shadowOpacity', undefined, HAS_SHADOW); Kinetic.Node.addGetterSetter(Kinetic.Shape, 'shadowOpacity');
/** /**
* set shadow opacity * set shadow opacity
@@ -1244,7 +1250,7 @@
* @memberof Kinetic.Shape.prototype * @memberof Kinetic.Shape.prototype
*/ */
Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'shadowOffset', 0, HAS_SHADOW); Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'shadowOffset', 0);
/** /**
* set shadow offset * set shadow offset

6
tests/html/performanceTests.html
View File

@@ -23,14 +23,14 @@
<script> <script>
run(Kinetic); run(Kinetic);
</script> </script>
-->
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js"></script> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js"></script>
<script> <script>
run(Kinetic); run(Kinetic);
</script> </script>
<!-- -->
<script src="../../dist/kinetic-dev.js"></script> <script src="../../dist/kinetic-dev.js"></script>
<script> <script>
run(Kinetic); run(Kinetic);
</script>--> </script>
</html> </html>