lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 15:23:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

now utilizing John Resig's mashup of Base.js and protototype.js inheritiance Class so that it's easy for developers to extend KineticJS objects with extend() or to simply tack on new methods and properties that's available to all children classes. Moved getter and setter logic to Node. Moved transition class to root directory and created Tween class

Browse Source
This commit is contained in:
Eric Rowell 2012-07-03 12:07:27 -07:00
parent e2e16d49c1
commit 3d4d2d20c0
24 changed files with 1600 additions and 1635 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -1,7 +1,7 @@
#Building the KineticJS library
To build the library, you need to have Ruby and Rubygems installed. After that, install the dependencies by running `bundle install`.
To build a development version of the library, run `thor build:dev VERSION`, where VERSION is a string that can be anything you like. For example, using `thor build:dev core` will produce `kinetic-core.js`. To build a minified version of the library, run `thor build:prod VERSION`. If you want to add a release date other than the current day, use `-d="DATE"` (e.g. `-d="Mar 07 2012`).
To build a development version of the library, run `thor build:dev VERSION`, where VERSION is a string that can be anything you like. For example, using `thor build:dev core` will produce `kinetic-core.js`. To build a minified version of the library, run `thor build:prod VERSION`. If you want to add a release date other than the current day, use `-d="DATE"` (e.g. `-d="Mar 07 2012"`).
If you add a file in the src directory, be sure to add the filename to the filename array in the Thorfile.

4
Thorfile
View File

@ -3,10 +3,10 @@ require 'json/pure'
class Build < Thor
# This is the list of files to concatenate. The first file will appear at the top of the final file. All files are relative to the lib directory.
FILES = [
"license.js", "src/GlobalObject.js", "src/Node.js", "src/Container.js", "src/Stage.js",
"license.js", "src/GlobalObject.js", "src/util/Class.js", "src/Node.js", "src/Container.js", "src/Stage.js",
"src/Layer.js", "src/Group.js", "src/Shape.js", "src/shapes/Rect.js", "src/shapes/Ellipse.js", "src/shapes/Image.js",
"src/shapes/Sprite.js", "src/shapes/Polygon.js", "src/shapes/RegularPolygon.js", "src/shapes/Star.js", "src/shapes/Text.js",
"src/shapes/Line.js", "src/shapes/Path.js", "src/util/Transform.js", "src/util/Transition.js"
"src/shapes/Line.js", "src/shapes/Path.js", "src/util/Transform.js", "src/Transition.js", "src/util/Tween.js"
]
desc "dev", "Concatenate all the js files into /dist/kinetic-VERSION.js."

465
dist/kinetic-core.js vendored
View File

