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

really cool new feature that... wait, no, just more docmentation

Browse Source
This commit is contained in:
Eric Rowell
2013-01-02 23:55:56 -08:00
parent c675f19e52
commit bba5c7b101
20 changed files with 968 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/Canvas.js
View File

@@ -118,7 +118,7 @@
} }
}, },
/** /**
* fill shape path * fill shape
* @name fill * @name fill
* @methodOf Kinetic.Canvas.prototype * @methodOf Kinetic.Canvas.prototype
* @param {Kinetic.Shape} shape * @param {Kinetic.Shape} shape
@@ -127,7 +127,7 @@
this._fill(shape); this._fill(shape);
}, },
/** /**
* stroke shape path * stroke shape
* @name stroke * @name stroke
* @methodOf Kinetic.Canvas.prototype * @methodOf Kinetic.Canvas.prototype
* @param {Kinetic.Shape} shape * @param {Kinetic.Shape} shape
@@ -202,13 +202,6 @@
} }
}; };
/**
* Scene Canvas Renderer constructor
* @constructor
* @augments Kinetic.Canvas
* @param {Number} width
* @param {Number} height
*/
Kinetic.SceneCanvas = function(width, height) { Kinetic.SceneCanvas = function(width, height) {
Kinetic.Canvas.call(this, width, height); Kinetic.Canvas.call(this, width, height);
}; };
@@ -335,13 +328,6 @@
}; };
Kinetic.Global.extend(Kinetic.SceneCanvas, Kinetic.Canvas); Kinetic.Global.extend(Kinetic.SceneCanvas, Kinetic.Canvas);
/**
* Hit Graph Canvas Renderer constructor
* @constructor
* @augments Kinetic.Canvas
* @param {Number} width
* @param {Number} height
*/
Kinetic.HitCanvas = function(width, height) { Kinetic.HitCanvas = function(width, height) {
Kinetic.Canvas.call(this, width, height); Kinetic.Canvas.call(this, width, height);
}; };

21
src/Group.js
View File

