added lots of constructor example docs

This commit is contained in:
Eric Rowell
2013-05-17 15:09:57 -07:00
parent 47364c63cd
commit 7c03f56ae9
6 changed files with 75 additions and 3 deletions

View File

@@ -60,6 +60,22 @@ var Kinetic = {};
* @param {Object} config
* {{ShapeParams}}
* {{NodeParams}}
* @example
* var customShape = new Kinetic.Shape({<br>
* x: 5,<br>
* y: 10,<br>
* fill: 'red',<br>
* // a Kinetic.Canvas renderer is passed into the drawFunc function<br>
* drawFunc: function(canvas) {<br>
* var context = canvas.getContext();<br>
* context.beginPath();<br>
* context.moveTo(200, 50);<br>
* context.lineTo(420, 80);<br>
* context.quadraticCurveTo(300, 100, 260, 170);<br>
* context.closePath();<br>
* canvas.fillStroke(this);<br>
* }
*});
*/
Kinetic.Shape = function(config) {
this._initShape(config);
@@ -88,6 +104,12 @@ var Kinetic = {};
* @param {String|DomElement} config.container Container id or DOM element
* {{NodeParams}}
* {{ContainerParams}}
* @example
* var stage = new Kinetic.Stage({<br>
* width: 500,<br>
* height: 800,<br>
* container: 'containerId'<br>
* });
*/
Kinetic.Stage = function(config) {
this._initStage(config);
@@ -104,6 +126,8 @@ var Kinetic = {};
* to clear the canvas before each layer draw. The default value is true.
* {{NodeParams}}
* {{ContainerParams}}
* @example
* var layer = new Kinetic.Layer();
*/
Kinetic.Layer = function(config) {
this._initLayer(config);
@@ -117,6 +141,8 @@ var Kinetic = {};
* @param {Object} config
* {{NodeParams}}
* {{ContainerParams}}
* @example
* var group = new Kinetic.Group();
*/
Kinetic.Group = function(config) {
this._initGroup(config);

View File

@@ -494,7 +494,7 @@
* // move node in x direction by 1px<br>
* node.move({<br>
* x: 1<br>
* })
* });
*/
move: function() {
var pos = Kinetic.Util._getXY([].slice.call(arguments)),
@@ -721,7 +721,7 @@
* // fire custom event with custom event object<br>
* node.fire('foo', {<br>
* bar: 10<br>
* });<br>
* });<br><br>
*
* // fire click event that doesn't bubble<br>
* node.fire('click', null, false);
@@ -908,7 +908,7 @@
* callback: function(img) {<br>
* // do stuff with img<br>
* }<br>
* })
* });
*/
toImage: function(config) {
Kinetic.Util._getImage(this.toDataURL(config), function(img) {

View File

@@ -11,6 +11,14 @@
* @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.
* {{ShapeParams}}
* {{NodeParams}}
* @example
* var blob = new Kinetic.Blob({<br>
* points: [73, 140, 340, 23, 500, 109, 300, 170],<br>
* tension: 0.8,<br>
* fill: 'red',<br>
* stroke: 'black'<br>
* strokeWidth: 5
* });
*/
Kinetic.Blob = function(config) {
this._initBlob(config);

View File

@@ -8,6 +8,24 @@
* @param {Number} config.radius
* {{ShapeParams}}
* {{NodeParams}}
* @example
* // create simple circle
* var circle = new Kinetic.Circle({<br>
* radius: 5,<br>
* fill: 'red',<br>
* stroke: 'black'<br>
* strokeWidth: 5
* });
*
* // create ellipse
* var circle = new Kinetic.Circle({<br>
* radius: 5,<br>
* fill: 'red',<br>
* stroke: 'black'<br>
* strokeWidth: 5,<br>
* scaleX: 2,<br>
* strokeScaleEnabled: false
* });
*/
Kinetic.Circle = function(config) {
this._initCircle(config);

View File

@@ -14,6 +14,18 @@
* @param {Object} [config.crop]
* {{ShapeParams}}
* {{NodeParams}}
* @example
* var imageObj = new Image();<br>
* imageObj.onload = function() {<br>
* var image = new Kinetic.Image({<br>
* x: 200,<br>
* y: 50,<br>
* image: imageObj,<br>
* width: 100,<br>
* height: 100<br>
* });<br>
* };<br>
* imageObj.src = '/path/to/image.jpg'
*/
Kinetic.Image = function(config) {
this._initImage(config);

View File

@@ -8,6 +8,14 @@
* @param {Number} [config.cornerRadius]
* {{ShapeParams}}
* {{NodeParams}}
* @example
* var rect = new Kinetic.Rect({<br>
* width: 100,<br>
* height: 50,<br>
* fill: 'red',<br>
* stroke: 'black'<br>
* strokeWidth: 5
* });
*/
Kinetic.Rect = function(config) {
this._initRect(config);