@ -3,7 +3,7 @@
* http://www.kineticjs.com/
* Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses.
* Date: Jul 01 2012
* Date: Jul 03 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*
@ -60,29 +60,6 @@ Kinetic.GlobalObject = {
},
lastDrawTime: 0
},
extend: function(obj1, obj2) {
for(var key in obj2.prototype) {
if(obj2.prototype.hasOwnProperty(key) && obj1.prototype[key] === undefined) {
obj1.prototype[key] = obj2.prototype[key];
}
}
},
addSetters: function(constructor, arr) {
for(var n = 0; n < arr.length; n++) {
var attr = arr[n];
this._addSetter(constructor, attr);
}
},
addGetters: function(constructor, arr) {
for(var n = 0; n < arr.length; n++) {
var attr = arr[n];
this._addGetter(constructor, attr);
}
},
addSettersGetters: function(constructor, arr) {
this.addSetters(constructor, arr);
this.addGetters(constructor, arr);
},
_pullNodes: function(stage) {
var tempNodes = this.tempNodes;
for(var n = 0; n < tempNodes.length; n++) {
@ -362,29 +339,6 @@ Kinetic.GlobalObject = {
return arr;
}
},
_addSetter: function(constructor, attr) {
var that = this;
var method = 'set' + attr.charAt(0).toUpperCase() + attr.slice(1);
constructor.prototype[method] = function() {
var arg;
if(arguments.length == 1) {
arg = arguments[0];
}
else {
arg = Array.prototype.slice.call(arguments);
}
var obj = {};
obj[attr] = arg;
this.setAttrs(obj);
};
},
_addGetter: function(constructor, attr) {
var that = this;
var method = 'get' + attr.charAt(0).toUpperCase() + attr.slice(1);
constructor.prototype[method] = function(arg) {
return this.attrs[attr];
};
}
};
@ -395,9 +349,70 @@ window.requestAnimFrame = (function(callback) {
};
})();
/* Simple JavaScript Inheritance
* By John Resig http://ejohn.org/
* MIT Licensed.
*/
// Inspired by base2 and Prototype
(function() {
var initializing = false, fnTest = /xyz/.test(function() { xyz;
}) ? /\b_super\b/ : /.*/;
// The base Class implementation (does nothing)
Kinetic.Class = function() {
};
// Create a new Class that inherits from this class
Kinetic.Class.extend = function(prop) {
var _super = this.prototype;
// Instantiate a base class (but only create the instance,
// don't run the init constructor)
initializing = true;
var prototype = new this();
initializing = false;
// Copy the properties over onto the new prototype
for(var name in prop) {
// Check if we're overwriting an existing function
prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name]) ? (function(name, fn) {
return function() {
var tmp = this._super;
// Add a new ._super() method that is the same method
// but on the super-class
this._super = _super[name];
// The method only need to be bound temporarily, so we
// remove it when we're done executing
var ret = fn.apply(this, arguments);
this._super = tmp;
return ret;
};
})(name, prop[name]) : prop[name];
}
// The dummy class constructor
function Class() {
// All construction is actually done in the init method
if(!initializing && this.init)
this.init.apply(this, arguments);
}
// Populate our constructed prototype object
Class.prototype = prototype;
// Enforce the constructor to be what we expect
Class.prototype.constructor = Class;
// And make this class extendable
Class.extend = arguments.callee;
return Class;
};
})();
///////////////////////////////////////////////////////////////////////
// Node
///////////////////////////////////////////////////////////////////////
Kinetic.Node = Kinetic.Class.extend({
/**
* Node constructor.&nbsp; Nodes are entities that can be transformed, layered,
* and have events bound to them. They are the building blocks of a KineticJS
@ -405,7 +420,7 @@ window.requestAnimFrame = (function(callback) {
* @constructor
* @param {Object} config
*/
Kinetic.Node = function(config) {
init: function(config) {
this.defaultNodeAttrs = {
visible: true,
listening: true,
@ -459,11 +474,7 @@ Kinetic.Node = function(config) {
* above event binder
*/
this.simulate('draggableChange');
};
/*
* Node methods
*/
Kinetic.Node.prototype = {
},
/**
* bind events to the node. KineticJS supports mouseover, mousemove,
* mouseout, mousedown, mouseup, click, dblclick, touchstart, touchmove,
@ -1163,11 +1174,51 @@ Kinetic.Node.prototype = {
this._handleEvent.call(this.parent, eventType, evt);
}
}
};
});
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Node, ['x', 'y', 'scale', 'detectionType', 'rotation', 'alpha', 'name', 'id', 'offset', 'draggable', 'dragConstraint', 'dragBounds', 'listening']);
Kinetic.GlobalObject.addSetters(Kinetic.Node, ['rotationDeg']);
// add getter and setter methods
Kinetic.Node.addSetters = function(constructor, arr) {
for(var n = 0; n < arr.length; n++) {
var attr = arr[n];
this._addSetter(constructor, attr);
}
};
Kinetic.Node.addGetters = function(constructor, arr) {
for(var n = 0; n < arr.length; n++) {
var attr = arr[n];
this._addGetter(constructor, attr);
}
};
Kinetic.Node.addGettersSetters = function(constructor, arr) {
this.addSetters(constructor, arr);
this.addGetters(constructor, arr);
};
Kinetic.Node._addSetter = function(constructor, attr) {
var that = this;
var method = 'set' + attr.charAt(0).toUpperCase() + attr.slice(1);
constructor.prototype[method] = function() {
var arg;
if(arguments.length == 1) {
arg = arguments[0];
}
else {
arg = Array.prototype.slice.call(arguments);
}
var obj = {};
obj[attr] = arg;
this.setAttrs(obj);
};
};
Kinetic.Node._addGetter = function(constructor, attr) {
var that = this;
var method = 'get' + attr.charAt(0).toUpperCase() + attr.slice(1);
constructor.prototype[method] = function(arg) {
return this.attrs[attr];
};
};
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'scale', 'detectionType', 'rotation', 'alpha', 'name', 'id', 'offset', 'draggable', 'dragConstraint', 'dragBounds', 'listening']);
Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']);
/**
* set node x position
@ -1342,18 +1393,15 @@ Kinetic.GlobalObject.addSetters(Kinetic.Node, ['rotationDeg']);
///////////////////////////////////////////////////////////////////////
// Container
///////////////////////////////////////////////////////////////////////
Kinetic.Container = Kinetic.Node.extend({
/**
* Container constructor.&nbsp; Containers are used to contain nodes or other containers
* @constructor
*/
Kinetic.Container = function() {
init: function(config) {
this.children = [];
};
/*
* Container methods
*/
Kinetic.Container.prototype = {
this._super(config);
},
/**
* get children
*/
@ -1565,11 +1613,12 @@ Kinetic.Container.prototype = {
}
}
}
};
});
///////////////////////////////////////////////////////////////////////
// Stage
///////////////////////////////////////////////////////////////////////
Kinetic.Stage = Kinetic.Container.extend({
/**
* Stage constructor. A stage is used to contain multiple layers and handle
* animations
@ -1580,7 +1629,7 @@ Kinetic.Container.prototype = {
* @param {int} width
* @param {int} height
*/
Kinetic.Stage = function(config) {
init: function(config) {
this.setDefaultAttrs({
width: 400,
height: 200,
@ -1595,9 +1644,8 @@ Kinetic.Stage = function(config) {
config.container = document.getElementById(config.container);
}
// call super constructors
Kinetic.Container.apply(this, []);
Kinetic.Node.apply(this, [config]);
// call super constructor
this._super(config);
this._setStageDefaultProperties();
this._id = Kinetic.GlobalObject.idCounter++;
@ -1616,12 +1664,7 @@ Kinetic.Stage = function(config) {
go.stages.push(this);
this._addId(this);
this._addName(this);
};
/*
* Stage methods
*/
Kinetic.Stage.prototype = {
},
/**
* sets onFrameFunc for animation
* @param {function} func
@ -2548,13 +2591,10 @@ Kinetic.Stage.prototype = {
this.anim = undefined;
this.animRunning = false;
}
};
// Extend Container and Node
Kinetic.GlobalObject.extend(Kinetic.Stage, Kinetic.Container);
Kinetic.GlobalObject.extend(Kinetic.Stage, Kinetic.Node);
});
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Stage, ['width', 'height', 'throttle']);
// add getters and setters
Kinetic.Node.addGettersSetters(Kinetic.Stage, ['width', 'height', 'throttle']);
/**
* get width
@ -2600,6 +2640,7 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Stage, ['width', 'height', 'throt
///////////////////////////////////////////////////////////////////////
// Layer
///////////////////////////////////////////////////////////////////////
Kinetic.Layer = Kinetic.Container.extend({
/**
* Layer constructor. Layers are tied to their own canvas element and are used
* to contain groups or shapes
@ -2608,7 +2649,7 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Stage, ['width', 'height', 'throt
* @augments Kinetic.Node
* @param {Object} config
*/
Kinetic.Layer = function(config) {
init: function(config) {
this.setDefaultAttrs({
throttle: 80,
clearBeforeDraw: true
@ -2623,14 +2664,9 @@ Kinetic.Layer = function(config) {
this.context = this.canvas.getContext('2d');
this.canvas.style.position = 'absolute';
// call super constructors
Kinetic.Container.apply(this, []);
Kinetic.Node.apply(this, [config]);
};
/*
* Layer methods
*/
Kinetic.Layer.prototype = {
// call super constructor
this._super(config);
},
/**
* draw children nodes. this includes any groups
* or shapes
@ -2744,13 +2780,10 @@ Kinetic.Layer.prototype = {
this.afterDrawFunc.call(this);
}
}
};
// Extend Container and Node
Kinetic.GlobalObject.extend(Kinetic.Layer, Kinetic.Container);
Kinetic.GlobalObject.extend(Kinetic.Layer, Kinetic.Node);
});
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Layer, ['clearBeforeDraw']);
// add getters and setters
Kinetic.Node.addGettersSetters(Kinetic.Layer, ['clearBeforeDraw']);
/**
* set flag which determines if the layer is cleared or not
@ -2766,11 +2799,10 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Layer, ['clearBeforeDraw']);
* @name getClearBeforeDraw
* @methodOf Kinetic.Layer.prototype
*/
///////////////////////////////////////////////////////////////////////
// Group
///////////////////////////////////////////////////////////////////////
Kinetic.Group = Kinetic.Container.extend({
/**
* Group constructor. Groups are used to contain shapes or other groups.
* @constructor
@ -2778,31 +2810,23 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Layer, ['clearBeforeDraw']);
* @augments Kinetic.Node
* @param {Object} config
*/
Kinetic.Group = function(config) {
this.nodeType = 'Group';;
init: function(config) {
this.nodeType = 'Group';
// call super constructors
Kinetic.Container.apply(this, []);
Kinetic.Node.apply(this, [config]);
};
/*
* Group methods
*/
Kinetic.Group.prototype = {
// call super constructor
this._super(config);
},
draw: function() {
if(this.attrs.visible) {
this._drawChildren();
}
}
};
// Extend Container and Node
Kinetic.GlobalObject.extend(Kinetic.Group, Kinetic.Container);
Kinetic.GlobalObject.extend(Kinetic.Group, Kinetic.Node);
});
///////////////////////////////////////////////////////////////////////
// Shape
///////////////////////////////////////////////////////////////////////
Kinetic.Shape = Kinetic.Node.extend({
/**
* Shape constructor. Shapes are used to objectify drawing bits of a KineticJS
* application
@ -2819,7 +2843,7 @@ Kinetic.GlobalObject.extend(Kinetic.Group, Kinetic.Node);
* @config {String} [detectionType] shape detection type. Can be "path" or "pixel".
* The default is "path" because it performs better
*/
Kinetic.Shape = function(config) {
init: function(config) {
this.setDefaultAttrs({
detectionType: 'path'
});
@ -2829,12 +2853,8 @@ Kinetic.Shape = function(config) {
this.appliedShadow = false;
// call super constructor
Kinetic.Node.apply(this, [config]);
};
/*
* Shape methods
*/
Kinetic.Shape.prototype = {
this._super(config);
},
/**
* get layer context where the shape is being drawn. When
* the shape is being rendered, .getContext() returns the context of the
@ -3179,12 +3199,10 @@ Kinetic.Shape.prototype = {
context.restore();
}
}
};
// extend Node
Kinetic.GlobalObject.extend(Kinetic.Shape, Kinetic.Node);
});
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Shape, ['fill', 'stroke', 'lineJoin', 'strokeWidth', 'shadow', 'drawFunc']);
// add getters and setters
Kinetic.Node.addGettersSetters(Kinetic.Shape, ['fill', 'stroke', 'lineJoin', 'strokeWidth', 'shadow', 'drawFunc']);
/**
* set fill which can be a color, linear gradient object,
@ -3268,13 +3286,14 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Shape, ['fill', 'stroke', 'lineJo
///////////////////////////////////////////////////////////////////////
// Rect
///////////////////////////////////////////////////////////////////////
Kinetic.Rect = Kinetic.Shape.extend({
/**
* Rect constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Rect = function(config) {
init: function(config) {
this.setDefaultAttrs({
width: 0,
height: 0,
@ -3308,12 +3327,8 @@ Kinetic.Rect = function(config) {
this.stroke();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
};
/*
* Rect methods
*/
Kinetic.Rect.prototype = {
this._super(config);
},
/**
* set width and height
*/
@ -3330,13 +3345,10 @@ Kinetic.Rect.prototype = {
height: this.attrs.height
};
}
};
});
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Rect, Kinetic.Shape);
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Rect, ['width', 'height', 'cornerRadius']);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Rect, ['width', 'height', 'cornerRadius']);
/**
* set width
@ -3379,13 +3391,14 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Rect, ['width', 'height', 'corner
///////////////////////////////////////////////////////////////////////
// Ellipse
///////////////////////////////////////////////////////////////////////
Kinetic.Ellipse = Kinetic.Shape.extend({
/**
* Ellipse constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Ellipse = function(config) {
init: function(config) {
this.setDefaultAttrs({
radius: {
x: 0,
@ -3411,7 +3424,7 @@ Kinetic.Ellipse = function(config) {
this.stroke();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
this._super(config);
this._convertRadius();
@ -3419,11 +3432,7 @@ Kinetic.Ellipse = function(config) {
this.on('radiusChange', function() {
that._convertRadius();
});
};
// Circle backwards compatibility
Kinetic.Circle = Kinetic.Ellipse;
Kinetic.Ellipse.prototype = {
},
/**
* converts numeric radius into an object
*/
@ -3441,12 +3450,13 @@ Kinetic.Ellipse.prototype = {
*/
this.attrs.radius = go._getXY(radius);
}
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Ellipse, Kinetic.Shape);
});
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Ellipse, ['radius']);
// Circle backwards compatibility
Kinetic.Circle = Kinetic.Ellipse;
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Ellipse, ['radius']);
/**
* set radius
@ -3467,13 +3477,14 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Ellipse, ['radius']);
///////////////////////////////////////////////////////////////////////
// Image
///////////////////////////////////////////////////////////////////////
Kinetic.Image = Kinetic.Shape.extend({
/**
* Image constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Image = function(config) {
init: function(config) {
this.shapeType = "Image";
config.drawFunc = function() {
if(!!this.attrs.image) {
@ -3503,12 +3514,8 @@ Kinetic.Image = function(config) {
}
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
};
/*
* Image methods
*/
Kinetic.Image.prototype = {
this._super(config);
},
/**
* set width and height
*/
@ -3525,11 +3532,10 @@ Kinetic.Image.prototype = {
height: this.attrs.height
};
}
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Image, Kinetic.Shape);
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['height', 'width', 'image', 'crop']);
});
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Image, ['height', 'width', 'image', 'crop']);
/**
* set width
@ -3585,13 +3591,14 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['height', 'width', 'image
///////////////////////////////////////////////////////////////////////
// Sprite
///////////////////////////////////////////////////////////////////////
Kinetic.Sprite = Kinetic.Shape.extend({
/**
* Sprite constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Sprite = function(config) {
init: function(config) {
this.setDefaultAttrs({
index: 0,
frameRate: 17
@ -3612,18 +3619,14 @@ Kinetic.Sprite = function(config) {
}
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
this._super(config);
var that = this;
this.on('animationChange', function() {
// reset index when animation changes
that.setIndex(0);
});
};
/*
* Sprite methods
*/
Kinetic.Sprite.prototype = {
},
/**
* start sprite animation
*/
@ -3663,12 +3666,10 @@ Kinetic.Sprite.prototype = {
this.attrs.index = 0;
}
}
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Sprite, Kinetic.Shape);
});
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Sprite, ['animation', 'animations', 'index']);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Sprite, ['animation', 'animations', 'index']);
/**
* set animation key
@ -3711,13 +3712,14 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Sprite, ['animation', 'animations
///////////////////////////////////////////////////////////////////////
// Polygon
///////////////////////////////////////////////////////////////////////
Kinetic.Polygon = Kinetic.Shape.extend({
/**
* Polygon constructor.&nbsp; Polygons are defined by an array of points
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Polygon = function(config) {
init: function(config) {
this.setDefaultAttrs({
points: []
});
@ -3735,13 +3737,12 @@ Kinetic.Polygon = function(config) {
this.stroke();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Polygon, Kinetic.Shape);
this._super(config);
}
});
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Polygon, ['points']);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Polygon, ['points']);
/**
* set points array
@ -3759,13 +3760,14 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Polygon, ['points']);
///////////////////////////////////////////////////////////////////////
// RegularPolygon
///////////////////////////////////////////////////////////////////////
Kinetic.RegularPolygon = Kinetic.Shape.extend({
/**
* RegularPolygon constructor.&nbsp; Examples include triangles, squares, pentagons, hexagons, etc.
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.RegularPolygon = function(config) {
init: function(config) {
this.setDefaultAttrs({
radius: 0,
sides: 0
@ -3787,13 +3789,12 @@ Kinetic.RegularPolygon = function(config) {
this.stroke();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.RegularPolygon, Kinetic.Shape);
this._super(config);
}
});
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Rect, ['radius', 'sides']);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Rect, ['radius', 'sides']);
/**
* set radius
@ -3822,13 +3823,14 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Rect, ['radius', 'sides']);
///////////////////////////////////////////////////////////////////////
// Star
///////////////////////////////////////////////////////////////////////
Kinetic.Star = Kinetic.Shape.extend({
/**
* Star constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Star = function(config) {
init: function(config) {
this.setDefaultAttrs({
numPoints: 0,
innerRadius: 0,
@ -3853,13 +3855,12 @@ Kinetic.Star = function(config) {
this.stroke();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Star, Kinetic.Shape);
this._super(config);
}
});
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Star, ['numPoints', 'innerRadius', 'outerRadius']);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Star, ['numPoints', 'innerRadius', 'outerRadius']);
/**
* set number of points
@ -3908,7 +3909,8 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Star, ['numPoints', 'innerRadius'
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Text = function(config) {
Kinetic.Text = Kinetic.Shape.extend({
init: function(config) {
this.setDefaultAttrs({
fontFamily: 'Calibri',
text: '',
@ -3992,7 +3994,7 @@ Kinetic.Text = function(config) {
context.restore();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
this._super(config);
// update text data for certain attr changes
var attrs = ['width', 'height', 'padding', 'text', 'textStroke', 'textStrokeWidth'];
@ -4003,11 +4005,7 @@ Kinetic.Text = function(config) {
}
that._setTextData();
};
/*
* Text methods
*/
Kinetic.Text.prototype = {
},
/**
* get text width in pixels
*/
@ -4084,12 +4082,9 @@ Kinetic.Text.prototype = {
this.textArr = arr;
}
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Text, Kinetic.Shape);
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'cornerRadius', 'fill', 'stroke', 'strokeWidth', 'shadow']);
});
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'cornerRadius', 'fill', 'stroke', 'strokeWidth', 'shadow']);
/**
* set font family
@ -4262,13 +4257,14 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Text, ['fontFamily', 'fontSize',
///////////////////////////////////////////////////////////////////////
// Line
///////////////////////////////////////////////////////////////////////
Kinetic.Line = Kinetic.Shape.extend({
/**
* Line constructor.&nbsp; Lines are defined by an array of points
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Line = function(config) {
init: function(config) {
this.setDefaultAttrs({
points: [],
lineCap: 'butt',
@ -4306,12 +4302,8 @@ Kinetic.Line = function(config) {
this.stroke();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
};
/*
* Line methods
*/
Kinetic.Line.prototype = {
this._super(config);
},
/**
* draw dashed line. Written by Phrogz
*/
@ -4359,12 +4351,10 @@ Kinetic.Line.prototype = {
context.moveTo(x2, y2);
}
};
});
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Line, Kinetic.Shape);
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Line, ['dashArray', 'lineCap', 'points']);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Line, ['dashArray', 'lineCap', 'points']);
/**
* set dash array.
@ -4414,6 +4404,7 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Line, ['dashArray', 'lineCap', 'p
///////////////////////////////////////////////////////////////////////
// SVG Path
///////////////////////////////////////////////////////////////////////
Kinetic.Path = Kinetic.Shape.extend({
/**
* Path constructor.
* @author Jason Follas
@ -4421,7 +4412,7 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Line, ['dashArray', 'lineCap', 'p
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Path = function(config) {
init: function(config) {
this.shapeType = "Path";
this.dataArray = [];
var that = this;
@ -4474,18 +4465,14 @@ Kinetic.Path = function(config) {
//console.profileEnd();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
this._super(config);
this.dataArray = this.getDataArray();
this.on('dataChange', function() {
that.dataArray = that.getDataArray();
});
};
/*
* Path methods
*/
Kinetic.Path.prototype = {
},
/**
* get parsed data array from the data
* string. V, v, H, h, and l data are converted to
@ -4779,13 +4766,10 @@ Kinetic.Path.prototype = {
return [cx, cy, rx, ry, theta, dTheta, psi, fs];
}
};
});
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Path, Kinetic.Shape);
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Path, ['data']);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Path, ['data']);
/**
* set SVG path data string. This method
@ -4919,15 +4903,8 @@ Kinetic.Transform.prototype = {
}
};
/*
* The Tween class was ported from an Adobe Flash Tween library
* to JavaScript by Xaric. In the context of KineticJS, a Tween is
* an animation of a single Node property. A Transition is a set of
* multiple tweens
*/
/**
* Transition constructor used by KineticJS. The transitionTo() Node method
* Transition constructor. The transitionTo() Node method
* returns a reference to the transition object which you can use
* to stop, resume, or restart the transition
* @constructor
@ -5020,6 +4997,12 @@ Kinetic.Transition.prototype = {
}
};
/*
* The Tween class was ported from an Adobe Flash Tween library
* to JavaScript by Xaric. In the context of KineticJS, a Tween is
* an animation of a single Node property. A Transition is a set of
* multiple tweens
*/
/**
* Tween constructor
*/

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

