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

more documenting

Browse Source
This commit is contained in:
Eric Rowell
2013-05-15 22:03:52 -07:00
parent b1025be75e
commit 821138cc0a
9 changed files with 209 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/Canvas.js
View File

@@ -13,6 +13,8 @@
/** /**
* Canvas Renderer constructor * Canvas Renderer constructor
* @constructor * @constructor
* @abstract
* @memberof Kinetic
* @param {Number} width * @param {Number} width
* @param {Number} height * @param {Number} height
*/ */
@@ -39,24 +41,24 @@
}, },
/** /**
* get canvas element * get canvas element
* @name getElement * @method
* @methodOf Kinetic.Canvas.prototype * @memberof Kinetic.Canvas.prototype
*/ */
getElement: function() { getElement: function() {
return this.element; return this.element;
}, },
/** /**
* get canvas context * get canvas context
* @name getContext * @method
* @methodOf Kinetic.Canvas.prototype * @memberof Kinetic.Canvas.prototype
*/ */
getContext: function() { getContext: function() {
return this.context; return this.context;
}, },
/** /**
* set width * set width
* @name setWidth * @method
* @methodOf Kinetic.Canvas.prototype * @memberof Kinetic.Canvas.prototype
* @param {Number} width * @param {Number} width
*/ */
setWidth: function(width) { setWidth: function(width) {
@@ -66,8 +68,8 @@
}, },
/** /**
* set height * set height
* @name setHeight * @method
* @methodOf Kinetic.Canvas.prototype * @memberof Kinetic.Canvas.prototype
* @param {Number} height * @param {Number} height
*/ */
setHeight: function(height) { setHeight: function(height) {
@@ -77,48 +79,35 @@
}, },
/** /**
* get width * get width
* @name getWidth * @method
* @methodOf Kinetic.Canvas.prototype * @memberof Kinetic.Canvas.prototype
*/ */
getWidth: function() { getWidth: function() {
return this.width; return this.width;
}, },
/** /**
* get height * get height
* @name getHeight * @method
* @methodOf Kinetic.Canvas.prototype * @memberof Kinetic.Canvas.prototype
*/ */
getHeight: function() { getHeight: function() {
return this.height; return this.height;
}, },
/** /**
* set size * set size
* @name setSize * @method
* @methodOf Kinetic.Canvas.prototype * @memberof Kinetic.Canvas.prototype
* @param {Number} width * @param {Number} width
* @param {Number} height * @param {Number} height
*/ */
setSize: function(width, height) { setSize: function(width, height) {
this.setWidth(width); this.setWidth(width);
this.setHeight(height); this.setHeight(height);
} },
};
/**
* Canvas 2D Renderer constructor
* @constructor
* @param {Number} width
* @param {Number} height
*/
Kinetic.Canvas2D = function(config) {
Kinetic.Canvas.call(this, config);
};
Kinetic.Canvas2D.prototype = {
/** /**
* clear canvas * clear canvas
* @name clear * @method
* @methodOf Kinetic.Canvas.prototype * @memberof Kinetic.Canvas.prototype
*/ */
clear: function() { clear: function() {
var context = this.getContext(); var context = this.getContext();
@@ -127,8 +116,8 @@
}, },
/** /**
* to data url * to data url
* @name toDataURL * @method
* @methodOf Kinetic.Canvas2D.prototype * @memberof Kinetic.Canvas.prototype
* @param {String} mimeType * @param {String} mimeType
* @param {Number} quality between 0 and 1 for jpg mime types * @param {Number} quality between 0 and 1 for jpg mime types
*/ */
@@ -150,8 +139,8 @@
}, },
/** /**
* fill shape * fill shape
* @name fill * @method
* @methodOf Kinetic.Canvas2D.prototype * @memberof Kinetic.Canvas.prototype
* @param {Kinetic.Shape} shape * @param {Kinetic.Shape} shape
*/ */
fill: function(shape) { fill: function(shape) {
@@ -161,8 +150,8 @@
}, },
/** /**
* stroke shape * stroke shape
* @name stroke * @method
* @methodOf Kinetic.Canvas2D.prototype * @memberof Kinetic.Canvas.prototype
* @param {Kinetic.Shape} shape * @param {Kinetic.Shape} shape
*/ */
stroke: function(shape) { stroke: function(shape) {
@@ -174,8 +163,8 @@
* fill, stroke, and apply shadows * fill, stroke, and apply shadows
* will only be applied to either the fill or stroke.  Fill * will only be applied to either the fill or stroke.  Fill
* is given priority over stroke. * is given priority over stroke.
* @name fillStroke * @method
* @methodOf Kinetic.Canvas2D.prototype * @memberof Kinetic.Canvas.prototype
* @param {Kinetic.Shape} shape * @param {Kinetic.Shape} shape
*/ */
fillStroke: function(shape) { fillStroke: function(shape) {
@@ -190,8 +179,8 @@
}, },
/** /**
* apply shadow * apply shadow
* @name applyShadow * @method
* @methodOf Kinetic.Canvas2D.prototype * @memberof Kinetic.Canvas.prototype
* @param {Kinetic.Shape} shape * @param {Kinetic.Shape} shape
* @param {Function} drawFunc * @param {Function} drawFunc
*/ */
@@ -242,10 +231,8 @@
} }
}; };
Kinetic.Util.extend(Kinetic.Canvas2D, Kinetic.Canvas);
Kinetic.SceneCanvas = function(config) { Kinetic.SceneCanvas = function(config) {
Kinetic.Canvas2D.call(this, config); Kinetic.Canvas.call(this, config);
}; };
Kinetic.SceneCanvas.prototype = { Kinetic.SceneCanvas.prototype = {
@@ -427,10 +414,10 @@
} }
} }
}; };
Kinetic.Util.extend(Kinetic.SceneCanvas, Kinetic.Canvas2D); Kinetic.Util.extend(Kinetic.SceneCanvas, Kinetic.Canvas);
Kinetic.HitCanvas = function(config) { Kinetic.HitCanvas = function(config) {
Kinetic.Canvas2D.call(this, config); Kinetic.Canvas.call(this, config);
}; };
Kinetic.HitCanvas.prototype = { Kinetic.HitCanvas.prototype = {
@@ -456,6 +443,6 @@
} }
} }
}; };
Kinetic.Util.extend(Kinetic.HitCanvas, Kinetic.Canvas2D); Kinetic.Util.extend(Kinetic.HitCanvas, Kinetic.Canvas);
})(); })();

