lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-05-02 20:05:08 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

updated the documentation for all methods to reflect the new inhertiance changes. And yes, if you're curious, it took forever.

Browse Source
This commit is contained in:
Eric Rowell 2012-07-08 21:56:52 -07:00
parent 5169c93219
commit 780d5568db
22 changed files with 617 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

441
dist/kinetic-core.js vendored
View File

File diff suppressed because it is too large Load Diff

4
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

24
src/Container.js
View File

@ -1,23 +1,29 @@
///////////////////////////////////////////////////////////////////////
// Container
///////////////////////////////////////////////////////////////////////
/**
* Container constructor.  Containers are used to contain nodes or other containers
* @constructor
* @augments Kinetic.Node
* @param {Object} config
*/
Kinetic.Container = Kinetic.Node.extend({
/**
* Container constructor.  Containers are used to contain nodes or other containers
* @constructor
*/
init: function(config) {
this.children = [];
this._super(config);
},
/**
* get children
* @name getChildren
* @methodOf Kinetic.Container.prototype
*/
getChildren: function() {
return this.children;
},
/**
* remove all children
* @name removeChildren
* @methodOf Kinetic.Container.prototype
*/
removeChildren: function() {
while(this.children.length > 0) {
@ -26,6 +32,8 @@ Kinetic.Container = Kinetic.Node.extend({
},
/**
* add node to container
* @name add
* @methodOf Kinetic.Container.prototype
* @param {Node} child
*/
add: function(child) {
@ -62,6 +70,8 @@ Kinetic.Container = Kinetic.Node.extend({
},
/**
* remove child from container
* @name remove
* @methodOf Kinetic.Container.prototype
* @param {Node} child
*/
remove: function(child) {
@ -104,6 +114,8 @@ Kinetic.Container = Kinetic.Node.extend({
* ex:
* var node = stage.get('#foo'); // selects node with id foo
* var nodes = layer.get('.bar'); // selects nodes with name bar inside layer
* @name get
* @methodOf Kinetic.Container.prototype
* @param {String} selector
*/
get: function(selector) {
@ -136,6 +148,8 @@ Kinetic.Container = Kinetic.Node.extend({
/**
* determine if node is an ancestor
* of descendant
* @name isAncestorOf
* @methodOf Kinetic.Container.prototype
* @param {Kinetic.Node} node
*/
isAncestorOf: function(node) {
@ -155,6 +169,8 @@ Kinetic.Container = Kinetic.Node.extend({
},
/**
* get shapes that intersect a point
* @name getIntersections
* @methodOf Kinetic.Container.prototype
* @param {Object} point
*/
getIntersections: function() {

13
src/Group.js
View File

@ -1,14 +1,13 @@
///////////////////////////////////////////////////////////////////////
// Group
///////////////////////////////////////////////////////////////////////
/**
* Group constructor. Groups are used to contain shapes or other groups.
* @constructor
* @augments Kinetic.Container
* @param {Object} config
*/
Kinetic.Group = Kinetic.Container.extend({
/**
* Group constructor. Groups are used to contain shapes or other groups.
* @constructor
* @augments Kinetic.Container
* @augments Kinetic.Node
* @param {Object} config
*/
init: function(config) {
this.nodeType = 'Group';

27
src/Layer.js
View File

@ -1,15 +1,14 @@
///////////////////////////////////////////////////////////////////////
// Layer
///////////////////////////////////////////////////////////////////////
/**
* Layer constructor. Layers are tied to their own canvas element and are used
* to contain groups or shapes
* @constructor
* @augments Kinetic.Container
* @param {Object} config
*/
Kinetic.Layer = Kinetic.Container.extend({
/**
* Layer constructor. Layers are tied to their own canvas element and are used
* to contain groups or shapes
* @constructor
* @augments Kinetic.Container
* @augments Kinetic.Node
* @param {Object} config
*/
init: function(config) {
this.setDefaultAttrs({
throttle: 80,
@ -31,6 +30,8 @@ Kinetic.Layer = Kinetic.Container.extend({
/**
* draw children nodes. this includes any groups
* or shapes
* @name draw
* @methodOf Kinetic.Layer.prototype
*/
draw: function() {
var throttle = this.attrs.throttle;
@ -63,12 +64,16 @@ Kinetic.Layer = Kinetic.Container.extend({
},
/**
* set before draw function handler
* @name beforeDraw
* @methodOf Kinetic.Layer.prototype
*/
beforeDraw: function(func) {
this.beforeDrawFunc = func;
},
/**
* set after draw function handler
* @name afterDraw
* @methodOf Kinetic.Layer.prototype
*/
afterDraw: function(func) {
this.afterDrawFunc = func;
@ -78,6 +83,8 @@ Kinetic.Layer = Kinetic.Container.extend({
* a layer does not remove its children. The nodes within
* the layer will be redrawn whenever the .draw() method
* is used again.
* @name clear
* @methodOf Kinetic.Layer.prototype
*/
clear: function() {
var context = this.getContext();
@ -86,12 +93,16 @@ Kinetic.Layer = Kinetic.Container.extend({
},
/**
* get layer canvas
* @name getCanvas
* @methodOf Kinetic.Layer.prototype
*/
getCanvas: function() {
return this.canvas;
},
/**
* get layer context
* @name getContext
* @methodOf Kinetic.Layer.prototype
*/
getContext: function() {
return this.context;

88
src/Node.js
View File

@ -1,14 +1,14 @@
///////////////////////////////////////////////////////////////////////
// Node
///////////////////////////////////////////////////////////////////////
/**
* Node constructor.  Nodes are entities that can be transformed, layered,
* and have events bound to them. They are the building blocks of a KineticJS
* application
* @constructor
* @param {Object} config
*/
Kinetic.Node = Kinetic.Class.extend({
/**
* Node constructor.  Nodes are entities that can be transformed, layered,
* and have events bound to them. They are the building blocks of a KineticJS
* application
* @constructor
* @param {Object} config
*/
init: function(config) {
this.defaultNodeAttrs = {
visible: true,
@ -70,6 +70,8 @@ Kinetic.Node = Kinetic.Class.extend({
* of event types delimmited by a space to bind multiple events at once
* such as 'mousedown mouseup mousemove'. include a namespace to bind an
* event by name such as 'click.foobar'.
* @name on
* @methodOf Kinetic.Node.prototype
* @param {String} typesStr
* @param {Function} handler
*/
@ -103,6 +105,8 @@ Kinetic.Node = Kinetic.Class.extend({
* bindings at once such as 'mousedown mouseup mousemove'.
* include a namespace to remove an event binding by name
* such as 'click.foobar'.
* @name off
* @methodOf Kinetic.Node.prototype
* @param {String} typesStr
*/
off: function(typesStr) {
@ -136,12 +140,16 @@ Kinetic.Node = Kinetic.Class.extend({
},
/**
* get attrs
* @name getAttrs
* @methodOf Kinetic.Node.prototype
*/
getAttrs: function() {
return this.attrs;
},
/**
* set default attrs
* @name setDefaultAttrs
* @methodOf Kinetic.Node.prototype
* @param {Object} confic
*/
setDefaultAttrs: function(config) {
@ -167,6 +175,8 @@ Kinetic.Node = Kinetic.Class.extend({
},
/**
* set attrs
* @name setAttrs
* @methodOf Kinetic.Node.prototype
* @param {Object} config
*/
setAttrs: function(config) {
@ -259,6 +269,8 @@ Kinetic.Node = Kinetic.Class.extend({
* determine if shape is visible or not. Shape is visible only
* if it's visible and all of its ancestors are visible. If one ancestor
* is invisible, this means that the shape is also invisible
* @name isVisible
* @methodOf Kinetic.Node.prototype
*/
isVisible: function() {
if(this.attrs.visible && this.getParent() && !this.getParent().isVisible()) {
@ -268,6 +280,8 @@ Kinetic.Node = Kinetic.Class.extend({
},
/**
* show node
* @name show
* @methodOf Kinetic.Node.prototype
*/
show: function() {
this.setAttrs({
@ -276,6 +290,8 @@ Kinetic.Node = Kinetic.Class.extend({
},
/**
* hide node
* @name hide
* @methodOf Kinetic.Node.prototype
*/
hide: function() {
this.setAttrs({
@ -284,6 +300,8 @@ Kinetic.Node = Kinetic.Class.extend({
},
/**
* get zIndex
* @name getZIndex
* @methodOf Kinetic.Node.prototype
*/
getZIndex: function() {
return this.index;
@ -291,6 +309,8 @@ Kinetic.Node = Kinetic.Class.extend({
/**
* get absolute z-index by taking into account
* all parent and sibling indices
* @name getAbsoluteZIndex
* @methodOf Kinetic.Node.prototype
*/
getAbsoluteZIndex: function() {
var level = this.getLevel();
@ -324,6 +344,8 @@ Kinetic.Node = Kinetic.Class.extend({
},
/**
* get node level in node tree
* @name getLevel
* @methodOf Kinetic.Node.prototype
*/
getLevel: function() {
var level = 0;
@ -336,6 +358,8 @@ Kinetic.Node = Kinetic.Class.extend({
},
/**
* set node position
* @name setPosition
* @methodOf Kinetic.Node.prototype
* @param {Object} point
*/
setPosition: function() {
@ -344,6 +368,8 @@ Kinetic.Node = Kinetic.Class.extend({
},
/**
* get node position relative to container
* @name getPosition
* @methodOf Kinetic.Node.prototype
*/
getPosition: function() {
return {
@ -353,12 +379,16 @@ Kinetic.Node = Kinetic.Class.extend({
},
/**
* get absolute position relative to stage
* @name getAbsolutePosition
* @methodOf Kinetic.Node.prototype
*/
getAbsolutePosition: function() {
return this.getAbsoluteTransform().getTranslation();
},
/**
* set absolute position relative to stage
* @name setAbsolutePosition
* @methodOf Kinetic.Node.prototype
* @param {Object} pos object containing an x and
* y property
*/
@ -404,6 +434,8 @@ Kinetic.Node = Kinetic.Class.extend({
},
/**
* move node by an amount
* @name move
* @methodOf Kinetic.Node.prototype
*/
move: function() {
var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments));
@ -426,12 +458,16 @@ Kinetic.Node = Kinetic.Class.extend({
},
/**
* get rotation in degrees
* @name getRotationDeg
* @methodOf Kinetic.Node.prototype
*/
getRotationDeg: function() {
return this.attrs.rotation * 180 / Math.PI;
},
/**
* rotate node by an amount in radians
* @name rotate
* @methodOf Kinetic.Node.prototype
* @param {Number} theta
*/
rotate: function(theta) {
@ -441,6 +477,8 @@ Kinetic.Node = Kinetic.Class.extend({
},
/**
* rotate node by an amount in degrees
* @name rotateDeg
* @methodOf Kinetic.Node.prototype
* @param {Number} deg
*/
rotateDeg: function(deg) {
@ -450,6 +488,8 @@ Kinetic.Node = Kinetic.Class.extend({
},
/**
* move node to top
* @name moveToTop
* @methodOf Kinetic.Node.prototype
*/
moveToTop: function() {
var index = this.index;
@ -459,6 +499,8 @@ Kinetic.Node = Kinetic.Class.extend({
},
/**
* move node up
* @name moveUp
* @methodOf Kinetic.Node.prototype
*/
moveUp: function() {
var index = this.index;
@ -468,6 +510,8 @@ Kinetic.Node = Kinetic.Class.extend({
},
/**
* move node down
* @name moveDown
* @methodOf Kinetic.Node.prototype
*/
moveDown: function() {
var index = this.index;
@ -479,6 +523,8 @@ Kinetic.Node = Kinetic.Class.extend({
},
/**
* move node to bottom
* @name moveToBottom
* @methodOf Kinetic.Node.prototype
*/
moveToBottom: function() {
var index = this.index;
@ -488,6 +534,8 @@ Kinetic.Node = Kinetic.Class.extend({
},
/**
* set zIndex
* @name setZIndex
* @methodOf Kinetic.Node.prototype
* @param {int} zIndex
*/
setZIndex: function(zIndex) {
@ -498,6 +546,8 @@ Kinetic.Node = Kinetic.Class.extend({
},
/**
* get absolute alpha
* @name getAbsoluteAlpha
* @methodOf Kinetic.Node.prototype
*/
getAbsoluteAlpha: function() {
var absAlpha = 1;
@ -511,6 +561,8 @@ Kinetic.Node = Kinetic.Class.extend({
},
/**
* determine if node is currently in drag and drop mode
* @name isDragging
* @methodOf Kinetic.Node.prototype
*/
isDragging: function() {
var go = Kinetic.Global;
@ -518,6 +570,8 @@ Kinetic.Node = Kinetic.Class.extend({
},
/**
* move node to another container
* @name moveTo
* @methodOf Kinetic.Node.prototype
* @param {Container} newContainer
*/
moveTo: function(newContainer) {
@ -534,12 +588,16 @@ Kinetic.Node = Kinetic.Class.extend({
},
/**
* get parent container
* @name getParent
* @methodOf Kinetic.Node.prototype
*/
getParent: function() {
return this.parent;
},
/**
* get layer associated to node
* get layer that contains the node
* @name getLayer
* @methodOf Kinetic.Node.prototype
*/
getLayer: function() {
if(this.nodeType === 'Layer') {
@ -550,7 +608,9 @@ Kinetic.Node = Kinetic.Class.extend({
}
},
/**
* get stage associated to node
* get stage that contains the node
* @name getStage
* @methodOf Kinetic.Node.prototype
*/
getStage: function() {
if(this.nodeType !== 'Stage' && this.getParent()) {
@ -565,6 +625,8 @@ Kinetic.Node = Kinetic.Class.extend({
},
/**
* simulate event
* @name simulate
* @methodOf Kinetic.Node.prototype
* @param {String} eventType
*/
simulate: function(eventType) {
@ -574,6 +636,8 @@ Kinetic.Node = Kinetic.Class.extend({
* transition node to another state. Any property that can accept a real
* number can be transitioned, including x, y, rotation, alpha, strokeWidth,
* radius, scale.x, scale.y, offset.x, offset.y, etc.
* @name transitionTo
* @methodOf Kinetic.Node.prototype
* @param {Object} config
* @config {Number} [duration] duration that the transition runs in seconds
* @config {String} [easing] easing function. can be linear, ease-in, ease-out, ease-in-out,
@ -641,6 +705,8 @@ Kinetic.Node = Kinetic.Class.extend({
/**
* get transform of the node while taking into
* account the transforms of its parents
* @name getAbsoluteTransform
* @methodOf Kinetic.Node.prototype
*/
getAbsoluteTransform: function() {
// absolute transform
@ -667,6 +733,8 @@ Kinetic.Node = Kinetic.Class.extend({
/**
* get transform of the node while not taking
* into account the transforms of its parents
* @name getTransform
* @methodOf Kinetic.Node.prototype
*/
getTransform: function() {
var m = new Kinetic.Transform();
@ -685,6 +753,8 @@ Kinetic.Node = Kinetic.Class.extend({
},
/**
* clone node
* @name clone
* @methodOf Kinetic.Node.prototype
* @param {Object} config used to override cloned
* attrs
*/

50
src/Shape.js
View File

@ -1,23 +1,23 @@
///////////////////////////////////////////////////////////////////////
// Shape
///////////////////////////////////////////////////////////////////////
/**
* Shape constructor. Shapes are used to objectify drawing bits of a KineticJS
* application
* @constructor
* @augments Kinetic.Node
* @param {Object} config
* @config {String|Object} [fill] can be a string color, a linear gradient object, a radial
* gradient object, or a pattern object.
* @config {String} [stroke] stroke color
* @config {Number} [strokeWidth] stroke width
* @config {String} [lineJoin] line join can be "miter", "round", or "bevel". The default
* is "miter"
* @config {Object} [shadow] shadow object
* @config {String} [detectionType] shape detection type. Can be "path" or "pixel".
* The default is "path" because it performs better
*/
Kinetic.Shape = Kinetic.Node.extend({
/**
* Shape constructor. Shapes are used to objectify drawing bits of a KineticJS
* application
* @constructor
* @augments Kinetic.Node
* @param {Object} config
* @config {String|Object} [fill] can be a string color, a linear gradient object, a radial
* gradient object, or a pattern object.
* @config {String} [stroke] stroke color
* @config {Number} [strokeWidth] stroke width
* @config {String} [lineJoin] line join can be "miter", "round", or "bevel". The default
* is "miter"
* @config {Object} [shadow] shadow object
* @config {String} [detectionType] shape detection type. Can be "path" or "pixel".
* The default is "path" because it performs better
*/
init: function(config) {
this.setDefaultAttrs({
detectionType: 'path'
@ -36,12 +36,16 @@ Kinetic.Shape = Kinetic.Node.extend({
* user created layer that contains the shape. When the event detection
* engine is determining whether or not an event has occured on that shape,
* .getContext() returns the context of the invisible path layer.
* @name getContext
* @methodOf Kinetic.Shape.prototype
*/
getContext: function() {
return this.tempLayer.getContext();
},
/**
* get shape temp layer canvas
* @name getCanvas
* @methodOf Kinetic.Shape.prototype
*/
getCanvas: function() {
return this.tempLayer.getCanvas();
@ -49,6 +53,8 @@ Kinetic.Shape = Kinetic.Node.extend({
/**
* helper method to stroke the shape and apply
* shadows if needed
* @name stroke
* @methodOf Kinetic.Shape.prototype
*/
stroke: function() {
var go = Kinetic.Global;
@ -77,6 +83,8 @@ Kinetic.Shape = Kinetic.Node.extend({
/**
* helper method to fill the shape with a color, linear gradient,
* radial gradient, or pattern, and also apply shadows if needed
* @name fill
* @methodOf Kinetic.Shape.prototype
* */
fill: function() {
var appliedShadow = false;
@ -161,6 +169,8 @@ Kinetic.Shape = Kinetic.Node.extend({
/**
* helper method to fill text and appy shadows if needed
* @param {String} text
* @name fillText
* @methodOf Kinetic.Shape.prototype
*/
fillText: function(text) {
var appliedShadow = false;
@ -182,9 +192,9 @@ Kinetic.Shape = Kinetic.Node.extend({
/**
* helper method to stroke text and apply shadows
* if needed
* @name strokeText
* @methodOf Kinetic.Shape.prototype
* @param {String} text
* @param {Number} x
* @param {Number} y
*/
strokeText: function(text) {
var appliedShadow = false;
@ -215,6 +225,8 @@ Kinetic.Shape = Kinetic.Node.extend({
/**
* helper method to draw an image and apply
* a shadow if neede
* @name drawImage
* @methodOf Kinetic.Shape.prototype
*/
drawImage: function() {
var appliedShadow = false;
@ -245,6 +257,8 @@ Kinetic.Shape = Kinetic.Node.extend({
/**
* helper method to set the line join of a shape
* based on the lineJoin property
* @name applyLineJoin
* @methodOf Kinetic.Shape.prototype
*/
applyLineJoin: function() {
var context = this.getContext();

60
src/Stage.js
View File

@ -1,17 +1,17 @@
///////////////////////////////////////////////////////////////////////
// Stage
///////////////////////////////////////////////////////////////////////
/**
* Stage constructor. A stage is used to contain multiple layers and handle
* animations
* @constructor
* @augments Kinetic.Container
* @augments Kinetic.Node
* @param {String|DomElement} cont Container id or DOM element
* @param {int} width
* @param {int} height
*/
Kinetic.Stage = Kinetic.Container.extend({
/**
* Stage constructor. A stage is used to contain multiple layers and handle
* animations
* @constructor
* @augments Kinetic.Container
* @augments Kinetic.Node
* @param {String|DomElement} cont Container id or DOM element
* @param {int} width
* @param {int} height
*/
init: function(config) {
this.setDefaultAttrs({
width: 400,
@ -50,6 +50,8 @@ Kinetic.Stage = Kinetic.Container.extend({
},
/**
* sets onFrameFunc for animation
* @name onFrame
* @methodOf Kinetic.Stage.prototype
* @param {function} func
*/
onFrame: function(func) {
@ -59,6 +61,8 @@ Kinetic.Stage = Kinetic.Container.extend({
},
/**
* start animation
* @name start
* @methodOf Kinetic.Stage.prototype
*/
start: function() {
if(!this.animRunning) {
@ -70,6 +74,8 @@ Kinetic.Stage = Kinetic.Container.extend({
},
/**
* stop animation
* @name stop
* @methodOf Kinetic.Stage.prototype
*/
stop: function() {
Kinetic.Animation._removeAnimation(this.anim);
@ -77,12 +83,16 @@ Kinetic.Stage = Kinetic.Container.extend({
},
/**
* draw children
* @name draw
* @methodOf Kinetic.Stage.prototype
*/
draw: function() {
this._drawChildren();
},
/**
* set stage size
* @name setSize
* @methodOf Kinetic.Stage.prototype
*/
setSize: function() {
// set stage dimensions
@ -91,6 +101,8 @@ Kinetic.Stage = Kinetic.Container.extend({
},
/**
* return stage size
* @name getSize
* @methodOf Kinetic.Stage.prototype
*/
getSize: function() {
return {
@ -100,6 +112,8 @@ Kinetic.Stage = Kinetic.Container.extend({
},
/**
* clear all layers
* @name clear
* @methodOf Kinetic.Stage.prototype
*/
clear: function() {
var layers = this.children;
@ -111,6 +125,8 @@ Kinetic.Stage = Kinetic.Container.extend({
* Creates a composite data URL and passes it to a callback. If MIME type is not
* specified, then "image/png" will result. For "image/jpeg", specify a quality
* level as quality (range 0.0 - 1.0)
* @name toDataURL
* @methodOf Kinetic.Stage.prototype
* @param {function} callback
* @param {String} mimeType (optional)
* @param {Number} quality (optional)
@ -149,6 +165,8 @@ Kinetic.Stage = Kinetic.Container.extend({
},
/**
* serialize stage and children as a JSON object
* @name toJSON
* @methodOf Kinetic.Stage.prototype
*/
toJSON: function() {
var type = Kinetic.Type;
@ -185,6 +203,8 @@ Kinetic.Stage = Kinetic.Container.extend({
},
/**
* reset stage to default state
* @name reset
* @methodOf Kinetic.Stage.prototype
*/
reset: function() {
// remove children
@ -201,6 +221,8 @@ Kinetic.Stage = Kinetic.Container.extend({
* event handlers (it probably does), then you need to select the appropriate
* shapes after loading the stage and set these properties via on(), setDrawFunc(),
* and setImage()
* @name load
* @methodOf Kinetic.Stage.prototype
* @param {String} JSON string
*/
load: function(json) {
@ -244,6 +266,8 @@ Kinetic.Stage = Kinetic.Container.extend({
},
/**
* get mouse position for desktop apps
* @name getMousePosition
* @methodOf Kinetic.Stage.prototype
* @param {Event} evt
*/
getMousePosition: function(evt) {
@ -251,6 +275,8 @@ Kinetic.Stage = Kinetic.Container.extend({
},
/**
* get touch position for mobile apps
* @name getTouchPosition
* @methodOf Kinetic.Stage.prototype
* @param {Event} evt
*/
getTouchPosition: function(evt) {
@ -258,6 +284,8 @@ Kinetic.Stage = Kinetic.Container.extend({
},
/**
* get user position (mouse position or touch position)
* @name getUserPosition
* @methodOf Kinetic.Stage.prototype
* @param {Event} evt
*/
getUserPosition: function(evt) {
@ -265,18 +293,16 @@ Kinetic.Stage = Kinetic.Container.extend({
},
/**
* get container DOM element
* @name getContainer
* @methodOf Kinetic.Stage.prototype
*/
getContainer: function() {
return this.attrs.container;
},
/**
* get content DOM element
*/
getContent: function() {
return this.content;
},
/**
* get stage
* @name getStage
* @methodOf Kinetic.Stage.prototype
*/
getStage: function() {
return this;
@ -284,6 +310,8 @@ Kinetic.Stage = Kinetic.Container.extend({
/**
* get stage DOM node, which is a div element
* with the class name "kineticjs-content"
* @name getDOM
* @methodOf Kinetic.Stage.prototype
*/
getDOM: function() {
return this.content;

6
src/Transition.js
View File

@ -48,6 +48,8 @@ Kinetic.Transition = function(node, config) {
Kinetic.Transition.prototype = {
/**
* start transition
* @name start
* @methodOf Kinetic.Transition.prototype
*/
start: function() {
for(var n = 0; n < this.tweens.length; n++) {
@ -56,6 +58,8 @@ Kinetic.Transition.prototype = {
},
/**
* stop transition
* @name stop
* @methodOf Kinetic.Transition.prototype
*/
stop: function() {
for(var n = 0; n < this.tweens.length; n++) {
@ -64,6 +68,8 @@ Kinetic.Transition.prototype = {
},
/**
* resume transition
* @name resume
* @methodOf Kinetic.Transition.prototype
*/
resume: function() {
for(var n = 0; n < this.tweens.length; n++) {

14
src/shapes/Ellipse.js
View File

@ -1,13 +1,13 @@
///////////////////////////////////////////////////////////////////////
// Ellipse
///////////////////////////////////////////////////////////////////////
/**
* Ellipse constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Ellipse = Kinetic.Shape.extend({
/**
* Ellipse constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
init: function(config) {
this.setDefaultAttrs({
radius: {
@ -70,6 +70,8 @@ Kinetic.Node.addGettersSetters(Kinetic.Ellipse, ['radius']);
/**
* set radius
* @name setRadius
* @methodOf Kinetic.Ellipse.prototype
* @param {Number|Object|Array} radius
* radius can be a number, in which the ellipse becomes a circle,
* it can be an object with an x and y component, or it

16
src/shapes/Image.js
View File

@ -1,13 +1,13 @@
///////////////////////////////////////////////////////////////////////
// Image
///////////////////////////////////////////////////////////////////////
/**
* Image constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Image = Kinetic.Shape.extend({
/**
* Image constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
init: function(config) {
this.shapeType = "Image";
config.drawFunc = function() {
@ -42,6 +42,8 @@ Kinetic.Image = Kinetic.Shape.extend({
},
/**
* set width and height
* @name setSize
* @methodOf Kinetic.Image.prototype
*/
setSize: function() {
var size = Kinetic.GlobalObject._getSize(Array.prototype.slice.call(arguments));
@ -49,6 +51,8 @@ Kinetic.Image = Kinetic.Shape.extend({
},
/**
* return image size
* @name getSize
* @methodOf Kinetic.Image.prototype
*/
getSize: function() {
return {

12
src/shapes/Line.js
View File

@ -1,13 +1,13 @@
///////////////////////////////////////////////////////////////////////
// Line
///////////////////////////////////////////////////////////////////////
/**
* Line constructor.&nbsp; Lines are defined by an array of points
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Line = Kinetic.Shape.extend({
/**
* Line constructor.&nbsp; Lines are defined by an array of points
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
init: function(config) {
this.setDefaultAttrs({
points: [],

20
src/shapes/Path.js
View File

@ -1,14 +1,14 @@
///////////////////////////////////////////////////////////////////////
// SVG Path
///////////////////////////////////////////////////////////////////////
/**
* Path constructor.
* @author Jason Follas
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Path = Kinetic.Shape.extend({
/**
* Path constructor.
* @author Jason Follas
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
init: function(config) {
this.shapeType = "Path";
this.dataArray = [];
@ -62,10 +62,10 @@ Kinetic.Path = Kinetic.Shape.extend({
// call super constructor
this._super(config);
this.dataArray = this.getDataArray();
this.dataArray = this._getDataArray();
this.on('dataChange', function() {
that.dataArray = that.getDataArray();
that.dataArray = that._getDataArray();
});
},
/**
@ -74,7 +74,7 @@ Kinetic.Path = Kinetic.Shape.extend({
* L data for the purpose of high performance Path
* rendering
*/
getDataArray: function() {
_getDataArray: function() {
// Path Data Segment must begin with a moveTo
//m (x y)+ Relative moveTo (subsequent points are treated as lineTo)

12
src/shapes/Polygon.js
View File

@ -1,13 +1,13 @@
///////////////////////////////////////////////////////////////////////
// Polygon
///////////////////////////////////////////////////////////////////////
/**
* Polygon constructor.&nbsp; Polygons are defined by an array of points
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Polygon = Kinetic.Shape.extend({
/**
* Polygon constructor.&nbsp; Polygons are defined by an array of points
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
init: function(config) {
this.setDefaultAttrs({
points: []

16
src/shapes/Rect.js
View File

@ -1,13 +1,13 @@
///////////////////////////////////////////////////////////////////////
// Rect
///////////////////////////////////////////////////////////////////////
/**
* Rect constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Rect = Kinetic.Shape.extend({
/**
* Rect constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
init: function(config) {
this.setDefaultAttrs({
width: 0,
@ -46,6 +46,8 @@ Kinetic.Rect = Kinetic.Shape.extend({
},
/**
* set width and height
* @name setSize
* @methodOf Kinetic.Rect.prototype
*/
setSize: function() {
var size = Kinetic.Type._getSize(Array.prototype.slice.call(arguments));
@ -53,6 +55,8 @@ Kinetic.Rect = Kinetic.Shape.extend({
},
/**
* return rect size
* @name getSize
* @methodOf Kinetic.Rect.prototype
*/
getSize: function() {
return {

12
src/shapes/RegularPolygon.js
View File

@ -1,13 +1,13 @@
///////////////////////////////////////////////////////////////////////
// RegularPolygon
///////////////////////////////////////////////////////////////////////
/**
* RegularPolygon constructor.&nbsp; Examples include triangles, squares, pentagons, hexagons, etc.
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.RegularPolygon = Kinetic.Shape.extend({
/**
* RegularPolygon constructor.&nbsp; Examples include triangles, squares, pentagons, hexagons, etc.
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
init: function(config) {
this.setDefaultAttrs({
radius: 0,

20
src/shapes/Sprite.js
View File

@ -1,13 +1,13 @@
///////////////////////////////////////////////////////////////////////
// Sprite
///////////////////////////////////////////////////////////////////////
/**
* Sprite constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Sprite = Kinetic.Shape.extend({
/**
* Sprite constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
init: function(config) {
this.setDefaultAttrs({
index: 0,
@ -39,6 +39,8 @@ Kinetic.Sprite = Kinetic.Shape.extend({
},
/**
* start sprite animation
* @name start
* @methodOf Kinetic.Sprite.prototype
*/
start: function() {
var that = this;
@ -68,7 +70,7 @@ Kinetic.Sprite = Kinetic.Shape.extend({
ka._addAnimation(this.anim);
this.interval = setInterval(function() {
var index = that.attrs.index;
var index = that.attrs.index;
that._updateIndex();
if(that.afterFrameFunc && index === that.afterFrameIndex) {
that.afterFrameFunc();
@ -79,6 +81,8 @@ Kinetic.Sprite = Kinetic.Shape.extend({
},
/**
* stop sprite animation
* @name stop
* @methodOf Kinetic.Sprite.prototype
*/
stop: function() {
var ka = Kinetic.Animation;
@ -90,6 +94,8 @@ Kinetic.Sprite = Kinetic.Shape.extend({
},
/**
* set after frame event handler
* @name afterFrame
* @methodOf Kinetic.Sprite.prototype
* @param {Integer} index frame index
* @param {Function} func function to be executed after frame has been drawn
*/

12
src/shapes/Star.js
View File

@ -1,13 +1,13 @@
///////////////////////////////////////////////////////////////////////
// Star
///////////////////////////////////////////////////////////////////////
/**
* Star constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Star = Kinetic.Shape.extend({
/**
* Star constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
init: function(config) {
this.setDefaultAttrs({
numPoints: 0,

32
src/shapes/Text.js
View File

@ -104,30 +104,38 @@ Kinetic.Text = Kinetic.Shape.extend({
that._setTextData();
},
/**
* get text width in pixels
*/
getTextWidth: function() {
return this.textWidth;
},
/**
* get text height in pixels
*/
getTextHeight: function() {
return this.textHeight;
},
/**
* get box width
* @name getBoxWidth
* @methodOf Kinetic.Text.prototype
*/
getBoxWidth: function() {
return this.attrs.width === 'auto' ? this.getTextWidth() + this.attrs.padding * 2 : this.attrs.width;
},
/**
* get box height
* @name getBoxHeight
* @methodOf Kinetic.Text.prototype
*/
getBoxHeight: function() {
return this.attrs.height === 'auto' ? (this.getTextHeight() * this.textArr.length * this.attrs.lineHeight) + this.attrs.padding * 2 : this.attrs.height;
},
/**
* get text width in pixels
* @name getTextWidth
* @methodOf Kinetic.Text.prototype
*/
getTextWidth: function() {
return this.textWidth;
},
/**
* get text height in pixels
* @name getTextHeight
* @methodOf Kinetic.Text.prototype
*/
getTextHeight: function() {
return this.textHeight;
},
_getTextSize: function(text) {
var dummyCanvas = this.dummyCanvas;
var context = dummyCanvas.getContext('2d');

4
src/util/Transform.js
View File

@ -17,9 +17,7 @@
* class.
*/
/**
* Matrix object
*/
Kinetic.Transform = function() {
this.m = [1, 0, 0, 1, 0, 0];
}

3
src/util/Tween.js
View File

@ -7,9 +7,6 @@
* an animation of a single Node property. A Transition is a set of
* multiple tweens
*/
/**
* Tween constructor
*/
Kinetic.Tween = function(obj, propFunc, func, begin, finish, duration) {
this._listeners = [];
this.addListener(this);

22
tests/js/unitTests.js
View File

@ -1440,12 +1440,12 @@ Test.prototype.tests = {
stage.add(layer);
test(path.getData() === 'M200,100h100v50z', 'data are incorrect');
test(path.getDataArray().length === 4, 'data array should have 4 elements');
test(path._getDataArray().length === 4, 'data array should have 4 elements');
path.setData('M200');
test(path.getData() === 'M200', 'data are incorrect');
test(path.getDataArray().length === 1, 'data array should have 1 element');
test(path._getDataArray().length === 1, 'data array should have 1 element');
path.setData('M200,100h100v50z');
@ -1490,9 +1490,9 @@ Test.prototype.tests = {
stage.add(layer);
test(path.getData() === 'm200,100,100,0,0,50,z', 'data are incorrect');
test(path.getDataArray().length === 4, 'data array should have 4 elements');
test(path._getDataArray().length === 4, 'data array should have 4 elements');
test(path.getDataArray()[1].command === 'L', 'second command should be an implied lineTo');
test(path._getDataArray()[1].command === 'L', 'second command should be an implied lineTo');
},
'SHAPE - add map path': function(containerId) {
var stage = new Kinetic.Stage({
@ -1517,7 +1517,7 @@ Test.prototype.tests = {
});
if(key === 'US')
test(path.getDataArray()[0].command === 'M', 'first command should be a moveTo');
test(path._getDataArray()[0].command === 'M', 'first command should be a moveTo');
path.on('mouseover', function() {
this.setFill('red');
@ -3009,13 +3009,13 @@ Test.prototype.tests = {
layer.add(text);
stage.add(layer);
/*
text.transitionTo({
width: 500,
duration: 10
});
*/
text.transitionTo({
width: 500,
duration: 10
});
*/
},
'SHAPE - get shape name': function(containerId) {
var stage = new Kinetic.Stage({