File diff suppressed because one or more lines are too long

13
src/Container.js
View File

@ -1,18 +1,15 @@
///////////////////////////////////////////////////////////////////////
// Container
///////////////////////////////////////////////////////////////////////
Kinetic.Container = Kinetic.Node.extend({
/**
* Container constructor.&nbsp; Containers are used to contain nodes or other containers
* @constructor
*/
Kinetic.Container = function() {
init: function(config) {
this.children = [];
};
/*
* Container methods
*/
Kinetic.Container.prototype = {
this._super(config);
},
/**
* get children
*/
@ -224,4 +221,4 @@ Kinetic.Container.prototype = {
}
}
}
};
});

46
src/GlobalObject.js
View File

@ -32,29 +32,6 @@ Kinetic.GlobalObject = {
},
lastDrawTime: 0
},
extend: function(obj1, obj2) {
for(var key in obj2.prototype) {
if(obj2.prototype.hasOwnProperty(key) && obj1.prototype[key] === undefined) {
obj1.prototype[key] = obj2.prototype[key];
}
}
},
addSetters: function(constructor, arr) {
for(var n = 0; n < arr.length; n++) {
var attr = arr[n];
this._addSetter(constructor, attr);
}
},
addGetters: function(constructor, arr) {
for(var n = 0; n < arr.length; n++) {
var attr = arr[n];
this._addGetter(constructor, attr);
}
},
addSettersGetters: function(constructor, arr) {
this.addSetters(constructor, arr);
this.addGetters(constructor, arr);
},
_pullNodes: function(stage) {
var tempNodes = this.tempNodes;
for(var n = 0; n < tempNodes.length; n++) {
@ -334,29 +311,6 @@ Kinetic.GlobalObject = {
return arr;
}
},
_addSetter: function(constructor, attr) {
var that = this;
var method = 'set' + attr.charAt(0).toUpperCase() + attr.slice(1);
constructor.prototype[method] = function() {
var arg;
if(arguments.length == 1) {
arg = arguments[0];
}
else {
arg = Array.prototype.slice.call(arguments);
}
var obj = {};
obj[attr] = arg;
this.setAttrs(obj);
};
},
_addGetter: function(constructor, attr) {
var that = this;
var method = 'get' + attr.charAt(0).toUpperCase() + attr.slice(1);
constructor.prototype[method] = function(arg) {
return this.attrs[attr];
};
}
};