@@ -3,6 +3,27 @@
* Group constructor. Groups are used to contain shapes or other groups. * Group constructor. Groups are used to contain shapes or other groups.
* @constructor * @constructor
* @augments Kinetic.Container * @augments Kinetic.Container
*
*
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
* @param {Number} [config.height]
* @param {Boolean} [config.visible]
* @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name
* @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale]
* @param {Number} [config.scale.x]
* @param {Number} [config.scale.y]
* @param {Number} [config.rotation] rotation in radians
* @param {Number} [config.rotationDeg] rotation in degrees
* @param {Object} [config.offset] offset from center point and rotation point
* @param {Number} [config.offset.x]
* @param {Number} [config.offset.y]
* @param {Boolean} [config.draggable]
* @param {Function} [config.dragBoundFunc]
*/ */
Kinetic.Group = function(config) { Kinetic.Group = function(config) {
this._initGroup(config); this._initGroup(config);

22
src/Layer.js
View File

@@ -7,6 +7,28 @@
* @param {Object} config * @param {Object} config
* @param {Boolean} [config.clearBeforeDraw] set this property to true if you'd like to disable * @param {Boolean} [config.clearBeforeDraw] set this property to true if you'd like to disable
* canvas clearing before each new layer draw * canvas clearing before each new layer draw
*
*
*
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
* @param {Number} [config.height]
* @param {Boolean} [config.visible]
* @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name
* @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale]
* @param {Number} [config.scale.x]
* @param {Number} [config.scale.y]
* @param {Number} [config.rotation] rotation in radians
* @param {Number} [config.rotationDeg] rotation in degrees
* @param {Object} [config.offset] offset from center point and rotation point
* @param {Number} [config.offset.x]
* @param {Number} [config.offset.y]
* @param {Boolean} [config.draggable]
* @param {Function} [config.dragBoundFunc]
*/ */
Kinetic.Layer = function(config) { Kinetic.Layer = function(config) {
this._initLayer(config); this._initLayer(config);

32
src/Shape.js
View File

@@ -5,9 +5,9 @@
* @constructor * @constructor
* @augments Kinetic.Node * @augments Kinetic.Node
* @param {Object} config * @param {Object} config
* ------------------------------------------------- *
* @param {String} [config.fill] fill color * @param {String} [config.fill] fill color
* ------------------------------------------------- *
* @param {Image} [config.fillPatternImage] fill pattern image * @param {Image} [config.fillPatternImage] fill pattern image
* @param {Number} [config.fillPatternX] * @param {Number} [config.fillPatternX]
* @param {Number} [config.fillPatternY] * @param {Number} [config.fillPatternY]
@@ -15,17 +15,17 @@
* @param {Array|Object} [config.fillPatternScale] array with two elements or object with x and y component * @param {Array|Object} [config.fillPatternScale] array with two elements or object with x and y component
* @param {Number} [config.fillPatternRotation] * @param {Number} [config.fillPatternRotation]
* @param {String} [config.fillPatternRepeat] can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'no-repeat' * @param {String} [config.fillPatternRepeat] can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'no-repeat'
* ------------------------------------------------- *
* @param {Array|Object} [config.fillLinearGradientStartPoint] array with two elements or object with x and y component * @param {Array|Object} [config.fillLinearGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillLinearGradientEndPoint] array with two elements or object with x and y component * @param {Array|Object} [config.fillLinearGradientEndPoint] array with two elements or object with x and y component
* @param {Array} [config.fillLinearGradientColorStops] array of color stops * @param {Array} [config.fillLinearGradientColorStops] array of color stops
* ------------------------------------------------- *
* @param {Array|Object} [config.fillRadialGradientStartPoint] array with two elements or object with x and y component * @param {Array|Object} [config.fillRadialGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillRadialGradientEndPoint] array with two elements or object with x and y component * @param {Array|Object} [config.fillRadialGradientEndPoint] array with two elements or object with x and y component
* @param {Number} [config.fillRadialGradientStartRadius] * @param {Number} [config.fillRadialGradientStartRadius]
* @param {Number} [config.fillRadialGradientEndRadius] * @param {Number} [config.fillRadialGradientEndRadius]
* @param {Array} [config.fillRadialGradientColorStops] array of color stops * @param {Array} [config.fillRadialGradientColorStops] array of color stops
* ------------------------------------------------- *
* @param {String} [config.stroke] stroke color * @param {String} [config.stroke] stroke color
* @param {Number} [config.strokeWidth] stroke width * @param {Number} [config.strokeWidth] stroke width
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default * @param {String} [config.lineJoin] can be miter, round, or bevel. The default
@@ -40,6 +40,28 @@
* @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number
* between 0 and 1 * between 0 and 1
* @param {Array} [config.dashArray] * @param {Array} [config.dashArray]
*
*
*
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
* @param {Number} [config.height]
* @param {Boolean} [config.visible]
* @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name
* @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale]
* @param {Number} [config.scale.x]
* @param {Number} [config.scale.y]
* @param {Number} [config.rotation] rotation in radians
* @param {Number} [config.rotationDeg] rotation in degrees
* @param {Object} [config.offset] offset from center point and rotation point
* @param {Number} [config.offset.x]
* @param {Number} [config.offset.y]
* @param {Boolean} [config.draggable]
* @param {Function} [config.dragBoundFunc]
*/ */
Kinetic.Shape = function(config) { Kinetic.Shape = function(config) {
this._initShape(config); this._initShape(config);

21
src/Stage.js
View File

@@ -5,6 +5,27 @@
* @augments Kinetic.Container * @augments Kinetic.Container
* @param {Object} config * @param {Object} config
* @param {String|DomElement} config.container Container id or DOM element * @param {String|DomElement} config.container Container id or DOM element
*
*
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
* @param {Number} [config.height]
* @param {Boolean} [config.visible]
* @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name
* @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale]
* @param {Number} [config.scale.x]
* @param {Number} [config.scale.y]
* @param {Number} [config.rotation] rotation in radians
* @param {Number} [config.rotationDeg] rotation in degrees
* @param {Object} [config.offset] offset from center point and rotation point
* @param {Number} [config.offset.x]
* @param {Number} [config.offset.y]
* @param {Boolean} [config.draggable]
* @param {Function} [config.dragBoundFunc]
*/ */
Kinetic.Stage = function(config) { Kinetic.Stage = function(config) {
this._initStage(config); this._initStage(config);

53
src/shapes/Blob.js
View File

@@ -4,6 +4,59 @@
* a tension * a tension
* @constructor * @constructor
* @augments Kinetic.Spline * @augments Kinetic.Spline
* @param {Object} config
* @param {Array} config.points can be a flattened array of points, or an array of point objects.
* e.g. [0,1,2,3] and [{x:1,y:2},{x:3,y:4}] are equivalent
* @param {Number} [config.tension] default value is 1. Higher values will result in a more curvy line. A value of 0 will result in no interpolation.
* @param {String} [config.fill] fill color
* @param {Image} [config.fillPatternImage] fill pattern image
* @param {Number} [config.fillPatternX]
* @param {Number} [config.fillPatternY]
* @param {Array|Object} [config.fillPatternOffset] array with two elements or object with x and y component
* @param {Array|Object} [config.fillPatternScale] array with two elements or object with x and y component
* @param {Number} [config.fillPatternRotation]
* @param {String} [config.fillPatternRepeat] can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'no-repeat'
* @param {Array|Object} [config.fillLinearGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillLinearGradientEndPoint] array with two elements or object with x and y component
* @param {Array} [config.fillLinearGradientColorStops] array of color stops
* @param {Array|Object} [config.fillRadialGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillRadialGradientEndPoint] array with two elements or object with x and y component
* @param {Number} [config.fillRadialGradientStartRadius]
* @param {Number} [config.fillRadialGradientEndRadius]
* @param {Array} [config.fillRadialGradientColorStops] array of color stops
* @param {String} [config.stroke] stroke color
* @param {Number} [config.strokeWidth] stroke width
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
* is miter
* @param {String} [config.lineCap] can be butt, round, or sqare. The default
* is butt
* @param {String} [config.shadowColor]
* @param {Number} [config.shadowBlur]
* @param {Obect} [config.shadowOffset]
* @param {Number} [config.shadowOffset.x]
* @param {Number} [config.shadowOffset.y]
* @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number
* between 0 and 1
* @param {Array} [config.dashArray]
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
* @param {Number} [config.height]
* @param {Boolean} [config.visible]
* @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name
* @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale]
* @param {Number} [config.scale.x]
* @param {Number} [config.scale.y]
* @param {Number} [config.rotation] rotation in radians
* @param {Number} [config.rotationDeg] rotation in degrees
* @param {Object} [config.offset] offset from center point and rotation point
* @param {Number} [config.offset.x]
* @param {Number} [config.offset.y]
* @param {Boolean} [config.draggable]
* @param {Function} [config.dragBoundFunc]
*/ */
Kinetic.Blob = function(config) { Kinetic.Blob = function(config) {
this._initBlob(config); this._initBlob(config);

52
src/shapes/Circle.js
View File

@@ -5,6 +5,58 @@
* @augments Kinetic.Shape * @augments Kinetic.Shape
* @param {Object} config * @param {Object} config
* @param {Number} config.radius * @param {Number} config.radius
* @param {String} [config.fill] fill color
* @param {Image} [config.fillPatternImage] fill pattern image
* @param {Number} [config.fillPatternX]
* @param {Number} [config.fillPatternY]
* @param {Array|Object} [config.fillPatternOffset] array with two elements or object with x and y component
* @param {Array|Object} [config.fillPatternScale] array with two elements or object with x and y component
* @param {Number} [config.fillPatternRotation]
* @param {String} [config.fillPatternRepeat] can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'no-repeat'
* @param {Array|Object} [config.fillLinearGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillLinearGradientEndPoint] array with two elements or object with x and y component
* @param {Array} [config.fillLinearGradientColorStops] array of color stops
* @param {Array|Object} [config.fillRadialGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillRadialGradientEndPoint] array with two elements or object with x and y component
* @param {Number} [config.fillRadialGradientStartRadius]
* @param {Number} [config.fillRadialGradientEndRadius]
* @param {Array} [config.fillRadialGradientColorStops] array of color stops
* @param {String} [config.stroke] stroke color
* @param {Number} [config.strokeWidth] stroke width
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
* is miter
* @param {String} [config.lineCap] can be butt, round, or sqare. The default
* is butt
* @param {String} [config.shadowColor]
* @param {Number} [config.shadowBlur]
* @param {Obect} [config.shadowOffset]
* @param {Number} [config.shadowOffset.x]
* @param {Number} [config.shadowOffset.y]
* @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number
* between 0 and 1
* @param {Array} [config.dashArray]
*
*
*
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
* @param {Number} [config.height]
* @param {Boolean} [config.visible]
* @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name
* @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale]
* @param {Number} [config.scale.x]
* @param {Number} [config.scale.y]
* @param {Number} [config.rotation] rotation in radians
* @param {Number} [config.rotationDeg] rotation in degrees
* @param {Object} [config.offset] offset from center point and rotation point
* @param {Number} [config.offset.x]
* @param {Number} [config.offset.y]
* @param {Boolean} [config.draggable]
* @param {Function} [config.dragBoundFunc]
*/ */
Kinetic.Circle = function(config) { Kinetic.Circle = function(config) {
this._initCircle(config); this._initCircle(config);

58
src/shapes/Ellipse.js
View File

@@ -5,6 +5,64 @@
* @augments Kinetic.Shape * @augments Kinetic.Shape
* @param {Object} config * @param {Object} config
* @param {Number|Array|Object} config.radius defines x and y radius * @param {Number|Array|Object} config.radius defines x and y radius
*
*
* @param {String} [config.fill] fill color
*
* @param {Image} [config.fillPatternImage] fill pattern image
* @param {Number} [config.fillPatternX]
* @param {Number} [config.fillPatternY]
* @param {Array|Object} [config.fillPatternOffset] array with two elements or object with x and y component
* @param {Array|Object} [config.fillPatternScale] array with two elements or object with x and y component
* @param {Number} [config.fillPatternRotation]
* @param {String} [config.fillPatternRepeat] can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'no-repeat'
*
* @param {Array|Object} [config.fillLinearGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillLinearGradientEndPoint] array with two elements or object with x and y component
* @param {Array} [config.fillLinearGradientColorStops] array of color stops
*
* @param {Array|Object} [config.fillRadialGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillRadialGradientEndPoint] array with two elements or object with x and y component
* @param {Number} [config.fillRadialGradientStartRadius]
* @param {Number} [config.fillRadialGradientEndRadius]
* @param {Array} [config.fillRadialGradientColorStops] array of color stops
*
* @param {String} [config.stroke] stroke color
* @param {Number} [config.strokeWidth] stroke width
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
* is miter
* @param {String} [config.lineCap] can be butt, round, or sqare. The default
* is butt
* @param {String} [config.shadowColor]
* @param {Number} [config.shadowBlur]
* @param {Obect} [config.shadowOffset]
* @param {Number} [config.shadowOffset.x]
* @param {Number} [config.shadowOffset.y]
* @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number
* between 0 and 1
* @param {Array} [config.dashArray]
*
*
*
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
* @param {Number} [config.height]
* @param {Boolean} [config.visible]
* @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name
* @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale]
* @param {Number} [config.scale.x]
* @param {Number} [config.scale.y]
* @param {Number} [config.rotation] rotation in radians
* @param {Number} [config.rotationDeg] rotation in degrees
* @param {Object} [config.offset] offset from center point and rotation point
* @param {Number} [config.offset.x]
* @param {Number} [config.offset.y]
* @param {Boolean} [config.draggable]
* @param {Function} [config.dragBoundFunc]
*/ */
Kinetic.Ellipse = function(config) { Kinetic.Ellipse = function(config) {
this._initEllipse(config); this._initEllipse(config);

58
src/shapes/Image.js
View File

@@ -6,6 +6,64 @@
* @param {Object} config * @param {Object} config
* @param {ImageObject} config.image * @param {ImageObject} config.image
* @param {Object} [config.crop] * @param {Object} [config.crop]
*
*
* @param {String} [config.fill] fill color
*
* @param {Image} [config.fillPatternImage] fill pattern image
* @param {Number} [config.fillPatternX]
* @param {Number} [config.fillPatternY]
* @param {Array|Object} [config.fillPatternOffset] array with two elements or object with x and y component
* @param {Array|Object} [config.fillPatternScale] array with two elements or object with x and y component
* @param {Number} [config.fillPatternRotation]
* @param {String} [config.fillPatternRepeat] can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'no-repeat'
*
* @param {Array|Object} [config.fillLinearGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillLinearGradientEndPoint] array with two elements or object with x and y component
* @param {Array} [config.fillLinearGradientColorStops] array of color stops
*
* @param {Array|Object} [config.fillRadialGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillRadialGradientEndPoint] array with two elements or object with x and y component
* @param {Number} [config.fillRadialGradientStartRadius]
* @param {Number} [config.fillRadialGradientEndRadius]
* @param {Array} [config.fillRadialGradientColorStops] array of color stops
*
* @param {String} [config.stroke] stroke color
* @param {Number} [config.strokeWidth] stroke width
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
* is miter
* @param {String} [config.lineCap] can be butt, round, or sqare. The default
* is butt
* @param {String} [config.shadowColor]
* @param {Number} [config.shadowBlur]
* @param {Obect} [config.shadowOffset]
* @param {Number} [config.shadowOffset.x]
* @param {Number} [config.shadowOffset.y]
* @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number
* between 0 and 1
* @param {Array} [config.dashArray]
*
*
*
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
* @param {Number} [config.height]
* @param {Boolean} [config.visible]
* @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name
* @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale]
* @param {Number} [config.scale.x]
* @param {Number} [config.scale.y]
* @param {Number} [config.rotation] rotation in radians
* @param {Number} [config.rotationDeg] rotation in degrees
* @param {Object} [config.offset] offset from center point and rotation point
* @param {Number} [config.offset.x]
* @param {Number} [config.offset.y]
* @param {Boolean} [config.draggable]
* @param {Function} [config.dragBoundFunc]
*/ */
Kinetic.Image = function(config) { Kinetic.Image = function(config) {
this._initImage(config); this._initImage(config);

58
src/shapes/Line.js
View File

@@ -6,6 +6,64 @@
* @param {Object} config * @param {Object} config
* @param {Array} config.points can be a flattened array of points, or an array of point objects. * @param {Array} config.points can be a flattened array of points, or an array of point objects.
* e.g. [0,1,2,3] and [{x:1,y:2},{x:3,y:4}] are equivalent * e.g. [0,1,2,3] and [{x:1,y:2},{x:3,y:4}] are equivalent
*
*
* @param {String} [config.fill] fill color
*
* @param {Image} [config.fillPatternImage] fill pattern image
* @param {Number} [config.fillPatternX]
* @param {Number} [config.fillPatternY]
* @param {Array|Object} [config.fillPatternOffset] array with two elements or object with x and y component
* @param {Array|Object} [config.fillPatternScale] array with two elements or object with x and y component
* @param {Number} [config.fillPatternRotation]
* @param {String} [config.fillPatternRepeat] can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'no-repeat'
*
* @param {Array|Object} [config.fillLinearGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillLinearGradientEndPoint] array with two elements or object with x and y component
* @param {Array} [config.fillLinearGradientColorStops] array of color stops
*
* @param {Array|Object} [config.fillRadialGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillRadialGradientEndPoint] array with two elements or object with x and y component
* @param {Number} [config.fillRadialGradientStartRadius]
* @param {Number} [config.fillRadialGradientEndRadius]
* @param {Array} [config.fillRadialGradientColorStops] array of color stops
*
* @param {String} [config.stroke] stroke color
* @param {Number} [config.strokeWidth] stroke width
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
* is miter
* @param {String} [config.lineCap] can be butt, round, or sqare. The default
* is butt
* @param {String} [config.shadowColor]
* @param {Number} [config.shadowBlur]
* @param {Obect} [config.shadowOffset]
* @param {Number} [config.shadowOffset.x]
* @param {Number} [config.shadowOffset.y]
* @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number
* between 0 and 1
* @param {Array} [config.dashArray]
*
*
*
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
* @param {Number} [config.height]
* @param {Boolean} [config.visible]
* @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name
* @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale]
* @param {Number} [config.scale.x]
* @param {Number} [config.scale.y]
* @param {Number} [config.rotation] rotation in radians
* @param {Number} [config.rotationDeg] rotation in degrees
* @param {Object} [config.offset] offset from center point and rotation point
* @param {Number} [config.offset.x]
* @param {Number} [config.offset.y]
* @param {Boolean} [config.draggable]
* @param {Function} [config.dragBoundFunc]
*/ */
Kinetic.Line = function(config) { Kinetic.Line = function(config) {
this._initLine(config); this._initLine(config);

58
src/shapes/Path.js
View File

@@ -6,6 +6,64 @@
* @augments Kinetic.Shape * @augments Kinetic.Shape
* @param {Object} config * @param {Object} config
* @param {String} config.data SVG data string * @param {String} config.data SVG data string
*
*
* @param {String} [config.fill] fill color
*
* @param {Image} [config.fillPatternImage] fill pattern image
* @param {Number} [config.fillPatternX]
* @param {Number} [config.fillPatternY]
* @param {Array|Object} [config.fillPatternOffset] array with two elements or object with x and y component
* @param {Array|Object} [config.fillPatternScale] array with two elements or object with x and y component
* @param {Number} [config.fillPatternRotation]
* @param {String} [config.fillPatternRepeat] can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'no-repeat'
*
* @param {Array|Object} [config.fillLinearGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillLinearGradientEndPoint] array with two elements or object with x and y component
* @param {Array} [config.fillLinearGradientColorStops] array of color stops
*
* @param {Array|Object} [config.fillRadialGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillRadialGradientEndPoint] array with two elements or object with x and y component
* @param {Number} [config.fillRadialGradientStartRadius]
* @param {Number} [config.fillRadialGradientEndRadius]
* @param {Array} [config.fillRadialGradientColorStops] array of color stops
*
* @param {String} [config.stroke] stroke color
* @param {Number} [config.strokeWidth] stroke width
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
* is miter
* @param {String} [config.lineCap] can be butt, round, or sqare. The default
* is butt
* @param {String} [config.shadowColor]
* @param {Number} [config.shadowBlur]
* @param {Obect} [config.shadowOffset]
* @param {Number} [config.shadowOffset.x]
* @param {Number} [config.shadowOffset.y]
* @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number
* between 0 and 1
* @param {Array} [config.dashArray]
*
*
*
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
* @param {Number} [config.height]
* @param {Boolean} [config.visible]
* @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name
* @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale]
* @param {Number} [config.scale.x]
* @param {Number} [config.scale.y]
* @param {Number} [config.rotation] rotation in radians
* @param {Number} [config.rotationDeg] rotation in degrees
* @param {Object} [config.offset] offset from center point and rotation point
* @param {Number} [config.offset.x]
* @param {Number} [config.offset.y]
* @param {Boolean} [config.draggable]
* @param {Function} [config.dragBoundFunc]
*/ */
Kinetic.Path = function(config) { Kinetic.Path = function(config) {
this._initPath(config); this._initPath(config);

58
src/shapes/Polygon.js
View File

@@ -6,6 +6,64 @@
* @param {Object} config * @param {Object} config
* @param {Array} config.points can be a flattened array of points, or an array of point objects. * @param {Array} config.points can be a flattened array of points, or an array of point objects.
* e.g. [0,1,2,3] and [{x:1,y:2},{x:3,y:4}] are equivalent * e.g. [0,1,2,3] and [{x:1,y:2},{x:3,y:4}] are equivalent
*
*
* @param {String} [config.fill] fill color
*
* @param {Image} [config.fillPatternImage] fill pattern image
* @param {Number} [config.fillPatternX]
* @param {Number} [config.fillPatternY]
* @param {Array|Object} [config.fillPatternOffset] array with two elements or object with x and y component
* @param {Array|Object} [config.fillPatternScale] array with two elements or object with x and y component
* @param {Number} [config.fillPatternRotation]
* @param {String} [config.fillPatternRepeat] can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'no-repeat'
*
* @param {Array|Object} [config.fillLinearGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillLinearGradientEndPoint] array with two elements or object with x and y component
* @param {Array} [config.fillLinearGradientColorStops] array of color stops
*
* @param {Array|Object} [config.fillRadialGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillRadialGradientEndPoint] array with two elements or object with x and y component
* @param {Number} [config.fillRadialGradientStartRadius]
* @param {Number} [config.fillRadialGradientEndRadius]
* @param {Array} [config.fillRadialGradientColorStops] array of color stops
*
* @param {String} [config.stroke] stroke color
* @param {Number} [config.strokeWidth] stroke width
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
* is miter
* @param {String} [config.lineCap] can be butt, round, or sqare. The default
* is butt
* @param {String} [config.shadowColor]
* @param {Number} [config.shadowBlur]
* @param {Obect} [config.shadowOffset]
* @param {Number} [config.shadowOffset.x]
* @param {Number} [config.shadowOffset.y]
* @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number
* between 0 and 1
* @param {Array} [config.dashArray]
*
*
*
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
* @param {Number} [config.height]
* @param {Boolean} [config.visible]
* @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name
* @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale]
* @param {Number} [config.scale.x]
* @param {Number} [config.scale.y]
* @param {Number} [config.rotation] rotation in radians
* @param {Number} [config.rotationDeg] rotation in degrees
* @param {Object} [config.offset] offset from center point and rotation point
* @param {Number} [config.offset.x]
* @param {Number} [config.offset.y]
* @param {Boolean} [config.draggable]
* @param {Function} [config.dragBoundFunc]
*/ */
Kinetic.Polygon = function(config) { Kinetic.Polygon = function(config) {
this._initPolygon(config); this._initPolygon(config);

56
src/shapes/Rect.js
View File

@@ -4,7 +4,61 @@
* @constructor * @constructor
* @augments Kinetic.Shape * @augments Kinetic.Shape
* @param {Object} config * @param {Object} config
* @param {Number} config.cornerRadius * @param {Number} [config.cornerRadius]
*
* @param {String} [config.fill] fill color
* @param {Image} [config.fillPatternImage] fill pattern image
* @param {Number} [config.fillPatternX]
* @param {Number} [config.fillPatternY]
* @param {Array|Object} [config.fillPatternOffset] array with two elements or object with x and y component
* @param {Array|Object} [config.fillPatternScale] array with two elements or object with x and y component
* @param {Number} [config.fillPatternRotation]
* @param {String} [config.fillPatternRepeat] can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'no-repeat'
* @param {Array|Object} [config.fillLinearGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillLinearGradientEndPoint] array with two elements or object with x and y component
* @param {Array} [config.fillLinearGradientColorStops] array of color stops
* @param {Array|Object} [config.fillRadialGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillRadialGradientEndPoint] array with two elements or object with x and y component
* @param {Number} [config.fillRadialGradientStartRadius]
* @param {Number} [config.fillRadialGradientEndRadius]
* @param {Array} [config.fillRadialGradientColorStops] array of color stops
* @param {String} [config.stroke] stroke color
* @param {Number} [config.strokeWidth] stroke width
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
* is miter
* @param {String} [config.lineCap] can be butt, round, or sqare. The default
* is butt
* @param {String} [config.shadowColor]
* @param {Number} [config.shadowBlur]
* @param {Obect} [config.shadowOffset]
* @param {Number} [config.shadowOffset.x]
* @param {Number} [config.shadowOffset.y]
* @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number
* between 0 and 1
* @param {Array} [config.dashArray]
*
*
*
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
* @param {Number} [config.height]
* @param {Boolean} [config.visible]
* @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name
* @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale]
* @param {Number} [config.scale.x]
* @param {Number} [config.scale.y]
* @param {Number} [config.rotation] rotation in radians
* @param {Number} [config.rotationDeg] rotation in degrees
* @param {Object} [config.offset] offset from center point and rotation point
* @param {Number} [config.offset.x]
* @param {Number} [config.offset.y]
* @param {Boolean} [config.draggable]
* @param {Function} [config.dragBoundFunc]
*/ */
Kinetic.Rect = function(config) { Kinetic.Rect = function(config) {
this._initRect(config); this._initRect(config);

62
src/shapes/RegularPolygon.js
View File

@@ -4,8 +4,66 @@
* @constructor * @constructor
* @augments Kinetic.Shape * @augments Kinetic.Shape
* @param {Object} config * @param {Object} config
* @param {Number} sides * @param {Number} config.sides
* @param {Number} radius * @param {Number} config.radius
*
*
* @param {String} [config.fill] fill color
*
* @param {Image} [config.fillPatternImage] fill pattern image
* @param {Number} [config.fillPatternX]
* @param {Number} [config.fillPatternY]
* @param {Array|Object} [config.fillPatternOffset] array with two elements or object with x and y component
* @param {Array|Object} [config.fillPatternScale] array with two elements or object with x and y component
* @param {Number} [config.fillPatternRotation]
* @param {String} [config.fillPatternRepeat] can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'no-repeat'
*
* @param {Array|Object} [config.fillLinearGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillLinearGradientEndPoint] array with two elements or object with x and y component
* @param {Array} [config.fillLinearGradientColorStops] array of color stops
*
* @param {Array|Object} [config.fillRadialGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillRadialGradientEndPoint] array with two elements or object with x and y component
* @param {Number} [config.fillRadialGradientStartRadius]
* @param {Number} [config.fillRadialGradientEndRadius]
* @param {Array} [config.fillRadialGradientColorStops] array of color stops
*
* @param {String} [config.stroke] stroke color
* @param {Number} [config.strokeWidth] stroke width
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
* is miter
* @param {String} [config.lineCap] can be butt, round, or sqare. The default
* is butt
* @param {String} [config.shadowColor]
* @param {Number} [config.shadowBlur]
* @param {Obect} [config.shadowOffset]
* @param {Number} [config.shadowOffset.x]
* @param {Number} [config.shadowOffset.y]
* @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number
* between 0 and 1
* @param {Array} [config.dashArray]
*
*
*
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
* @param {Number} [config.height]
* @param {Boolean} [config.visible]
* @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name
* @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale]
* @param {Number} [config.scale.x]
* @param {Number} [config.scale.y]
* @param {Number} [config.rotation] rotation in radians
* @param {Number} [config.rotationDeg] rotation in degrees
* @param {Object} [config.offset] offset from center point and rotation point
* @param {Number} [config.offset.x]
* @param {Number} [config.offset.y]
* @param {Boolean} [config.draggable]
* @param {Function} [config.dragBoundFunc]
*/ */
Kinetic.RegularPolygon = function(config) { Kinetic.RegularPolygon = function(config) {
this._initRegularPolygon(config); this._initRegularPolygon(config);

65
src/shapes/Spline.js
View File

@@ -3,10 +3,69 @@
* Spline constructor.  Splines are defined by an array of points and * Spline constructor.  Splines are defined by an array of points and
* a tension * a tension
* @constructor * @constructor
* @augments Kinetic.Shape
* @param {Object} config
* @param {Number} config.tension default value is 1. Higher values will result in a more curvy line. A value of 0 will result in no interpolation.
* @augments Kinetic.Line * @augments Kinetic.Line
* @param {Object} config
* @param {Array} config.points can be a flattened array of points, or an array of point objects.
* e.g. [0,1,2,3] and [{x:1,y:2},{x:3,y:4}] are equivalent
* @param {Number} [config.tension] default value is 1. Higher values will result in a more curvy line. A value of 0 will result in no interpolation.
*
*
* @param {String} [config.fill] fill color
*
* @param {Image} [config.fillPatternImage] fill pattern image
* @param {Number} [config.fillPatternX]
* @param {Number} [config.fillPatternY]
* @param {Array|Object} [config.fillPatternOffset] array with two elements or object with x and y component
* @param {Array|Object} [config.fillPatternScale] array with two elements or object with x and y component
* @param {Number} [config.fillPatternRotation]
* @param {String} [config.fillPatternRepeat] can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'no-repeat'
*
* @param {Array|Object} [config.fillLinearGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillLinearGradientEndPoint] array with two elements or object with x and y component
* @param {Array} [config.fillLinearGradientColorStops] array of color stops
*
* @param {Array|Object} [config.fillRadialGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillRadialGradientEndPoint] array with two elements or object with x and y component
* @param {Number} [config.fillRadialGradientStartRadius]
* @param {Number} [config.fillRadialGradientEndRadius]
* @param {Array} [config.fillRadialGradientColorStops] array of color stops
*
* @param {String} [config.stroke] stroke color
* @param {Number} [config.strokeWidth] stroke width
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
* is miter
* @param {String} [config.lineCap] can be butt, round, or sqare. The default
* is butt
* @param {String} [config.shadowColor]
* @param {Number} [config.shadowBlur]
* @param {Obect} [config.shadowOffset]
* @param {Number} [config.shadowOffset.x]
* @param {Number} [config.shadowOffset.y]
* @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number
* between 0 and 1
* @param {Array} [config.dashArray]
*
*
*
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
* @param {Number} [config.height]
* @param {Boolean} [config.visible]
* @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name
* @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale]
* @param {Number} [config.scale.x]
* @param {Number} [config.scale.y]
* @param {Number} [config.rotation] rotation in radians
* @param {Number} [config.rotationDeg] rotation in degrees
* @param {Object} [config.offset] offset from center point and rotation point
* @param {Number} [config.offset.x]
* @param {Number} [config.offset.y]
* @param {Boolean} [config.draggable]
* @param {Function} [config.dragBoundFunc]
*/ */
Kinetic.Spline = function(config) { Kinetic.Spline = function(config) {
this._initSpline(config); this._initSpline(config);

60
src/shapes/Sprite.js
View File

@@ -6,7 +6,65 @@
* @param {Object} config * @param {Object} config
* @param {String} config.animation animation key * @param {String} config.animation animation key
* @param {Object} config.animations animation map * @param {Object} config.animations animation map
* @param {Integer} config.index animation index * @param {Integer} [config.index] animation index
*
*
* @param {String} [config.fill] fill color
*
* @param {Image} [config.fillPatternImage] fill pattern image
* @param {Number} [config.fillPatternX]
* @param {Number} [config.fillPatternY]
* @param {Array|Object} [config.fillPatternOffset] array with two elements or object with x and y component
* @param {Array|Object} [config.fillPatternScale] array with two elements or object with x and y component
* @param {Number} [config.fillPatternRotation]
* @param {String} [config.fillPatternRepeat] can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'no-repeat'
*
* @param {Array|Object} [config.fillLinearGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillLinearGradientEndPoint] array with two elements or object with x and y component
* @param {Array} [config.fillLinearGradientColorStops] array of color stops
*
* @param {Array|Object} [config.fillRadialGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillRadialGradientEndPoint] array with two elements or object with x and y component
* @param {Number} [config.fillRadialGradientStartRadius]
* @param {Number} [config.fillRadialGradientEndRadius]
* @param {Array} [config.fillRadialGradientColorStops] array of color stops
*
* @param {String} [config.stroke] stroke color
* @param {Number} [config.strokeWidth] stroke width
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
* is miter
* @param {String} [config.lineCap] can be butt, round, or sqare. The default
* is butt
* @param {String} [config.shadowColor]
* @param {Number} [config.shadowBlur]
* @param {Obect} [config.shadowOffset]
* @param {Number} [config.shadowOffset.x]
* @param {Number} [config.shadowOffset.y]
* @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number
* between 0 and 1
* @param {Array} [config.dashArray]
*
*
*
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
* @param {Number} [config.height]
* @param {Boolean} [config.visible]
* @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name
* @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale]
* @param {Number} [config.scale.x]
* @param {Number} [config.scale.y]
* @param {Number} [config.rotation] rotation in radians
* @param {Number} [config.rotationDeg] rotation in degrees
* @param {Object} [config.offset] offset from center point and rotation point
* @param {Number} [config.offset.x]
* @param {Number} [config.offset.y]
* @param {Boolean} [config.draggable]
* @param {Function} [config.dragBoundFunc]
*/ */
Kinetic.Sprite = function(config) { Kinetic.Sprite = function(config) {
this._initSprite(config); this._initSprite(config);

58
src/shapes/Star.js
View File

@@ -7,6 +7,64 @@
* @param {Integer} config.numPoints * @param {Integer} config.numPoints
* @param {Number} config.innerRadius * @param {Number} config.innerRadius
* @param {Number} config.outerRadius * @param {Number} config.outerRadius
*
*
* @param {String} [config.fill] fill color
*
* @param {Image} [config.fillPatternImage] fill pattern image
* @param {Number} [config.fillPatternX]
* @param {Number} [config.fillPatternY]
* @param {Array|Object} [config.fillPatternOffset] array with two elements or object with x and y component
* @param {Array|Object} [config.fillPatternScale] array with two elements or object with x and y component
* @param {Number} [config.fillPatternRotation]
* @param {String} [config.fillPatternRepeat] can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'no-repeat'
*
* @param {Array|Object} [config.fillLinearGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillLinearGradientEndPoint] array with two elements or object with x and y component
* @param {Array} [config.fillLinearGradientColorStops] array of color stops
*
* @param {Array|Object} [config.fillRadialGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillRadialGradientEndPoint] array with two elements or object with x and y component
* @param {Number} [config.fillRadialGradientStartRadius]
* @param {Number} [config.fillRadialGradientEndRadius]
* @param {Array} [config.fillRadialGradientColorStops] array of color stops
*
* @param {String} [config.stroke] stroke color
* @param {Number} [config.strokeWidth] stroke width
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
* is miter
* @param {String} [config.lineCap] can be butt, round, or sqare. The default
* is butt
* @param {String} [config.shadowColor]
* @param {Number} [config.shadowBlur]
* @param {Obect} [config.shadowOffset]
* @param {Number} [config.shadowOffset.x]
* @param {Number} [config.shadowOffset.y]
* @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number
* between 0 and 1
* @param {Array} [config.dashArray]
*
*
*
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
* @param {Number} [config.height]
* @param {Boolean} [config.visible]
* @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name
* @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale]
* @param {Number} [config.scale.x]
* @param {Number} [config.scale.y]
* @param {Number} [config.rotation] rotation in radians
* @param {Number} [config.rotationDeg] rotation in degrees
* @param {Object} [config.offset] offset from center point and rotation point
* @param {Number} [config.offset.x]
* @param {Number} [config.offset.y]
* @param {Boolean} [config.draggable]
* @param {Function} [config.dragBoundFunc]
*/ */
Kinetic.Star = function(config) { Kinetic.Star = function(config) {
this._initStar(config); this._initStar(config);

77
src/shapes/Text.js
View File

@@ -4,18 +4,73 @@
* @constructor * @constructor
* @augments Kinetic.Shape * @augments Kinetic.Shape
* @param {Object} config * @param {Object} config
* @param {String} config.textFill * @param {String} [config.fontFamily] default is Calibri
* @param {String} config.textStroke * @param {Number} [config.fontSize] in pixels. Default is 12
* @param {Number} config.textStrokeWidth * @param {String} [config.fontStyle] can be normal, bold, or italic. Default is normal
* @param {String} config.fontFamily default is Calibri
* @param {Number} config.fontSize in pixels. Default is 12
* @param {String} config.fontStyle can be normal, bold, or italic. Default is normal
* @param {String} config.text * @param {String} config.text
* @param {String} config.align can be left, center, or right * @param {String} [config.align] can be left, center, or right
* @param {Number} config.padding * @param {Number} [config.padding]
* @param {Number} config.width default is auto * @param {Number} [config.width] default is auto
* @param {Number} config.height default is auto * @param {Number} [config.height] default is auto
* @param {Number} config.lineHeight default is 1 * @param {Number} [config.lineHeight] default is 1
*
*
* @param {String} [config.fill] fill color
*
* @param {Image} [config.fillPatternImage] fill pattern image
* @param {Number} [config.fillPatternX]
* @param {Number} [config.fillPatternY]
* @param {Array|Object} [config.fillPatternOffset] array with two elements or object with x and y component
* @param {Array|Object} [config.fillPatternScale] array with two elements or object with x and y component
* @param {Number} [config.fillPatternRotation]
* @param {String} [config.fillPatternRepeat] can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'no-repeat'
*
* @param {Array|Object} [config.fillLinearGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillLinearGradientEndPoint] array with two elements or object with x and y component
* @param {Array} [config.fillLinearGradientColorStops] array of color stops
*
* @param {Array|Object} [config.fillRadialGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillRadialGradientEndPoint] array with two elements or object with x and y component
* @param {Number} [config.fillRadialGradientStartRadius]
* @param {Number} [config.fillRadialGradientEndRadius]
* @param {Array} [config.fillRadialGradientColorStops] array of color stops
*
* @param {String} [config.stroke] stroke color
* @param {Number} [config.strokeWidth] stroke width
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
* is miter
* @param {String} [config.lineCap] can be butt, round, or sqare. The default
* is butt
* @param {String} [config.shadowColor]
* @param {Number} [config.shadowBlur]
* @param {Obect} [config.shadowOffset]
* @param {Number} [config.shadowOffset.x]
* @param {Number} [config.shadowOffset.y]
* @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number
* between 0 and 1
* @param {Array} [config.dashArray]
*
*
*
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
* @param {Number} [config.height]
* @param {Boolean} [config.visible]
* @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name
* @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale]
* @param {Number} [config.scale.x]
* @param {Number} [config.scale.y]
* @param {Number} [config.rotation] rotation in radians
* @param {Number} [config.rotationDeg] rotation in degrees
* @param {Object} [config.offset] offset from center point and rotation point
* @param {Number} [config.offset.x]
* @param {Number} [config.offset.y]
* @param {Boolean} [config.draggable]
* @param {Function} [config.dragBoundFunc]
*/ */
Kinetic.Text = function(config) { Kinetic.Text = function(config) {
this._initText(config); this._initText(config);

64
src/shapes/TextPath.js
View File

@@ -5,10 +5,68 @@
* @constructor * @constructor
* @augments Kinetic.Shape * @augments Kinetic.Shape
* @param {Object} config * @param {Object} config
* @param {String} config.fontFamily default is Calibri * @param {String} [config.fontFamily] default is Calibri
* @param {Number} config.fontSize default is 12 * @param {Number} [config.fontSize] default is 12
* @param {String} config.fontStyle can be normal, bold, or italic. Default is normal * @param {String} [config.fontStyle] can be normal, bold, or italic. Default is normal
* @param {String} config.text * @param {String} config.text
*
*
* @param {String} [config.fill] fill color
*
* @param {Image} [config.fillPatternImage] fill pattern image
* @param {Number} [config.fillPatternX]
* @param {Number} [config.fillPatternY]
* @param {Array|Object} [config.fillPatternOffset] array with two elements or object with x and y component
* @param {Array|Object} [config.fillPatternScale] array with two elements or object with x and y component
* @param {Number} [config.fillPatternRotation]
* @param {String} [config.fillPatternRepeat] can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'no-repeat'
*
* @param {Array|Object} [config.fillLinearGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillLinearGradientEndPoint] array with two elements or object with x and y component
* @param {Array} [config.fillLinearGradientColorStops] array of color stops
*
* @param {Array|Object} [config.fillRadialGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillRadialGradientEndPoint] array with two elements or object with x and y component
* @param {Number} [config.fillRadialGradientStartRadius]
* @param {Number} [config.fillRadialGradientEndRadius]
* @param {Array} [config.fillRadialGradientColorStops] array of color stops
*
* @param {String} [config.stroke] stroke color
* @param {Number} [config.strokeWidth] stroke width
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
* is miter
* @param {String} [config.lineCap] can be butt, round, or sqare. The default
* is butt
* @param {String} [config.shadowColor]
* @param {Number} [config.shadowBlur]
* @param {Obect} [config.shadowOffset]
* @param {Number} [config.shadowOffset.x]
* @param {Number} [config.shadowOffset.y]
* @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number
* between 0 and 1
* @param {Array} [config.dashArray]
*
*
*
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
* @param {Number} [config.height]
* @param {Boolean} [config.visible]
* @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name
* @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale]
* @param {Number} [config.scale.x]
* @param {Number} [config.scale.y]
* @param {Number} [config.rotation] rotation in radians
* @param {Number} [config.rotationDeg] rotation in degrees
* @param {Object} [config.offset] offset from center point and rotation point
* @param {Number} [config.offset.x]
* @param {Number} [config.offset.y]
* @param {Boolean} [config.draggable]
* @param {Function} [config.dragBoundFunc]
*/ */
Kinetic.TextPath = function(config) { Kinetic.TextPath = function(config) {
this._initTextPath(config); this._initTextPath(config);

60
src/shapes/Wedge.js
View File

@@ -6,7 +6,65 @@
* @param {Object} config * @param {Object} config
* @param {Number} config.angle * @param {Number} config.angle
* @param {Number} config.radius * @param {Number} config.radius
* @param {Boolean} config.clockwise * @param {Boolean} [config.clockwise]
*
* -------------------------------------------------
* @param {String} [config.fill] fill color
* -------------------------------------------------
* @param {Image} [config.fillPatternImage] fill pattern image
* @param {Number} [config.fillPatternX]
* @param {Number} [config.fillPatternY]
* @param {Array|Object} [config.fillPatternOffset] array with two elements or object with x and y component
* @param {Array|Object} [config.fillPatternScale] array with two elements or object with x and y component
* @param {Number} [config.fillPatternRotation]
* @param {String} [config.fillPatternRepeat] can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'no-repeat'
* -------------------------------------------------
* @param {Array|Object} [config.fillLinearGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillLinearGradientEndPoint] array with two elements or object with x and y component
* @param {Array} [config.fillLinearGradientColorStops] array of color stops
* -------------------------------------------------
* @param {Array|Object} [config.fillRadialGradientStartPoint] array with two elements or object with x and y component
* @param {Array|Object} [config.fillRadialGradientEndPoint] array with two elements or object with x and y component
* @param {Number} [config.fillRadialGradientStartRadius]
* @param {Number} [config.fillRadialGradientEndRadius]
* @param {Array} [config.fillRadialGradientColorStops] array of color stops
* -------------------------------------------------
* @param {String} [config.stroke] stroke color
* @param {Number} [config.strokeWidth] stroke width
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
* is miter
* @param {String} [config.lineCap] can be butt, round, or sqare. The default
* is butt
* @param {String} [config.shadowColor]
* @param {Number} [config.shadowBlur]
* @param {Obect} [config.shadowOffset]
* @param {Number} [config.shadowOffset.x]
* @param {Number} [config.shadowOffset.y]
* @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number
* between 0 and 1
* @param {Array} [config.dashArray]
*
*
*
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
* @param {Number} [config.height]
* @param {Boolean} [config.visible]
* @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name
* @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale]
* @param {Number} [config.scale.x]
* @param {Number} [config.scale.y]
* @param {Number} [config.rotation] rotation in radians
* @param {Number} [config.rotationDeg] rotation in degrees
* @param {Object} [config.offset] offset from center point and rotation point
* @param {Number} [config.offset.x]
* @param {Number} [config.offset.y]
* @param {Boolean} [config.draggable]
* @param {Function} [config.dragBoundFunc]
*/ */
Kinetic.Wedge = function(config) { Kinetic.Wedge = function(config) {
this._initWedge(config); this._initWedge(config);