From 4d682529b6743779a32ffe44d55e8547f6bc7a86 Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Fri, 17 May 2013 15:35:21 -0700 Subject: [PATCH] added more example docs --- src/Node.js | 4 ++-- src/shapes/Blob.js | 2 +- src/shapes/Circle.js | 8 +++---- src/shapes/Rect.js | 2 +- src/shapes/Sprite.js | 56 +++++++++++++++++++++++++++++++++++++++++++- 5 files changed, 63 insertions(+), 9 deletions(-) diff --git a/src/Node.js b/src/Node.js index a3877a30..faff4b37 100644 --- a/src/Node.js +++ b/src/Node.js @@ -118,7 +118,7 @@ * // remove listener
* node.off('click');

* - * // remove multiple listener
+ * // remove multiple listeners
* node.off('click touchstart');

* * // remove listener by name
@@ -414,7 +414,7 @@ * // set x only
* node.setPosition({
* x: 5
- * });
+ * });

* * // set x and y using an array
* node.setPosition([5, 10]);

diff --git a/src/shapes/Blob.js b/src/shapes/Blob.js index 2c82a08d..595458ef 100644 --- a/src/shapes/Blob.js +++ b/src/shapes/Blob.js @@ -17,7 +17,7 @@ * tension: 0.8,
* fill: 'red',
* stroke: 'black'
- * strokeWidth: 5 + * strokeWidth: 5
* }); */ Kinetic.Blob = function(config) { diff --git a/src/shapes/Circle.js b/src/shapes/Circle.js index 36a018cb..44861f76 100644 --- a/src/shapes/Circle.js +++ b/src/shapes/Circle.js @@ -14,17 +14,17 @@ * radius: 5,
* fill: 'red',
* stroke: 'black'
- * strokeWidth: 5 - * }); + * strokeWidth: 5
+ * });

* - * // create ellipse + * // create ellipse
* var circle = new Kinetic.Circle({
* radius: 5,
* fill: 'red',
* stroke: 'black'
* strokeWidth: 5,
* scaleX: 2,
- * strokeScaleEnabled: false + * strokeScaleEnabled: false
* }); */ Kinetic.Circle = function(config) { diff --git a/src/shapes/Rect.js b/src/shapes/Rect.js index be19004b..ebcfdcf2 100644 --- a/src/shapes/Rect.js +++ b/src/shapes/Rect.js @@ -14,7 +14,7 @@ * height: 50,
* fill: 'red',
* stroke: 'black'
- * strokeWidth: 5 + * strokeWidth: 5
* }); */ Kinetic.Rect = function(config) { diff --git a/src/shapes/Sprite.js b/src/shapes/Sprite.js index bb9ffda4..2b3168c0 100644 --- a/src/shapes/Sprite.js +++ b/src/shapes/Sprite.js @@ -8,9 +8,63 @@ * @param {String} config.animation animation key * @param {Object} config.animations animation map * @param {Integer} [config.index] animation index - * @param {Image} image image object + * @param {Image} config.image image object * {{ShapeParams}} * {{NodeParams}} + * @example + * var animations = {
+ * idle: [{
+ * x: 2,
+ * y: 2,
+ * width: 70,
+ * height: 119
+ * }, {
+ * x: 71,
+ * y: 2,
+ * width: 74,
+ * height: 119
+ * }, {
+ * x: 146,
+ * y: 2,
+ * width: 81,
+ * height: 119
+ * }, {
+ * x: 226,
+ * y: 2,
+ * width: 76,
+ * height: 119
+ * }],
+ * punch: [{
+ * x: 2,
+ * y: 138,
+ * width: 74,
+ * height: 122
+ * }, {
+ * x: 76,
+ * y: 138,
+ * width: 84,
+ * height: 122
+ * }, {
+ * x: 346,
+ * y: 138,
+ * width: 120,
+ * height: 122
+ * }]
+ * };

+ * + * var imageObj = new Image();
+ * imageObj.onload = function() {
+ * var sprite = new Kinetic.Sprite({
+ * x: 200,
+ * y: 100,
+ * image: imageObj,
+ * animation: 'idle',
+ * animations: animations,
+ * frameRate: 7,
+ * index: 0
+ * });
+ * };
+ * imageObj.src = '/path/to/image.jpg' */ Kinetic.Sprite = function(config) { this._initSprite(config);