23
src/Group.js
View File

@ -1,7 +1,7 @@
///////////////////////////////////////////////////////////////////////
// Group
///////////////////////////////////////////////////////////////////////
Kinetic.Group = Kinetic.Container.extend({
/**
* Group constructor. Groups are used to contain shapes or other groups.
* @constructor
@ -9,24 +9,15 @@
* @augments Kinetic.Node
* @param {Object} config
*/
Kinetic.Group = function(config) {
this.nodeType = 'Group';;
init: function(config) {
this.nodeType = 'Group';
// call super constructors
Kinetic.Container.apply(this, []);
Kinetic.Node.apply(this, [config]);
};
/*
* Group methods
*/
Kinetic.Group.prototype = {
// call super constructor
this._super(config);
},
draw: function() {
if(this.attrs.visible) {
this._drawChildren();
}
}
};
// Extend Container and Node
Kinetic.GlobalObject.extend(Kinetic.Group, Kinetic.Container);
Kinetic.GlobalObject.extend(Kinetic.Group, Kinetic.Node);
});

23
src/Layer.js
View File

@ -1,6 +1,7 @@
///////////////////////////////////////////////////////////////////////
// Layer
///////////////////////////////////////////////////////////////////////
Kinetic.Layer = Kinetic.Container.extend({
/**
* Layer constructor. Layers are tied to their own canvas element and are used
* to contain groups or shapes
@ -9,7 +10,7 @@
* @augments Kinetic.Node
* @param {Object} config
*/
Kinetic.Layer = function(config) {
init: function(config) {
this.setDefaultAttrs({
throttle: 80,
clearBeforeDraw: true
@ -24,14 +25,9 @@ Kinetic.Layer = function(config) {
this.context = this.canvas.getContext('2d');
this.canvas.style.position = 'absolute';
// call super constructors
Kinetic.Container.apply(this, []);
Kinetic.Node.apply(this, [config]);
};
/*
* Layer methods
*/
Kinetic.Layer.prototype = {
// call super constructor
this._super(config);
},
/**
* draw children nodes. this includes any groups
* or shapes
@ -145,13 +141,10 @@ Kinetic.Layer.prototype = {
this.afterDrawFunc.call(this);
}
}
};
// Extend Container and Node
Kinetic.GlobalObject.extend(Kinetic.Layer, Kinetic.Container);
Kinetic.GlobalObject.extend(Kinetic.Layer, Kinetic.Node);
});
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Layer, ['clearBeforeDraw']);
// add getters and setters
Kinetic.Node.addGettersSetters(Kinetic.Layer, ['clearBeforeDraw']);
/**
* set flag which determines if the layer is cleared or not

57
src/Node.js
View File

@ -1,6 +1,7 @@
///////////////////////////////////////////////////////////////////////
// Node
///////////////////////////////////////////////////////////////////////
Kinetic.Node = Kinetic.Class.extend({
/**
* Node constructor.&nbsp; Nodes are entities that can be transformed, layered,
* and have events bound to them. They are the building blocks of a KineticJS
@ -8,7 +9,7 @@
* @constructor
* @param {Object} config
*/
Kinetic.Node = function(config) {
init: function(config) {
this.defaultNodeAttrs = {
visible: true,
listening: true,
@ -62,11 +63,7 @@ Kinetic.Node = function(config) {
* above event binder
*/
this.simulate('draggableChange');
};
/*
* Node methods
*/
Kinetic.Node.prototype = {
},
/**
* bind events to the node. KineticJS supports mouseover, mousemove,
* mouseout, mousedown, mouseup, click, dblclick, touchstart, touchmove,
@ -766,11 +763,51 @@ Kinetic.Node.prototype = {
this._handleEvent.call(this.parent, eventType, evt);
}
}
};
});
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Node, ['x', 'y', 'scale', 'detectionType', 'rotation', 'alpha', 'name', 'id', 'offset', 'draggable', 'dragConstraint', 'dragBounds', 'listening']);
Kinetic.GlobalObject.addSetters(Kinetic.Node, ['rotationDeg']);
// add getter and setter methods
Kinetic.Node.addSetters = function(constructor, arr) {
for(var n = 0; n < arr.length; n++) {
var attr = arr[n];
this._addSetter(constructor, attr);
}
};
Kinetic.Node.addGetters = function(constructor, arr) {
for(var n = 0; n < arr.length; n++) {
var attr = arr[n];
this._addGetter(constructor, attr);
}
};
Kinetic.Node.addGettersSetters = function(constructor, arr) {
this.addSetters(constructor, arr);
this.addGetters(constructor, arr);
};
Kinetic.Node._addSetter = function(constructor, attr) {
var that = this;
var method = 'set' + attr.charAt(0).toUpperCase() + attr.slice(1);
constructor.prototype[method] = function() {
var arg;
if(arguments.length == 1) {
arg = arguments[0];
}
else {
arg = Array.prototype.slice.call(arguments);
}
var obj = {};
obj[attr] = arg;
this.setAttrs(obj);
};
};
Kinetic.Node._addGetter = function(constructor, attr) {
var that = this;
var method = 'get' + attr.charAt(0).toUpperCase() + attr.slice(1);
constructor.prototype[method] = function(arg) {
return this.attrs[attr];
};
};
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'scale', 'detectionType', 'rotation', 'alpha', 'name', 'id', 'offset', 'draggable', 'dragConstraint', 'dragBounds', 'listening']);
Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']);
/**
* set node x position

19
src/Shape.js
View File

@ -1,6 +1,7 @@
///////////////////////////////////////////////////////////////////////
// Shape
///////////////////////////////////////////////////////////////////////
Kinetic.Shape = Kinetic.Node.extend({
/**
* Shape constructor. Shapes are used to objectify drawing bits of a KineticJS
* application
@ -17,7 +18,7 @@
* @config {String} [detectionType] shape detection type. Can be "path" or "pixel".
* The default is "path" because it performs better
*/
Kinetic.Shape = function(config) {
init: function(config) {
this.setDefaultAttrs({
detectionType: 'path'
});
@ -27,12 +28,8 @@ Kinetic.Shape = function(config) {
this.appliedShadow = false;
// call super constructor
Kinetic.Node.apply(this, [config]);
};
/*
* Shape methods
*/
Kinetic.Shape.prototype = {
this._super(config);
},
/**
* get layer context where the shape is being drawn. When
* the shape is being rendered, .getContext() returns the context of the
@ -377,12 +374,10 @@ Kinetic.Shape.prototype = {
context.restore();
}
}
};
// extend Node
Kinetic.GlobalObject.extend(Kinetic.Shape, Kinetic.Node);
});
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Shape, ['fill', 'stroke', 'lineJoin', 'strokeWidth', 'shadow', 'drawFunc']);
// add getters and setters
Kinetic.Node.addGettersSetters(Kinetic.Shape, ['fill', 'stroke', 'lineJoin', 'strokeWidth', 'shadow', 'drawFunc']);
/**
* set fill which can be a color, linear gradient object,

24
src/Stage.js
View File

@ -1,6 +1,7 @@
///////////////////////////////////////////////////////////////////////
// Stage
///////////////////////////////////////////////////////////////////////
Kinetic.Stage = Kinetic.Container.extend({
/**
* Stage constructor. A stage is used to contain multiple layers and handle
* animations
@ -11,7 +12,7 @@
* @param {int} width
* @param {int} height
*/
Kinetic.Stage = function(config) {
init: function(config) {
this.setDefaultAttrs({
width: 400,
height: 200,
@ -26,9 +27,8 @@ Kinetic.Stage = function(config) {
config.container = document.getElementById(config.container);
}
// call super constructors
Kinetic.Container.apply(this, []);
Kinetic.Node.apply(this, [config]);
// call super constructor
this._super(config);
this._setStageDefaultProperties();
this._id = Kinetic.GlobalObject.idCounter++;
@ -47,12 +47,7 @@ Kinetic.Stage = function(config) {
go.stages.push(this);
this._addId(this);
this._addName(this);
};
/*
* Stage methods
*/
Kinetic.Stage.prototype = {
},
/**
* sets onFrameFunc for animation
* @param {function} func
@ -979,13 +974,10 @@ Kinetic.Stage.prototype = {
this.anim = undefined;
this.animRunning = false;
}
};
// Extend Container and Node
Kinetic.GlobalObject.extend(Kinetic.Stage, Kinetic.Container);
Kinetic.GlobalObject.extend(Kinetic.Stage, Kinetic.Node);
});
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Stage, ['width', 'height', 'throttle']);
// add getters and setters
Kinetic.Node.addGettersSetters(Kinetic.Stage, ['width', 'height', 'throttle']);
/**
* get width

93
src/Transition.js Normal file
View File

@ -0,0 +1,93 @@
/**
* Transition constructor. The transitionTo() Node method
* returns a reference to the transition object which you can use
* to stop, resume, or restart the transition
* @constructor
*/
Kinetic.Transition = function(node, config) {
this.node = node;
this.config = config;
this.tweens = [];
var that = this;
// add tween for each property
function addTween(c, attrs, obj, rootObj) {
for(var key in c) {
if(key !== 'duration' && key !== 'easing' && key !== 'callback') {
// if val is an object then traverse
if(Kinetic.GlobalObject._isObject(c[key])) {
obj[key] = {};
addTween(c[key], attrs[key], obj[key], rootObj);
}
else {
that._add(that._getTween(attrs, key, c[key], obj, rootObj));
}
}
}
}
var obj = {};
addTween(config, node.attrs, obj, obj);
var finishedTweens = 0;
for(var n = 0; n < this.tweens.length; n++) {
var tween = this.tweens[n];
tween.onFinished = function() {
finishedTweens++;
if(finishedTweens >= that.tweens.length) {
that.onFinished();
}
};
}
};
/*
* Transition methods
*/
Kinetic.Transition.prototype = {
/**
* start transition
*/
start: function() {
for(var n = 0; n < this.tweens.length; n++) {
this.tweens[n].start();
}
},
/**
* stop transition
*/
stop: function() {
for(var n = 0; n < this.tweens.length; n++) {
this.tweens[n].stop();
}
},
/**
* resume transition
*/
resume: function() {
for(var n = 0; n < this.tweens.length; n++) {
this.tweens[n].resume();
}
},
_onEnterFrame: function() {
for(var n = 0; n < this.tweens.length; n++) {
this.tweens[n].onEnterFrame();
}
},
_add: function(tween) {
this.tweens.push(tween);
},
_getTween: function(attrs, prop, val, obj, rootObj) {
var config = this.config;
var node = this.node;
var easing = config.easing;
if(easing === undefined) {
easing = 'linear';
}
var tween = new Kinetic.Tween(node, function(i) {
obj[prop] = i;
node.setAttrs(rootObj);
}, Kinetic.Tweens[easing], attrs[prop], val, config.duration);
return tween;
}
};

22
src/shapes/Ellipse.js
View File

@ -1,13 +1,14 @@
///////////////////////////////////////////////////////////////////////
// Ellipse
///////////////////////////////////////////////////////////////////////
Kinetic.Ellipse = Kinetic.Shape.extend({
/**
* Ellipse constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Ellipse = function(config) {
init: function(config) {
this.setDefaultAttrs({
radius: {
x: 0,
@ -33,7 +34,7 @@ Kinetic.Ellipse = function(config) {
this.stroke();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
this._super(config);
this._convertRadius();
@ -41,11 +42,7 @@ Kinetic.Ellipse = function(config) {
this.on('radiusChange', function() {
that._convertRadius();
});
};
// Circle backwards compatibility
Kinetic.Circle = Kinetic.Ellipse;
Kinetic.Ellipse.prototype = {
},
/**
* converts numeric radius into an object
*/
@ -63,12 +60,13 @@ Kinetic.Ellipse.prototype = {
*/
this.attrs.radius = go._getXY(radius);
}
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Ellipse, Kinetic.Shape);
});
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Ellipse, ['radius']);
// Circle backwards compatibility
Kinetic.Circle = Kinetic.Ellipse;
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Ellipse, ['radius']);
/**
* set radius

20
src/shapes/Image.js
View File

@ -1,13 +1,14 @@
///////////////////////////////////////////////////////////////////////
// Image
///////////////////////////////////////////////////////////////////////
Kinetic.Image = Kinetic.Shape.extend({
/**
* Image constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Image = function(config) {
init: function(config) {
this.shapeType = "Image";
config.drawFunc = function() {
if(!!this.attrs.image) {
@ -37,12 +38,8 @@ Kinetic.Image = function(config) {
}
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
};
/*
* Image methods
*/
Kinetic.Image.prototype = {
this._super(config);
},
/**
* set width and height
*/
@ -59,11 +56,10 @@ Kinetic.Image.prototype = {
height: this.attrs.height
};
}
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Image, Kinetic.Shape);
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Image, ['height', 'width', 'image', 'crop']);
});
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Image, ['height', 'width', 'image', 'crop']);
/**
* set width

19
src/shapes/Line.js
View File

@ -1,13 +1,14 @@
///////////////////////////////////////////////////////////////////////
// Line
///////////////////////////////////////////////////////////////////////
Kinetic.Line = Kinetic.Shape.extend({
/**
* Line constructor.&nbsp; Lines are defined by an array of points
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Line = function(config) {
init: function(config) {
this.setDefaultAttrs({
points: [],
lineCap: 'butt',
@ -45,12 +46,8 @@ Kinetic.Line = function(config) {
this.stroke();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
};
/*
* Line methods
*/
Kinetic.Line.prototype = {
this._super(config);
},
/**
* draw dashed line. Written by Phrogz
*/
@ -98,12 +95,10 @@ Kinetic.Line.prototype = {
context.moveTo(x2, y2);
}
};
});
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Line, Kinetic.Shape);
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Line, ['dashArray', 'lineCap', 'points']);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Line, ['dashArray', 'lineCap', 'points']);
/**
* set dash array.

20
src/shapes/Path.js
View File

@ -1,6 +1,7 @@
///////////////////////////////////////////////////////////////////////
// SVG Path
///////////////////////////////////////////////////////////////////////
Kinetic.Path = Kinetic.Shape.extend({
/**
* Path constructor.
* @author Jason Follas
@ -8,7 +9,7 @@
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Path = function(config) {
init: function(config) {
this.shapeType = "Path";
this.dataArray = [];
var that = this;
@ -61,18 +62,14 @@ Kinetic.Path = function(config) {
//console.profileEnd();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
this._super(config);
this.dataArray = this.getDataArray();
this.on('dataChange', function() {
that.dataArray = that.getDataArray();
});
};
/*
* Path methods
*/
Kinetic.Path.prototype = {
},
/**
* get parsed data array from the data
* string. V, v, H, h, and l data are converted to
@ -366,13 +363,10 @@ Kinetic.Path.prototype = {
return [cx, cy, rx, ry, theta, dTheta, psi, fs];
}
};
});
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Path, Kinetic.Shape);
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Path, ['data']);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Path, ['data']);
/**
* set SVG path data string. This method

14
src/shapes/Polygon.js
View File

@ -1,13 +1,14 @@
///////////////////////////////////////////////////////////////////////
// Polygon
///////////////////////////////////////////////////////////////////////
Kinetic.Polygon = Kinetic.Shape.extend({
/**
* Polygon constructor.&nbsp; Polygons are defined by an array of points
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Polygon = function(config) {
init: function(config) {
this.setDefaultAttrs({
points: []
});
@ -25,13 +26,12 @@ Kinetic.Polygon = function(config) {
this.stroke();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Polygon, Kinetic.Shape);
this._super(config);
}
});
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Polygon, ['points']);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Polygon, ['points']);
/**
* set points array

20
src/shapes/Rect.js
View File

@ -1,13 +1,14 @@
///////////////////////////////////////////////////////////////////////
// Rect
///////////////////////////////////////////////////////////////////////
Kinetic.Rect = Kinetic.Shape.extend({
/**
* Rect constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Rect = function(config) {
init: function(config) {
this.setDefaultAttrs({
width: 0,
height: 0,
@ -41,12 +42,8 @@ Kinetic.Rect = function(config) {
this.stroke();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
};
/*
* Rect methods
*/
Kinetic.Rect.prototype = {
this._super(config);
},
/**
* set width and height
*/
@ -63,13 +60,10 @@ Kinetic.Rect.prototype = {
height: this.attrs.height
};
}
};
});
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Rect, Kinetic.Shape);
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Rect, ['width', 'height', 'cornerRadius']);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Rect, ['width', 'height', 'cornerRadius']);
/**
* set width

14
src/shapes/RegularPolygon.js
View File

@ -1,13 +1,14 @@
///////////////////////////////////////////////////////////////////////
// RegularPolygon
///////////////////////////////////////////////////////////////////////
Kinetic.RegularPolygon = Kinetic.Shape.extend({
/**
* RegularPolygon constructor.&nbsp; Examples include triangles, squares, pentagons, hexagons, etc.
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.RegularPolygon = function(config) {
init: function(config) {
this.setDefaultAttrs({
radius: 0,
sides: 0
@ -29,13 +30,12 @@ Kinetic.RegularPolygon = function(config) {
this.stroke();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.RegularPolygon, Kinetic.Shape);
this._super(config);
}
});
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Rect, ['radius', 'sides']);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Rect, ['radius', 'sides']);
/**
* set radius

19
src/shapes/Sprite.js
View File

@ -1,13 +1,14 @@
///////////////////////////////////////////////////////////////////////
// Sprite
///////////////////////////////////////////////////////////////////////
Kinetic.Sprite = Kinetic.Shape.extend({
/**
* Sprite constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Sprite = function(config) {
init: function(config) {
this.setDefaultAttrs({
index: 0,
frameRate: 17
@ -28,18 +29,14 @@ Kinetic.Sprite = function(config) {
}
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
this._super(config);
var that = this;
this.on('animationChange', function() {
// reset index when animation changes
that.setIndex(0);
});
};
/*
* Sprite methods
*/
Kinetic.Sprite.prototype = {
},
/**
* start sprite animation
*/
@ -79,12 +76,10 @@ Kinetic.Sprite.prototype = {
this.attrs.index = 0;
}
}
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Sprite, Kinetic.Shape);
});
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Sprite, ['animation', 'animations', 'index']);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Sprite, ['animation', 'animations', 'index']);
/**
* set animation key

14
src/shapes/Star.js
View File

@ -1,13 +1,14 @@
///////////////////////////////////////////////////////////////////////
// Star
///////////////////////////////////////////////////////////////////////
Kinetic.Star = Kinetic.Shape.extend({
/**
* Star constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Star = function(config) {
init: function(config) {
this.setDefaultAttrs({
numPoints: 0,
innerRadius: 0,
@ -32,13 +33,12 @@ Kinetic.Star = function(config) {
this.stroke();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Star, Kinetic.Shape);
this._super(config);
}
});
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Star, ['numPoints', 'innerRadius', 'outerRadius']);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Star, ['numPoints', 'innerRadius', 'outerRadius']);
/**
* set number of points

20
src/shapes/Text.js
View File

@ -7,7 +7,8 @@
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Text = function(config) {
Kinetic.Text = Kinetic.Shape.extend({
init: function(config) {
this.setDefaultAttrs({
fontFamily: 'Calibri',
text: '',
@ -91,7 +92,7 @@ Kinetic.Text = function(config) {
context.restore();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
this._super(config);
// update text data for certain attr changes
var attrs = ['width', 'height', 'padding', 'text', 'textStroke', 'textStrokeWidth'];
@ -102,11 +103,7 @@ Kinetic.Text = function(config) {
}
that._setTextData();
};
/*
* Text methods
*/
Kinetic.Text.prototype = {
},
/**
* get text width in pixels
*/
@ -183,12 +180,9 @@ Kinetic.Text.prototype = {
this.textArr = arr;
}
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Text, Kinetic.Shape);
// add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'cornerRadius', 'fill', 'stroke', 'strokeWidth', 'shadow']);
});
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'cornerRadius', 'fill', 'stroke', 'strokeWidth', 'shadow']);
/**
* set font family

60
src/util/Class.js Normal file
View File

@ -0,0 +1,60 @@
/* Simple JavaScript Inheritance
* By John Resig http://ejohn.org/
* MIT Licensed.
*/
// Inspired by base2 and Prototype
(function() {
var initializing = false, fnTest = /xyz/.test(function() { xyz;
}) ? /\b_super\b/ : /.*/;
// The base Class implementation (does nothing)
Kinetic.Class = function() {
};
// Create a new Class that inherits from this class
Kinetic.Class.extend = function(prop) {
var _super = this.prototype;
// Instantiate a base class (but only create the instance,
// don't run the init constructor)
initializing = true;
var prototype = new this();
initializing = false;
// Copy the properties over onto the new prototype
for(var name in prop) {
// Check if we're overwriting an existing function
prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name]) ? (function(name, fn) {
return function() {
var tmp = this._super;
// Add a new ._super() method that is the same method
// but on the super-class
this._super = _super[name];
// The method only need to be bound temporarily, so we
// remove it when we're done executing
var ret = fn.apply(this, arguments);
this._super = tmp;
return ret;
};
})(name, prop[name]) : prop[name];
}
// The dummy class constructor
function Class() {
// All construction is actually done in the init method
if(!initializing && this.init)
this.init.apply(this, arguments);
}
// Populate our constructed prototype object
Class.prototype = prototype;
// Enforce the constructor to be what we expect
Class.prototype.constructor = Class;
// And make this class extendable
Class.extend = arguments.callee;
return Class;
};
})();