1
src/Global.js
View File

@@ -34,6 +34,7 @@ var Kinetic = {};
/** /**
* @namespace Filters * @namespace Filters
* @memberof Kinetic
*/ */
Kinetic.Filters = {}; Kinetic.Filters = {};

131
src/Tween.js
View File

@@ -18,6 +18,11 @@
}, easing, node['get' + Kinetic.Util._capitalize(key)](), end, duration * 1000, yoyo); }, easing, node['get' + Kinetic.Util._capitalize(key)](), end, duration * 1000, yoyo);
} }
/**
* Tween constructor.
* @constructor
* @memberof Kinetic
*/
Kinetic.Tween = function(config) { Kinetic.Tween = function(config) {
var that = this, var that = this,
node = config.node, node = config.node,
@@ -94,44 +99,85 @@
} }
}; };
}, },
/**
* play
* @method
* @memberof Kinetic.Tween.prototype
*/
play: function() { play: function() {
this._iterate(function(tween) { this._iterate(function(tween) {
tween.play(); tween.play();
}); });
}, },
/**
* reverse
* @method
* @memberof Kinetic.Tween.prototype
*/
reverse: function() { reverse: function() {
this._iterate(function(tween) { this._iterate(function(tween) {
tween.reverse(); tween.reverse();
}); });
}, },
/**
* reset
* @method
* @memberof Kinetic.Tween.prototype
*/
reset: function() { reset: function() {
this._iterate(function(tween) { this._iterate(function(tween) {
tween.reset(); tween.reset();
}); });
this.node.getLayer().draw(); this.node.getLayer().draw();
}, },
/**
* seek
* @method
* @memberof Kinetic.Tween.prototype
* @param {Integer} t time in seconds between 0 and the duration
*/
seek: function(t) { seek: function(t) {
this._iterate(function(tween) { this._iterate(function(tween) {
tween.seek(t * 1000); tween.seek(t * 1000);
}); });
this.node.getLayer().draw(); this.node.getLayer().draw();
}, },
/**
* pause
* @method
* @memberof Kinetic.Tween.prototype
*/
pause: function() { pause: function() {
this._iterate(function(tween) { this._iterate(function(tween) {
tween.pause(); tween.pause();
}); });
}, },
/**
* finish
* @method
* @memberof Kinetic.Tween.prototype
*/
finish: function() { finish: function() {
this._iterate(function(tween) { this._iterate(function(tween) {
tween.finish(); tween.finish();
}); });
this.node.getLayer().draw(); this.node.getLayer().draw();
}, },
/**
* define a function that's executed on each tween animation frame
* @method
* @memberof Kinetic.Tween.prototype
*/
onEnterFrame: function() { onEnterFrame: function() {
this._iterate(function(tween) { this._iterate(function(tween) {
tween.onEnterFrame(); tween.onEnterFrame();
}); });
}, },
/**
* destroy
* @method
* @memberof Kinetic.Tween.prototype
*/
destroy: function() { destroy: function() {
}, },
@@ -266,15 +312,35 @@
* These eases were ported from an Adobe Flash tweening library to JavaScript * These eases were ported from an Adobe Flash tweening library to JavaScript
* by Xaric * by Xaric
*/ */
/**
* @namespace Easings
* @memberof Kinetic
*/
Kinetic.Easings = { Kinetic.Easings = {
/**
* back ease in
* @function
* @memberof Kinetic.Easings
*/
'BackEaseIn': function(t, b, c, d, a, p) { 'BackEaseIn': function(t, b, c, d, a, p) {
var s = 1.70158; var s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b; return c * (t /= d) * t * ((s + 1) * t - s) + b;
}, },
/**
* back ease out
* @function
* @memberof Kinetic.Easings
*/
'BackEaseOut': function(t, b, c, d, a, p) { 'BackEaseOut': function(t, b, c, d, a, p) {
var s = 1.70158; var s = 1.70158;
return c * (( t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; return c * (( t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
}, },
/**
* back ease in out
* @function
* @memberof Kinetic.Easings
*/
'BackEaseInOut': function(t, b, c, d, a, p) { 'BackEaseInOut': function(t, b, c, d, a, p) {
var s = 1.70158; var s = 1.70158;
if((t /= d / 2) < 1) { if((t /= d / 2) < 1) {
@@ -282,6 +348,11 @@
} }
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b; return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
}, },
/**
* elastic ease in
* @function
* @memberof Kinetic.Easings
*/
'ElasticEaseIn': function(t, b, c, d, a, p) { 'ElasticEaseIn': function(t, b, c, d, a, p) {
// added s = 0 // added s = 0
var s = 0; var s = 0;
@@ -303,6 +374,11 @@
} }
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b; return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
}, },
/**
* elastic ease out
* @function
* @memberof Kinetic.Easings
*/
'ElasticEaseOut': function(t, b, c, d, a, p) { 'ElasticEaseOut': function(t, b, c, d, a, p) {
// added s = 0 // added s = 0
var s = 0; var s = 0;
@@ -324,6 +400,11 @@
} }
return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b); return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
}, },
/**
* elastic ease in out
* @function
* @memberof Kinetic.Easings
*/
'ElasticEaseInOut': function(t, b, c, d, a, p) { 'ElasticEaseInOut': function(t, b, c, d, a, p) {
// added s = 0 // added s = 0
var s = 0; var s = 0;
@@ -348,6 +429,11 @@
} }
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b; return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
}, },
/**
* bounce ease out
* @function
* @memberof Kinetic.Easings
*/
'BounceEaseOut': function(t, b, c, d) { 'BounceEaseOut': function(t, b, c, d) {
if((t /= d) < (1 / 2.75)) { if((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b; return c * (7.5625 * t * t) + b;
@@ -362,9 +448,19 @@
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b; return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
} }
}, },
/**
* bounce ease in
* @function
* @memberof Kinetic.Easings
*/
'BounceEaseIn': function(t, b, c, d) { 'BounceEaseIn': function(t, b, c, d) {
return c - Kinetic.Easings.BounceEaseOut(d - t, 0, c, d) + b; return c - Kinetic.Easings.BounceEaseOut(d - t, 0, c, d) + b;
}, },
/**
* bounce ease in out
* @function
* @memberof Kinetic.Easings
*/
'BounceEaseInOut': function(t, b, c, d) { 'BounceEaseInOut': function(t, b, c, d) {
if(t < d / 2) { if(t < d / 2) {
return Kinetic.Easings.BounceEaseIn(t * 2, 0, c, d) * 0.5 + b; return Kinetic.Easings.BounceEaseIn(t * 2, 0, c, d) * 0.5 + b;
@@ -373,30 +469,65 @@
return Kinetic.Easings.BounceEaseOut(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b; return Kinetic.Easings.BounceEaseOut(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
} }
}, },
/**
* ease in
* @function
* @memberof Kinetic.Easings
*/
'EaseIn': function(t, b, c, d) { 'EaseIn': function(t, b, c, d) {
return c * (t /= d) * t + b; return c * (t /= d) * t + b;
}, },
/**
* ease out
* @function
* @memberof Kinetic.Easings
*/
'EaseOut': function(t, b, c, d) { 'EaseOut': function(t, b, c, d) {
return -c * (t /= d) * (t - 2) + b; return -c * (t /= d) * (t - 2) + b;
}, },
/**
* ease in out
* @function
* @memberof Kinetic.Easings
*/
'EaseInOut': function(t, b, c, d) { 'EaseInOut': function(t, b, c, d) {
if((t /= d / 2) < 1) { if((t /= d / 2) < 1) {
return c / 2 * t * t + b; return c / 2 * t * t + b;
} }
return -c / 2 * ((--t) * (t - 2) - 1) + b; return -c / 2 * ((--t) * (t - 2) - 1) + b;
}, },
/**
* strong ease in
* @function
* @memberof Kinetic.Easings
*/
'StrongEaseIn': function(t, b, c, d) { 'StrongEaseIn': function(t, b, c, d) {
return c * (t /= d) * t * t * t * t + b; return c * (t /= d) * t * t * t * t + b;
}, },
/**
* strong ease out
* @function
* @memberof Kinetic.Easings
*/
'StrongEaseOut': function(t, b, c, d) { 'StrongEaseOut': function(t, b, c, d) {
return c * (( t = t / d - 1) * t * t * t * t + 1) + b; return c * (( t = t / d - 1) * t * t * t * t + 1) + b;
}, },
/**
* strong ease in out
* @function
* @memberof Kinetic.Easings
*/
'StrongEaseInOut': function(t, b, c, d) { 'StrongEaseInOut': function(t, b, c, d) {
if((t /= d / 2) < 1) { if((t /= d / 2) < 1) {
return c / 2 * t * t * t * t * t + b; return c / 2 * t * t * t * t * t + b;
} }
return c / 2 * ((t -= 2) * t * t * t * t + 2) + b; return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
}, },
/**
* linear
* @function
* @memberof Kinetic.Easings
*/
'Linear': function(t, b, c, d) { 'Linear': function(t, b, c, d) {
return c * t / d + b; return c * t / d + b;
} }

46
src/Util.js
View File

@@ -3,6 +3,7 @@
* Collection constructor. Collection extends * Collection constructor. Collection extends
* Array. This class is used in conjunction with get() * Array. This class is used in conjunction with get()
* @constructor * @constructor
* @memberof Kinetic
*/ */
Kinetic.Collection = function() { Kinetic.Collection = function() {
var args = [].slice.call(arguments), length = args.length, i = 0; var args = [].slice.call(arguments), length = args.length, i = 0;
@@ -15,9 +16,10 @@
} }
Kinetic.Collection.prototype = new Array(); Kinetic.Collection.prototype = new Array();
/** /**
* iterate through node array * iterate through node array and run a function for each node.
* @name each * The node and index is passed into the function
* @methodOf Kinetic.Collection.prototype * @method
* @memberof Kinetic.Collection.prototype
* @param {Function} func * @param {Function} func
*/ */
Kinetic.Collection.prototype.each = function(func) { Kinetic.Collection.prototype.each = function(func) {
@@ -63,12 +65,13 @@
/* /*
* The usage of this class was inspired by some of the work done by a forked * The usage of this class was inspired by some of the work done by a forked
* project, KineticJS-Ext by Wappworks, which is based on Simon's Transform * project, KineticJS-Ext by Wappworks, which is based on Simon's Transform
* class. * class. Modified by Eric Rowell
*/ */
/** /**
* Transform constructor * Transform constructor
* @constructor * @constructor
* @memberof Kinetic
*/ */
Kinetic.Transform = function() { Kinetic.Transform = function() {
this.m = [1, 0, 0, 1, 0, 0]; this.m = [1, 0, 0, 1, 0, 0];
@@ -77,6 +80,8 @@
Kinetic.Transform.prototype = { Kinetic.Transform.prototype = {
/** /**
* Apply translation * Apply translation
* @method
* @memberof Kinetic.Transform.prototype
* @param {Number} x * @param {Number} x
* @param {Number} y * @param {Number} y
*/ */
@@ -86,6 +91,8 @@
}, },
/** /**
* Apply scale * Apply scale
* @method
* @memberof Kinetic.Transform.prototype
* @param {Number} sx * @param {Number} sx
* @param {Number} sy * @param {Number} sy
*/ */
@@ -97,6 +104,8 @@
}, },
/** /**
* Apply rotation * Apply rotation
* @method
* @memberof Kinetic.Transform.prototype
* @param {Number} rad Angle in radians * @param {Number} rad Angle in radians
*/ */
rotate: function(rad) { rotate: function(rad) {
@@ -113,6 +122,8 @@
}, },
/** /**
* Returns the translation * Returns the translation
* @method
* @memberof Kinetic.Transform.prototype
* @returns {Object} 2D point(x, y) * @returns {Object} 2D point(x, y)
*/ */
getTranslation: function() { getTranslation: function() {
@@ -123,6 +134,8 @@
}, },
/** /**
* Apply skew * Apply skew
* @method
* @memberof Kinetic.Transform.prototype
* @param {Number} sx * @param {Number} sx
* @param {Number} sy * @param {Number} sy
*/ */
@@ -138,6 +151,8 @@
}, },
/** /**
* Transform multiplication * Transform multiplication
* @method
* @memberof Kinetic.Transform.prototype
* @param {Kinetic.Transform} matrix * @param {Kinetic.Transform} matrix
*/ */
multiply: function(matrix) { multiply: function(matrix) {
@@ -159,6 +174,8 @@
}, },
/** /**
* Invert the matrix * Invert the matrix
* @method
* @memberof Kinetic.Transform.prototype
*/ */
invert: function() { invert: function() {
var d = 1 / (this.m[0] * this.m[3] - this.m[1] * this.m[2]); var d = 1 / (this.m[0] * this.m[3] - this.m[1] * this.m[2]);
@@ -177,6 +194,8 @@
}, },
/** /**
* return matrix * return matrix
* @method
* @memberof Kinetic.Transform.prototype
*/ */
getMatrix: function() { getMatrix: function() {
return this.m; return this.m;
@@ -222,7 +241,8 @@
RGB_REGEX = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/; RGB_REGEX = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/;
/** /**
* @namespace * @namespace Util
* @memberof Kinetic
*/ */
Kinetic.Util = { Kinetic.Util = {
/* /*
@@ -504,6 +524,11 @@
b: bigint & 255 b: bigint & 255
}; };
}, },
/**
* get random color
* @method
* @memberof Kinetic.Util.prototype
*/
getRandomColor: function() { getRandomColor: function() {
var randColor = (Math.random() * 0xFFFFFF << 0).toString(16); var randColor = (Math.random() * 0xFFFFFF << 0).toString(16);
while (randColor.length < 6) { while (randColor.length < 6) {
@@ -511,6 +536,12 @@
} }
return randColor; return randColor;
}, },
/**
* get RGB components of a color
* @method
* @memberof Kinetic.Util.prototype
* @param {String} color
*/
getRGB: function(color) { getRGB: function(color) {
var rgb; var rgb;
// color string // color string
@@ -596,8 +627,9 @@
} }
}, },
/** /**
* @method addMethods adds methods to a constructor prototype * adds methods to a constructor prototype
* @methodOf Kinetic.Util * @method
* @memberof Kinetic.Util.prototype
* @param {Function} constructor * @param {Function} constructor
* @param {Object} methods * @param {Object} methods
*/ */

2
src/filters/Blur.js
View File

@@ -325,7 +325,7 @@
/** /**
* Blur Filter * Blur Filter
* @function * @function
* @memberOf Kinetic.Filters * @memberof Kinetic.Filters
* @param {Object} imageData * @param {Object} imageData
*/ */
Kinetic.Filters.Blur = function(imageData) { Kinetic.Filters.Blur = function(imageData) {

2
src/filters/Brighten.js
View File

@@ -2,7 +2,7 @@
/** /**
* Brighten Filter. * Brighten Filter.
* @function * @function
* @memberOf Kinetic.Filters * @memberof Kinetic.Filters
* @param {Object} imageData * @param {Object} imageData
*/ */
Kinetic.Filters.Brighten = function(imageData) { Kinetic.Filters.Brighten = function(imageData) {

2
src/filters/Grayscale.js
View File

@@ -2,7 +2,7 @@
/** /**
* Grayscale Filter * Grayscale Filter
* @function * @function
* @memberOf Kinetic.Filters * @memberof Kinetic.Filters
* @param {Object} imageData * @param {Object} imageData
*/ */
Kinetic.Filters.Grayscale = function(imageData) { Kinetic.Filters.Grayscale = function(imageData) {

2
src/filters/Invert.js
View File

@@ -2,7 +2,7 @@
/** /**
* Invert Filter * Invert Filter
* @function * @function
* @memberOf Kinetic.Filters * @memberof Kinetic.Filters
* @param {Object} imageData * @param {Object} imageData
*/ */
Kinetic.Filters.Invert = function(imageData) { Kinetic.Filters.Invert = function(imageData) {

2
src/filters/Mask.js
View File

@@ -165,7 +165,7 @@
* Only crop unicolor background images for instance * Only crop unicolor background images for instance
* *
* @function * @function
* @memberOf Kinetic.Filters * @memberof Kinetic.Filters
* @param {Object} imageData * @param {Object} imageData
*/ */
Kinetic.Filters.Mask = function(idata) { Kinetic.Filters.Mask = function(idata) {