diff --git a/src/Node.js b/src/Node.js index faff4b37..f58ed54f 100644 --- a/src/Node.js +++ b/src/Node.js @@ -800,16 +800,18 @@ } }, /** - * clone node. Returns a new Node instance with identical attributes + * clone node. Returns a new Node instance with identical attributes. You can also override + * the node properties with an object literal, enabling you to use an existing node as a template + * for another node * @method * @memberof Kinetic.Node.prototype * @param {Object} attrs override attrs * @example - * // clone a rectangle
- * var rectClone = rect.clone();

+ * // simple clone
+ * var clone = node.clone();

* - * // clone a rectangle, but override the x position
- * var rectClone = rect.clone({
+ * // clone a node and override the x position
+ * var clone = rect.clone({
* x: 5
* }); */ diff --git a/src/Shape.js b/src/Shape.js index 94bdcd0e..bb607532 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -75,9 +75,9 @@ }, /** * determines if point is in the shape, regardless if other shapes are on top of it. Note: because - * this method clears a temp hit canvas, and redraws the shape, it performs very poorly if executed many times - * consecutively. Please use the {@link Kinetic.Stage#getIntersection} method if at all possible - * because it performs much better + * this method clears a temporary canvas and then redraws the shape, it performs very poorly if executed many times + * consecutively. Please use the {@link Kinetic.Stage#getIntersection} method if at all possible + * because it performs much better * @method * @memberof Kinetic.Shape.prototype * @param {Object} point point can be an object containing diff --git a/src/Stage.js b/src/Stage.js index 05d3b6b3..be3790ec 100644 --- a/src/Stage.js +++ b/src/Stage.js @@ -253,7 +253,7 @@ }, /** * get visible intersection object that contains shape and pixel data. This is the preferred - * method for determining if a point intersects a shape or not + * method for determining if a point intersects a shape or not * @method * @memberof Kinetic.Stage.prototype * @param {Object} pos point object diff --git a/src/shapes/Circle.js b/src/shapes/Circle.js index 44861f76..bc8d2351 100644 --- a/src/shapes/Circle.js +++ b/src/shapes/Circle.js @@ -11,7 +11,7 @@ * @example * // create simple circle * var circle = new Kinetic.Circle({
- * radius: 5,
+ * radius: 40,
* fill: 'red',
* stroke: 'black'
* strokeWidth: 5
diff --git a/src/shapes/Line.js b/src/shapes/Line.js index 168e27dc..db552c7e 100644 --- a/src/shapes/Line.js +++ b/src/shapes/Line.js @@ -9,6 +9,27 @@ * e.g. [0,1,2,3], [[0,1],[2,3]] and [{x:0,y:1},{x:2,y:3}] are equivalent * {{ShapeParams}} * {{NodeParams}} + * @example + * // simple line + * var line = new Kinetic.Line({
+ * x: 100,
+ * y: 50,
+ * points: [73, 70, 340, 23, 450, 60, 500, 20],
+ * stroke: 'red'
+ * });

+ * + * // dashed line with shadow
+ * var line = new Kinetic.Line({
+ * x: 100,
+ * y: 50,
+ * points: [73, 70, 340, 23, 450, 60, 500, 20],
+ * stroke: 'red',
+ * dashArray: [33, 10],
+ * shadowColor: 'black',
+ * shadowBlur: 10,
+ * shadowOffset: 10,
+ * shadowOpacity: 0.5
+ * }); */ Kinetic.Line = function(config) { this._initLine(config); diff --git a/src/shapes/Polygon.js b/src/shapes/Polygon.js index 1510c970..d5efb186 100644 --- a/src/shapes/Polygon.js +++ b/src/shapes/Polygon.js @@ -9,6 +9,13 @@ * e.g. [0,1,2,3], [[0,1],[2,3]] and [{x:0,y:1},{x:2,y:3}] are equivalent * {{ShapeParams}} * {{NodeParams}} + * @example + * var polygon = new Kinetic.Polygon({
+ * points: [73, 192, 73, 160, 340, 23, 500, 109, 499, 139, 342, 93],
+ * fill: '#00D2FF',
+ * stroke: 'black',
+ * strokeWidth: 5
+ * }); */ Kinetic.Polygon = function(config) { this._initPolygon(config); diff --git a/src/shapes/Spline.js b/src/shapes/Spline.js index af895ba3..88abe751 100644 --- a/src/shapes/Spline.js +++ b/src/shapes/Spline.js @@ -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 spline = new Kinetic.Spline({
+ * x: 100,
+ * y: 50,
+ * points: [73, 70, 340, 23, 450, 60, 500, 20],
+ * stroke: 'red',
+ * tension: 1
+ * }); */ Kinetic.Spline = function(config) { this._initSpline(config); diff --git a/src/shapes/Text.js b/src/shapes/Text.js index fd9d762f..38a52832 100644 --- a/src/shapes/Text.js +++ b/src/shapes/Text.js @@ -45,6 +45,15 @@ * @param {String} [config.wrap] can be word, char, or none. Default is word * {{ShapeParams}} * {{NodeParams}} + * @example + * var text = new Kinetic.Text({
+ * x: stage.getWidth() / 2,
+ * y: 15,
+ * text: 'Simple Text',
+ * fontSize: 30,
+ * fontFamily: 'Calibri',
+ * fill: 'green'
+ * }); */ Kinetic.Text = function(config) { this._initText(config); diff --git a/src/shapes/Wedge.js b/src/shapes/Wedge.js index 8aa551ab..13b2692c 100644 --- a/src/shapes/Wedge.js +++ b/src/shapes/Wedge.js @@ -10,6 +10,16 @@ * @param {Boolean} [config.clockwise] * {{ShapeParams}} * {{NodeParams}} + * @example + * // draw a wedge that's pointing downwards
+ * var wedge = new Kinetic.Wedge({
+ * radius: 40,
+ * fill: 'red',
+ * stroke: 'black'
+ * strokeWidth: 5,
+ * angleDeg: 60,
+ * rotationDeg: -120
+ * }); */ Kinetic.Wedge = function(config) { this._initWedge(config);