95
src/util/Transition.js → src/util/Tween.js
View File

@ -4,101 +4,6 @@
* an animation of a single Node property. A Transition is a set of
* multiple tweens
*/
/**
* Transition constructor used by KineticJS. The transitionTo() Node method
* returns a reference to the transition object which you can use
* to stop, resume, or restart the transition
* @constructor
*/
Kinetic.Transition = function(node, config) {
this.node = node;
this.config = config;
this.tweens = [];
var that = this;
// add tween for each property
function addTween(c, attrs, obj, rootObj) {
for(var key in c) {
if(key !== 'duration' && key !== 'easing' && key !== 'callback') {
// if val is an object then traverse
if(Kinetic.GlobalObject._isObject(c[key])) {
obj[key] = {};
addTween(c[key], attrs[key], obj[key], rootObj);
}
else {
that._add(that._getTween(attrs, key, c[key], obj, rootObj));
}
}
}
}
var obj = {};
addTween(config, node.attrs, obj, obj);
var finishedTweens = 0;
for(var n = 0; n < this.tweens.length; n++) {
var tween = this.tweens[n];
tween.onFinished = function() {
finishedTweens++;
if(finishedTweens >= that.tweens.length) {
that.onFinished();
}
};
}
};
/*
* Transition methods
*/
Kinetic.Transition.prototype = {
/**
* start transition
*/
start: function() {
for(var n = 0; n < this.tweens.length; n++) {
this.tweens[n].start();
}
},
/**
* stop transition
*/
stop: function() {
for(var n = 0; n < this.tweens.length; n++) {
this.tweens[n].stop();
}
},
/**
* resume transition
*/
resume: function() {
for(var n = 0; n < this.tweens.length; n++) {
this.tweens[n].resume();
}
},
_onEnterFrame: function() {
for(var n = 0; n < this.tweens.length; n++) {
this.tweens[n].onEnterFrame();
}
},
_add: function(tween) {
this.tweens.push(tween);
},
_getTween: function(attrs, prop, val, obj, rootObj) {
var config = this.config;
var node = this.node;
var easing = config.easing;
if(easing === undefined) {
easing = 'linear';
}
var tween = new Kinetic.Tween(node, function(i) {
obj[prop] = i;
node.setAttrs(rootObj);
}, Kinetic.Tweens[easing], attrs[prop], val, config.duration);
return tween;
}
};
/**
* Tween constructor
*/