lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-18 18:27:58 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

wrapped Shape module with anonymous function, added variable cache, and reduced object attr access calls

Browse Source
This commit is contained in:
Eric Rowell
2012-11-13 22:54:08 -08:00
parent 2115920ab8
commit 429f28964a
1 changed files with 522 additions and 520 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/Shape.js
View File

@@ -1,3 +1,7 @@
Kinetic.Shape = (function() {
// variable cache
var ATTRS, TYPE = Kinetic.Type;
/**
* Shape constructor. Shapes are primitive objects such as rectangles,
* circles, text, lines, etc.
@@ -56,11 +60,11 @@
* @param {Number} [config.dragBounds.bottom]
* @param {Number} [config.dragBounds.left]
*/
Kinetic.Shape = function(config) {
var Shape = function(config) {
this._initShape(config);
};
Kinetic.Shape.prototype = {
Shape.prototype = {
_initShape: function(config) {
this.nodeType = 'Shape';
this.appliedShadow = false;
@@ -69,7 +73,7 @@ Kinetic.Shape.prototype = {
var shapes = Kinetic.Global.shapes;
var key;
while(true) {
key = Kinetic.Type._getRandomColorKey();
key = TYPE._getRandomColorKey();
if(key && !( key in shapes)) {
break;
}
@@ -79,6 +83,7 @@ Kinetic.Shape.prototype = {
// call super constructor
Kinetic.Node.call(this, config);
ATTRS = this.attrs;
},
/**
* get canvas context tied to the layer
@@ -115,7 +120,7 @@ Kinetic.Shape.prototype = {
var appliedShadow = false;
context.save();
if(this.attrs.shadow && !this.appliedShadow) {
if(ATTRS.shadow && !this.appliedShadow) {
appliedShadow = this._applyShadow(context);
}
@@ -143,7 +148,7 @@ Kinetic.Shape.prototype = {
if(!fill) {
return undefined;
}
else if(Kinetic.Type._isString(fill)) {
else if(TYPE._isString(fill)) {
return 'COLOR';
}
else if(fill.image) {
@@ -152,7 +157,7 @@ Kinetic.Shape.prototype = {
else if(fill.start && fill.end && !fill.start.radius && !fill.end.radius) {
return 'LINEAR_GRADIENT';
}
else if(fill.start && fill.end && Kinetic.Type._isNumber(fill.start.radius) && Kinetic.Type._isNumber(fill.end.radius)) {
else if(fill.start && fill.end && TYPE._isNumber(fill.start.radius) && TYPE._isNumber(fill.end.radius)) {
return 'RADIAL_GRADIENT';
}
else {
@@ -176,7 +181,7 @@ Kinetic.Shape.prototype = {
var appliedShadow = false, fill = this.getFill(), fillType = this._getFillType(fill);
if(fill) {
context.save();
if(this.attrs.shadow && !this.appliedShadow) {
if(ATTRS.shadow && !this.appliedShadow) {
appliedShadow = this._applyShadow(context);
}
@@ -244,7 +249,7 @@ Kinetic.Shape.prototype = {
},
/**
* helper method to draw an image and apply
* a shadow if neede
* a shadow if needed
* @name drawImage
* @methodOf Kinetic.Shape.prototype
*/
@@ -255,7 +260,7 @@ Kinetic.Shape.prototype = {
var a = Array.prototype.slice.call(arguments);
if(a.length === 6 || a.length === 10) {
if(this.attrs.shadow && !this.appliedShadow) {
if(ATTRS.shadow && !this.appliedShadow) {
appliedShadow = this._applyShadow(context);
}
@@ -286,8 +291,8 @@ Kinetic.Shape.prototype = {
* @methodOf Kinetic.Shape.prototype
*/
applyLineJoin: function(context) {
if(this.attrs.lineJoin) {
context.lineJoin = this.attrs.lineJoin;
if(ATTRS.lineJoin) {
context.lineJoin = ATTRS.lineJoin;
}
},
/**
@@ -297,8 +302,8 @@ Kinetic.Shape.prototype = {
* @methodOf Kinetic.Shape.prototype
*/
applyLineCap: function(context) {
if(this.attrs.lineCap) {
context.lineCap = this.attrs.lineCap;
if(ATTRS.lineCap) {
context.lineCap = ATTRS.lineCap;
}
},
/**
@@ -313,9 +318,9 @@ Kinetic.Shape.prototype = {
*/
setShadow: function(config) {
if(config.offset !== undefined) {
config.offset = Kinetic.Type._getXY(config.offset);
config.offset = TYPE._getXY(config.offset);
}
this.setAttr('shadow', Kinetic.Type._merge(config, this.getShadow()));
this.setAttr('shadow', TYPE._merge(config, this.getShadow()));
},
/**
* set fill which can be a color, linear gradient object,
@@ -333,7 +338,7 @@ Kinetic.Shape.prototype = {
// if fill.offset is defined, normalize the xy value
if(fill.offset !== undefined) {
fill.offset = Kinetic.Type._getXY(fill.offset);
fill.offset = TYPE._getXY(fill.offset);
}
/*
@@ -342,7 +347,7 @@ Kinetic.Shape.prototype = {
* overwrite the fill entirely
*/
if(!newOrOldFillIsColor && changedFillType) {
fill = Kinetic.Type._merge(fill, oldFill);
fill = TYPE._merge(fill, oldFill);
}
this.setAttr('fill', fill);
@@ -353,7 +358,7 @@ Kinetic.Shape.prototype = {
* @methodOf Kinetic.Shape.prototype
*/
setSize: function() {
var size = Kinetic.Type._getSize(Array.prototype.slice.call(arguments));
var size = TYPE._getSize(Array.prototype.slice.call(arguments));
this.setWidth(size.width);
this.setHeight(size.height);
},
@@ -376,7 +381,7 @@ Kinetic.Shape.prototype = {
* and false if it was not
*/
_applyShadow: function(context) {
var s = this.attrs.shadow;
var s = ATTRS.shadow;
if(s) {
var aa = this.getAbsoluteOpacity();
// defaults
@@ -408,7 +413,7 @@ Kinetic.Shape.prototype = {
* element is the y component
*/
intersects: function() {
var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments));
var pos = TYPE._getXY(Array.prototype.slice.call(arguments));
var stage = this.getStage();
var bufferCanvas = stage.bufferCanvas;
bufferCanvas.clear();
@@ -421,11 +426,10 @@ Kinetic.Shape.prototype = {
delete Kinetic.Global.shapes[this.colorKey];
},
draw: function(canvas) {
if(this.attrs.drawFunc && Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
var stage = this.getStage();
var context = canvas.getContext();
var family = [];
var parent = this.parent;
var drawFunc = this.attrs.drawFunc, drawBufferFunc = this.attrs.drawBufferFunc;
if(drawFunc && Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
var stage = this.getStage(), context = canvas.getContext(), family = [], parent = this.parent, type = canvas.getContext().type;
family.unshift(this);
while(parent) {
@@ -434,37 +438,32 @@ Kinetic.Shape.prototype = {
}
context.save();
for(var n = 0; n < family.length; n++) {
var node = family[n];
var t = node.getTransform();
var m = t.getMatrix();
var len = family.length;
for(var n = 0; n < len; n++) {
var node = family[n], t = node.getTransform(), m = t.getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
var type = canvas.getContext().type;
if(type === 'scene') {
this.applyOpacity(context);
}
this.applyLineJoin(context);
this.applyLineCap(context);
// draw the shape
this.appliedShadow = false;
var drawFunc = (type === 'buffer' && this.attrs.drawBufferFunc) ? this.attrs.drawBufferFunc : this.attrs.drawFunc;
var func = (type === 'buffer' && drawBufferFunc) ? drawBufferFunc : drawFunc;
drawFunc.call(this, canvas.getContext());
func.call(this, canvas.getContext());
context.restore();
}
}
};
Kinetic.Global.extend(Kinetic.Shape, Kinetic.Node);
Kinetic.Global.extend(Shape, Kinetic.Node);
// add getters and setters
Kinetic.Node.addGettersSetters(Kinetic.Shape, ['stroke', 'lineJoin', 'strokeWidth', 'drawFunc', 'cornerRadius']);
Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
Kinetic.Node.addGettersSetters(Shape, ['stroke', 'lineJoin', 'strokeWidth', 'drawFunc', 'cornerRadius']);
Kinetic.Node.addGetters(Shape, ['shadow', 'fill']);
/**
* set stroke color
@@ -556,3 +555,6 @@ Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
* @name getLineCap
* @methodOf Kinetic.Shape.prototype
*/
return Shape;
})();