lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 12:34:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

improved drawing speed by 7% by optimizing stroke(), fill(), and several other methods

Browse Source
This commit is contained in:
Eric Rowell
2012-06-22 19:36:37 -07:00
parent 422791a99a
commit 19750782c7
8 changed files with 73 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/Node.js
View File

@@ -576,16 +576,14 @@ Kinetic.Node.prototype = {
* get stage associated to node
*/
getStage: function() {
if(this.nodeType === 'Stage') {
if(this.nodeType !== 'Stage' && this.getParent()) {
return this.getParent().getStage();
}
else if(this.nodeType === 'Stage') {
return this;
}
else {
if(this.getParent() === undefined) {
return undefined;
}
else {
return this.getParent().getStage();
}
return undefined;
}
},
/**

65
src/Shape.js
View File

@@ -19,15 +19,7 @@
*/
Kinetic.Shape = function(config) {
this.setDefaultAttrs({
detectionType: 'path',
shadow: {
blur: 10,
alpha: 1,
offset: {
x: 0,
y: 0
}
}
detectionType: 'path'
});
this.data = [];
@@ -49,12 +41,7 @@ Kinetic.Shape.prototype = {
* .getContext() returns the context of the invisible path layer.
*/
getContext: function() {
if(this.tempLayer === undefined) {
return null;
}
else {
return this.tempLayer.getContext();
}
return this.tempLayer.getContext();
},
/**
* get shape temp layer canvas
@@ -70,23 +57,22 @@ Kinetic.Shape.prototype = {
var go = Kinetic.GlobalObject;
var appliedShadow = false;
var context = this.getContext();
context.save();
if(!!this.attrs.stroke || !!this.attrs.strokeWidth) {
if(!this.appliedShadow) {
if(this.attrs.stroke || this.attrs.strokeWidth) {
context.save();
if(this.attrs.shadow && !this.appliedShadow) {
appliedShadow = this._applyShadow();
}
var stroke = !!this.attrs.stroke ? this.attrs.stroke : 'black';
var strokeWidth = !!this.attrs.strokeWidth ? this.attrs.strokeWidth : 2;
var stroke = this.attrs.stroke ? this.attrs.stroke : 'black';
var strokeWidth = this.attrs.strokeWidth ? this.attrs.strokeWidth : 2;
context.lineWidth = strokeWidth;
context.strokeStyle = stroke;
context.stroke();
context.restore();
}
context.restore();
if(appliedShadow) {
this.stroke();
}
@@ -102,8 +88,8 @@ Kinetic.Shape.prototype = {
var fill = this.attrs.fill;
if(!!fill) {
if(!this.appliedShadow) {
if(fill) {
if(this.attrs.shadow && !this.appliedShadow) {
appliedShadow = this._applyShadow();
}
@@ -118,16 +104,16 @@ Kinetic.Shape.prototype = {
context.fill();
}
// pattern
else if(!!fill.image) {
else if(fill.image) {
var repeat = !fill.repeat ? 'repeat' : fill.repeat;
f = context.createPattern(fill.image, repeat);
context.save();
if(!!fill.scale) {
if(fill.scale) {
context.scale(fill.scale.x, fill.scale.y);
}
if(!!fill.offset) {
if(fill.offset) {
context.translate(fill.offset.x, fill.offset.y);
}
@@ -150,7 +136,7 @@ Kinetic.Shape.prototype = {
context.fill();
}
// radial gradient
else if(!!s.radius && !!e.radius) {
else if(s.radius && e.radius) {
var context = this.getContext();
var grd = context.createRadialGradient(s.x, s.y, s.radius, e.x, e.y, e.radius);
var colorStops = fill.colorStops;
@@ -185,8 +171,8 @@ Kinetic.Shape.prototype = {
var appliedShadow = false;
var context = this.getContext();
context.save();
if(!!this.attrs.textFill) {
if(!this.appliedShadow) {
if(this.attrs.textFill) {
if(this.attrs.shadow && !this.appliedShadow) {
appliedShadow = this._applyShadow();
}
context.fillStyle = this.attrs.textFill;
@@ -209,16 +195,16 @@ Kinetic.Shape.prototype = {
var appliedShadow = false;
var context = this.getContext();
context.save();
if(!!this.attrs.textStroke || !!this.attrs.textStrokeWidth) {
if(!this.appliedShadow) {
if(this.attrs.textStroke || this.attrs.textStrokeWidth) {
if(this.attrs.shadow && !this.appliedShadow) {
appliedShadow = this._applyShadow();
}
// defaults
if(!!this.attrs.textStroke) {
if(this.attrs.textStroke) {
this.attrs.textStroke = 'black';
}
else if(!!this.attrs.textStrokeWidth && this.attrs.textStrokeWidth !== 0) {
else if(this.attrs.textStrokeWidth && this.attrs.textStrokeWidth !== 0) {
this.attrs.textStrokeWidth = 2;
}
context.lineWidth = this.attrs.textStrokeWidth;
@@ -242,7 +228,7 @@ Kinetic.Shape.prototype = {
var a = Array.prototype.slice.call(arguments);
if(a.length === 5 || a.length === 9) {
if(!this.appliedShadow) {
if(this.attrs.shadow && !this.appliedShadow) {
appliedShadow = this._applyShadow();
}
switch(a.length) {
@@ -267,7 +253,7 @@ Kinetic.Shape.prototype = {
*/
applyLineJoin: function() {
var context = this.getContext();
if(!!this.attrs.lineJoin) {
if(this.attrs.lineJoin) {
context.lineJoin = this.attrs.lineJoin;
}
},
@@ -279,11 +265,11 @@ Kinetic.Shape.prototype = {
var context = this.getContext();
var s = this.attrs.shadow;
if(!!s) {
if(s) {
var aa = this.getAbsoluteAlpha();
var sa = this.attrs.shadow.alpha;
if(!!sa && !!s.color) {
if(sa && s.color) {
context.globalAlpha = sa * aa;
context.shadowColor = s.color;
context.shadowBlur = s.blur;
@@ -345,7 +331,7 @@ Kinetic.Shape.prototype = {
}
},
_draw: function(layer) {
if(!!layer && !!this.attrs.drawFunc) {
if(layer && this.attrs.drawFunc) {
var stage = layer.getStage();
var context = layer.getContext();
var family = [];
@@ -387,6 +373,7 @@ Kinetic.Shape.prototype = {
context.restore();
}
}
};
// extend Node
Kinetic.GlobalObject.extend(Kinetic.Shape, Kinetic.Node);

2
src/shapes/Image.js
View File

@@ -12,8 +12,6 @@ Kinetic.Image = function(config) {
crop: {
x: 0,
y: 0,
width: undefined,
height: undefined
}
});

2
src/shapes/Path.js
View File

@@ -56,7 +56,9 @@ Kinetic.Path = function(config) {
}
}
this.fill();
//console.profile();
this.stroke();
//console.profileEnd();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);

13
src/shapes/Text.js
View File

@@ -103,17 +103,8 @@ Kinetic.Text.prototype = {
* get text size in pixels
*/
getTextSize: function() {
var context = this.getContext();
/**
* if the text hasn't been added a layer yet there
* will be no associated context. Will have to create
* a dummy context
*/
if(!context) {
var dummyCanvas = document.createElement('canvas');
context = dummyCanvas.getContext('2d');
}
var dummyCanvas = document.createElement('canvas');
var context = dummyCanvas.getContext('2d');
context.save();
context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;