From 31ad5fca88472d8b38d1631c7282b52630278db1 Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Wed, 2 Jan 2013 21:35:51 -0800 Subject: [PATCH] updated docs --- src/Layer.js | 17 --- src/Node.js | 224 +++++++++++++-------------- src/Shape.js | 286 +++++++++++++++++++++++++++++------ src/Stage.js | 2 - src/shapes/Ellipse.js | 33 ++-- src/shapes/RegularPolygon.js | 1 + src/shapes/Text.js | 1 - 7 files changed, 368 insertions(+), 196 deletions(-) diff --git a/src/Layer.js b/src/Layer.js index b379e89a..721814f2 100644 --- a/src/Layer.js +++ b/src/Layer.js @@ -7,23 +7,6 @@ * @param {Object} config * @param {Boolean} [config.clearBeforeDraw] set this property to true if you'd like to disable * canvas clearing before each new layer draw - * @param {Number} [config.x] - * @param {Number} [config.y] - * @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] offsets default position point and rotation point - * @param {Number} [config.offset.x] - * @param {Number} [config.offset.y] - * @param {Boolean} [config.draggable] - * @param {Function} [config.dragBoundFunc] dragBoundFunc(pos, evt) should return new position */ Kinetic.Layer = function(config) { this._initLayer(config); diff --git a/src/Node.js b/src/Node.js index 4aec15de..94beffef 100644 --- a/src/Node.js +++ b/src/Node.js @@ -1082,38 +1082,6 @@ }; // add getters setters Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'opacity', 'name', 'id']); - Kinetic.Node.addRotationGettersSetters(Kinetic.Node, ['rotation']); - Kinetic.Node.addPointGettersSetters(Kinetic.Node, ['scale', 'offset']); - Kinetic.Node.addSetters(Kinetic.Node, ['width', 'height', 'listening', 'visible']); - - - // aliases - /** - * Alias of getListening() - * @name isListening - * @methodOf Kinetic.Node.prototype - */ - Kinetic.Node.prototype.isListening = Kinetic.Node.prototype.getListening; - /** - * Alias of getVisible() - * @name isVisible - * @methodOf Kinetic.Node.prototype - */ - Kinetic.Node.prototype.isVisible = Kinetic.Node.prototype.getVisible; - - // collection mappings - var collectionMappings = ['on', 'off']; - for(var n = 0; n < 2; n++) { - // induce scope - (function(i) { - var method = collectionMappings[i]; - Kinetic.Collection.prototype[method] = function() { - var args = [].slice.call(arguments); - args.unshift(method); - this.apply.apply(this, args); - }; - })(n); - } /** * set x position @@ -1129,13 +1097,6 @@ * @param {Number} y */ - /** - * set rotation in radians - * @name setRotation - * @methodOf Kinetic.Node.prototype - * @param {Number} theta - */ - /** * set opacity. Opacity values range from 0 to 1. * A node with an opacity of 0 is fully transparent, and a node @@ -1159,6 +1120,96 @@ * @param {String} id */ + /** + * get x position + * @name getX + * @methodOf Kinetic.Node.prototype + */ + + /** + * get y position + * @name getY + * @methodOf Kinetic.Node.prototype + */ + + /** + * get opacity. + * @name getOpacity + * @methodOf Kinetic.Node.prototype + */ + + /** + * get name + * @name getName + * @methodOf Kinetic.Node.prototype + */ + + /** + * get id + * @name getId + * @methodOf Kinetic.Node.prototype + */ + + Kinetic.Node.addRotationGettersSetters(Kinetic.Node, ['rotation']); + + /** + * set rotation in radians + * @name setRotation + * @methodOf Kinetic.Node.prototype + * @param {Number} theta + */ + + /** + * set rotation in degrees + * @name setRotationDeg + * @methodOf Kinetic.Node.prototype + * @param {Number} deg + */ + + /** + * get rotation in degrees + * @name getRotationDeg + * @methodOf Kinetic.Node.prototype + */ + + /** + * get rotation in radians + * @name getRotation + * @methodOf Kinetic.Node.prototype + */ + + Kinetic.Node.addPointGettersSetters(Kinetic.Node, ['scale', 'offset']); + + /** + * set scale + * @name setScale + * @param {Number} x + * @param {Number} y + * @methodOf Kinetic.Node.prototype + */ + + /** + * set offset. A node's offset defines the position and rotation point + * @name setOffset + * @methodOf Kinetic.Node.prototype + * @param {Number} x + * @param {Number} y + */ + + /** + * get scale + * @name getScale + * @methodOf Kinetic.Node.prototype + */ + + /** + * get offset + * @name getOffset + * @methodOf Kinetic.Node.prototype + */ + + Kinetic.Node.addSetters(Kinetic.Node, ['width', 'height', 'listening', 'visible']); + /** * set width * @name setWidth @@ -1187,80 +1238,31 @@ * @param {Boolean} visible */ + // aliases /** - * get x position - * @name getX + * Alias of getListening() + * @name isListening * @methodOf Kinetic.Node.prototype */ + Kinetic.Node.prototype.isListening = Kinetic.Node.prototype.getListening; + /** + * Alias of getVisible() + * @name isVisible + * @methodOf Kinetic.Node.prototype + */ + Kinetic.Node.prototype.isVisible = Kinetic.Node.prototype.getVisible; - /** - * get y position - * @name getY - * @methodOf Kinetic.Node.prototype - */ - - /** - * get rotation in radians - * @name getRotation - * @methodOf Kinetic.Node.prototype - */ - - /** - * get opacity. - * @name getOpacity - * @methodOf Kinetic.Node.prototype - */ - - /** - * get name - * @name getName - * @methodOf Kinetic.Node.prototype - */ - - /** - * get id - * @name getId - * @methodOf Kinetic.Node.prototype - */ - - /** - * get scale - * @name getScale - * @methodOf Kinetic.Node.prototype - */ - - /** - * get offset - * @name getOffset - * @methodOf Kinetic.Node.prototype - */ - - /** - * get rotation in degrees - * @name getRotationDeg - * @methodOf Kinetic.Node.prototype - */ - - /** - * set rotation in degrees - * @name setRotationDeg - * @methodOf Kinetic.Node.prototype - * @param {Number} deg - */ - - /** - * set scale. - * @name setScale - * @param {Number} x - * @param {Number} y - * @methodOf Kinetic.Node.prototype - */ - - /** - * set offset. A node's offset defines the position and rotation point - * @name setOffset - * @methodOf Kinetic.Node.prototype - * @param {Number} x - * @param {Number} y - */ + // collection mappings + var collectionMappings = ['on', 'off']; + for(var n = 0; n < 2; n++) { + // induce scope + (function(i) { + var method = collectionMappings[i]; + Kinetic.Collection.prototype[method] = function() { + var args = [].slice.call(arguments); + args.unshift(method); + this.apply.apply(this, args); + }; + })(n); + } })(); diff --git a/src/Shape.js b/src/Shape.js index caa8d4f8..43e2438f 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -38,8 +38,6 @@ * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number * between 0 and 1 * @param {Array} [config.dashArray] - * @param {Number} [config.width] - * @param {Number} [config.height] */ Kinetic.Shape = function(config) { this._initShape(config); @@ -90,29 +88,6 @@ hasShadow: function() { return !!(this.getShadowColor() || this.getShadowBlur() || this.getShadowOffset()); }, - /** - * set width and height - * @name setSize - * @methodOf Kinetic.Shape.prototype - * @param {Number} width - * @param {Number} height - */ - setSize: function() { - var size = Kinetic.Type._getSize(Array.prototype.slice.call(arguments)); - this.setWidth(size.width); - this.setHeight(size.height); - }, - /** - * return shape size - * @name getSize - * @methodOf Kinetic.Shape.prototype - */ - getSize: function() { - return { - width: this.getWidth(), - height: this.getHeight() - }; - }, _get: function(selector) { return this.nodeType === selector || this.shapeType === selector ? [this] : []; }, @@ -178,10 +153,6 @@ // add getters and setters Kinetic.Node.addGettersSetters(Kinetic.Shape, ['stroke', 'lineJoin', 'lineCap', 'strokeWidth', 'drawFunc', 'drawHitFunc', 'dashArray', 'shadowColor', 'shadowBlur', 'shadowOpacity', 'fillPatternImage', 'fill', 'fillPatternX', 'fillPatternY', 'fillLinearGradientColorStops', 'fillRadialGradientStartRadius', 'fillRadialGradientEndRadius', 'fillRadialGradientColorStops', 'fillPatternRepeat']); - Kinetic.Node.addPointGettersSetters(Kinetic.Shape, ['fillPatternOffset', 'fillPatternScale', 'fillLinearGradientStartPoint', 'fillLinearGradientEndPoint', 'fillRadialGradientStartPoint', 'fillRadialGradientEndPoint', 'shadowOffset']); - - Kinetic.Node.addRotationGettersSetters(Kinetic.Shape, ['fillPatternRotation']); - /** * set stroke color * @name setStroke @@ -197,6 +168,13 @@ * default is miter */ + /** + * set line cap. Can be butt, round, or square + * @name setLineCap + * @methodOf Kinetic.Shape.prototype + * @param {String} lineCap + */ + /** * set stroke width * @name setStrokeWidth @@ -218,13 +196,6 @@ * @param {Function} drawHitFunc drawing function used for hit detection */ - /** - * set line cap. Can be butt, round, or square - * @name setLineCap - * @methodOf Kinetic.Shape.prototype - * @param {String} lineCap - */ - /** * set dash array. * @name setDashArray @@ -260,10 +231,66 @@ */ /** - * set shadow offset - * @name setShadowOffset + * set fill pattern image + * @name setFillPatternImage * @methodOf Kinetic.Shape.prototype - * @param {Number|Array|Object} offset + * @param {Image} image object + */ + + /** + * set fill color + * @name setFill + * @methodOf Kinetic.Shape.prototype + * @param {String} color + */ + + /** + * set fill pattern x + * @name setFillPatternX + * @methodOf Kinetic.Shape.prototype + * @param {Number} x + */ + + /** + * set fill pattern y + * @name setFillPatternY + * @methodOf Kinetic.Shape.prototype + * @param {Number} y + */ + + /** + * set fill linear gradient color stops + * @name setFillLinearGradientColorStops + * @methodOf Kinetic.Shape.prototype + * @param {Array} colorStops + */ + + /** + * set fill radial gradient start radius + * @name setFillRadialGradientStartRadius + * @methodOf Kinetic.Shape.prototype + * @param {Number} radius + */ + + /** + * set fill radial gradient end radius + * @name setFillRadialGradientEndRadius + * @methodOf Kinetic.Shape.prototype + * @param {Number} radius + */ + + /** + * set fill radial gradient color stops + * @name setFillRadialGradientColorStops + * @methodOf Kinetic.Shape.prototype + * @param {Number} colorStops + */ + + /** + * set fill pattern repeat + * @name setFillPatternRepeat + * @methodOf Kinetic.Shape.prototype + * @param {Number} repeat can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'no-repeat' */ /** @@ -278,6 +305,12 @@ * @methodOf Kinetic.Shape.prototype */ + /** + * get line cap + * @name getLineCap + * @methodOf Kinetic.Shape.prototype + */ + /** * get stroke width * @name getStrokeWidth @@ -296,6 +329,12 @@ * @methodOf Kinetic.Shape.prototype */ + /** + * get dash array + * @name getDashArray + * @methodOf Kinetic.Line.prototype + */ + /** * get shadow color * @name getShadowColor @@ -315,26 +354,179 @@ */ /** - * get shadow offset - * @name getShadowOffset + * get fill pattern image + * @name getFillPatternImage * @methodOf Kinetic.Shape.prototype */ /** - * get fill + * get fill color * @name getFill * @methodOf Kinetic.Shape.prototype */ /** - * get line cap - * @name getLineCap + * get fill pattern x + * @name getFillPatternX * @methodOf Kinetic.Shape.prototype */ /** - * get dash array - * @name getDashArray - * @methodOf Kinetic.Line.prototype + * get fill pattern y + * @name getFillPatternY + * @methodOf Kinetic.Shape.prototype */ + + /** + * get fill linear gradient color stops + * @name getFillLinearGradientColorStops + * @methodOf Kinetic.Shape.prototype + * @param {Array} colorStops + */ + + /** + * get fill radial gradient start radius + * @name getFillRadialGradientStartRadius + * @methodOf Kinetic.Shape.prototype + */ + + /** + * get fill radial gradient end radius + * @name getFillRadialGradientEndRadius + * @methodOf Kinetic.Shape.prototype + */ + + /** + * get fill radial gradient color stops + * @name getFillRadialGradientColorStops + * @methodOf Kinetic.Shape.prototype + */ + + /** + * get fill pattern repeat + * @name getFillPatternRepeat + * @methodOf Kinetic.Shape.prototype + */ + + Kinetic.Node.addPointGettersSetters(Kinetic.Shape, ['fillPatternOffset', 'fillPatternScale', 'fillLinearGradientStartPoint', 'fillLinearGradientEndPoint', 'fillRadialGradientStartPoint', 'fillRadialGradientEndPoint', 'shadowOffset']); + + /** + * set fill pattern offset + * @name setFillPatternOffset + * @methodOf Kinetic.Shape.prototype + * @param {Number|Array|Object} offset + */ + + /** + * set fill pattern scale + * @name setFillPatternScale + * @methodOf Kinetic.Shape.prototype + * @param {Number|Array|Object} scale + */ + + /** + * set fill linear gradient start point + * @name setFillLinearGradientStartPoint + * @methodOf Kinetic.Shape.prototype + * @param {Number|Array|Object} startPoint + */ + + /** + * set fill linear gradient end point + * @name setFillLinearGradientEndPoint + * @methodOf Kinetic.Shape.prototype + * @param {Number|Array|Object} endPoint + */ + + /** + * set fill radial gradient start point + * @name setFillRadialGradientStartPoint + * @methodOf Kinetic.Shape.prototype + * @param {Number|Array|Object} startPoint + */ + + /** + * set fill radial gradient end point + * @name setFillRadialGradientEndPoint + * @methodOf Kinetic.Shape.prototype + * @param {Number|Array|Object} endPoint + */ + + /** + * set shadow offset + * @name setShadowOffset + * @methodOf Kinetic.Shape.prototype + * @param {Number|Array|Object} offset + */ + + /** + * get fill pattern offset + * @name getFillPatternOffset + * @methodOf Kinetic.Shape.prototype + */ + + /** + * get fill pattern scale + * @name getFillPatternScale + * @methodOf Kinetic.Shape.prototype + */ + + /** + * get fill linear gradient start point + * @name getFillLinearGradientStartPoint + * @methodOf Kinetic.Shape.prototype + */ + + /** + * get fill linear gradient end point + * @name getFillLinearGradientEndPoint + * @methodOf Kinetic.Shape.prototype + */ + + /** + * get fill radial gradient start point + * @name getFillRadialGradientStartPoint + * @methodOf Kinetic.Shape.prototype + */ + + /** + * get fill radial gradient end point + * @name getFillRadialGradientEndPoint + * @methodOf Kinetic.Shape.prototype + */ + + /** + * get shadow offset + * @name getShadowOffset + * @methodOf Kinetic.Shape.prototype + */ + + Kinetic.Node.addRotationGettersSetters(Kinetic.Shape, ['fillPatternRotation']); + + /** + * set fill pattern rotation in radians + * @name setFillPatternRotation + * @methodOf Kinetic.Shape.prototype + * @param {Number} rotation + */ + + /** + * set fill pattern rotation in degrees + * @name setFillPatternRotationDeg + * @methodOf Kinetic.Shape.prototype + * @param {Number} rotationDeg + */ + + /** + * get fill pattern rotation in radians + * @name getFillPatternRotation + * @methodOf Kinetic.Shape.prototype + */ + + /** + * get fill pattern rotation in degrees + * @name getFillPatternRotationDeg + * @methodOf Kinetic.Shape.prototype + */ + })(); diff --git a/src/Stage.js b/src/Stage.js index 79104e0c..17b64fc5 100644 --- a/src/Stage.js +++ b/src/Stage.js @@ -5,8 +5,6 @@ * @augments Kinetic.Container * @param {Object} config * @param {String|DomElement} config.container Container id or DOM element - * @param {Number} config.width - * @param {Number} config.height */ Kinetic.Stage = function(config) { this._initStage(config); diff --git a/src/shapes/Ellipse.js b/src/shapes/Ellipse.js index 98a19820..904afd9a 100644 --- a/src/shapes/Ellipse.js +++ b/src/shapes/Ellipse.js @@ -25,7 +25,7 @@ this._setDrawFuncs(); }, drawFunc: function(canvas) { - var context = canvas.getContext(), r = this.getRadius(); + var context = canvas.getContext(), r = this.getRadius(); context.beginPath(); context.save(); if(r.x !== r.y) { @@ -36,22 +36,6 @@ context.closePath(); canvas.fillStroke(this); }, - /** - * set radius - * @name setRadius - * @methodOf Kinetic.Ellipse.prototype - * @param {Object|Array} radius - * radius can be a number, in which the ellipse becomes a circle, - * it can be an object with an x and y component, or it - * can be an array in which the first element is the x component - * and the second element is the y component. The x component - * defines the horizontal radius and the y component - * defines the vertical radius - */ - setRadius: function() { - var pos = Kinetic.Type._getXY([].slice.call(arguments)); - this.setAttr('radius', Kinetic.Type._merge(pos, this.getRadius())); - }, getWidth: function() { return this.getRadius().x * 2; }, @@ -74,7 +58,20 @@ Kinetic.Global.extend(Kinetic.Ellipse, Kinetic.Shape); // add getters setters - Kinetic.Node.addGetters(Kinetic.Ellipse, ['radius']); + Kinetic.Node.addPointGettersSetters(Kinetic.Ellipse, ['radius']); + + /** + * set radius + * @name setRadius + * @methodOf Kinetic.Ellipse.prototype + * @param {Object|Array} radius + * radius can be a number, in which the ellipse becomes a circle, + * it can be an object with an x and y component, or it + * can be an array in which the first element is the x component + * and the second element is the y component. The x component + * defines the horizontal radius and the y component + * defines the vertical radius + */ /** * get radius diff --git a/src/shapes/RegularPolygon.js b/src/shapes/RegularPolygon.js index 413d5af0..d142f9b4 100644 --- a/src/shapes/RegularPolygon.js +++ b/src/shapes/RegularPolygon.js @@ -55,6 +55,7 @@ * @methodOf Kinetic.RegularPolygon.prototype * @param {int} sides */ + /** * get radius * @name getRadius diff --git a/src/shapes/Text.js b/src/shapes/Text.js index be36a855..b9d529df 100644 --- a/src/shapes/Text.js +++ b/src/shapes/Text.js @@ -12,7 +12,6 @@ * @param {String} config.fontStyle can be normal, bold, or italic. Default is normal * @param {String} config.text * @param {String} config.align can be left, center, or right - * @param {String} config.verticalAlign can be top, middle, or bottom * @param {Number} config.padding * @param {Number} config.width default is auto * @param {Number} config.height default is auto