lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-18 18:27:58 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

updated docs

Browse Source
This commit is contained in:
Eric Rowell
2013-01-02 21:35:51 -08:00
parent a53db90d0a
commit 31ad5fca88
7 changed files with 368 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/Layer.js
View File

@@ -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);

224
src/Node.js
View File

@@ -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);
}
})();

286
src/Shape.js
View File

@@ -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
*/
})();

2
src/Stage.js
View File

@@ -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);

31
src/shapes/Ellipse.js
View File

@@ -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

1
src/shapes/RegularPolygon.js
View File

@@ -55,6 +55,7 @@
* @methodOf Kinetic.RegularPolygon.prototype
* @param {int} sides
*/
/**
* get radius
* @name getRadius

1
src/shapes/Text.js
View File

@@ -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