lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-19 02:37:59 +08:00
Code Issues Actions 2 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
* @constructor
* @abstract
* @memberof Kinetic
* @param {Number} width
* @param {Number} height
*/
@@ -39,24 +41,24 @@
},
/**
* get canvas element
* @name getElement
* @methodOf Kinetic.Canvas.prototype
* @method
* @memberof Kinetic.Canvas.prototype
*/
getElement: function() {
return this.element;
},
/**
* get canvas context
* @name getContext
* @methodOf Kinetic.Canvas.prototype
* @method
* @memberof Kinetic.Canvas.prototype
*/
getContext: function() {
return this.context;
},
/**
* set width
* @name setWidth
* @methodOf Kinetic.Canvas.prototype
* @method
* @memberof Kinetic.Canvas.prototype
* @param {Number} width
*/
setWidth: function(width) {
@@ -66,8 +68,8 @@
},
/**
* set height
* @name setHeight
* @methodOf Kinetic.Canvas.prototype
* @method
* @memberof Kinetic.Canvas.prototype
* @param {Number} height
*/
setHeight: function(height) {
@@ -77,48 +79,35 @@
},
/**
* get width
* @name getWidth
* @methodOf Kinetic.Canvas.prototype
* @method
* @memberof Kinetic.Canvas.prototype
*/
getWidth: function() {
return this.width;
},
/**
* get height
* @name getHeight
* @methodOf Kinetic.Canvas.prototype
* @method
* @memberof Kinetic.Canvas.prototype
*/
getHeight: function() {
return this.height;
},
/**
* set size
* @name setSize
* @methodOf Kinetic.Canvas.prototype
* @method
* @memberof Kinetic.Canvas.prototype
* @param {Number} width
* @param {Number} height
*/
setSize: function(width, height) {
this.setWidth(width);
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
* @name clear
* @methodOf Kinetic.Canvas.prototype
* @method
* @memberof Kinetic.Canvas.prototype
*/
clear: function() {
var context = this.getContext();
@@ -127,8 +116,8 @@
},
/**
* to data url
* @name toDataURL
* @methodOf Kinetic.Canvas2D.prototype
* @method
* @memberof Kinetic.Canvas.prototype
* @param {String} mimeType
* @param {Number} quality between 0 and 1 for jpg mime types
*/
@@ -150,8 +139,8 @@
},
/**
* fill shape
* @name fill
* @methodOf Kinetic.Canvas2D.prototype
* @method
* @memberof Kinetic.Canvas.prototype
* @param {Kinetic.Shape} shape
*/
fill: function(shape) {
@@ -161,8 +150,8 @@
},
/**
* stroke shape
* @name stroke
* @methodOf Kinetic.Canvas2D.prototype
* @method
* @memberof Kinetic.Canvas.prototype
* @param {Kinetic.Shape} shape
*/
stroke: function(shape) {
@@ -174,8 +163,8 @@
* fill, stroke, and apply shadows
* will only be applied to either the fill or stroke.  Fill
* is given priority over stroke.
* @name fillStroke
* @methodOf Kinetic.Canvas2D.prototype
* @method
* @memberof Kinetic.Canvas.prototype
* @param {Kinetic.Shape} shape
*/
fillStroke: function(shape) {
@@ -190,8 +179,8 @@
},
/**
* apply shadow
* @name applyShadow
* @methodOf Kinetic.Canvas2D.prototype
* @method
* @memberof Kinetic.Canvas.prototype
* @param {Kinetic.Shape} shape
* @param {Function} drawFunc
*/
@@ -242,10 +231,8 @@
}
};
Kinetic.Util.extend(Kinetic.Canvas2D, Kinetic.Canvas);
Kinetic.SceneCanvas = function(config) {
Kinetic.Canvas2D.call(this, config);
Kinetic.Canvas.call(this, config);
};
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.Canvas2D.call(this, config);
Kinetic.Canvas.call(this, config);
};
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
* @memberof Kinetic
*/
Kinetic.Filters = {};

131
src/Tween.js
View File

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

46
src/Util.js
View File

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

2
src/filters/Blur.js
View File

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

2
src/filters/Brighten.js
View File

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

2
src/filters/Grayscale.js
View File

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

2
src/filters/Invert.js
View File

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

2
src/filters/Mask.js
View File

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