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

cleaned up docs, and beefed up individual shape docs. moved corner radius attr to Rect shape

Browse Source
This commit is contained in:
Eric Rowell
2012-12-22 23:08:03 -08:00
parent 375c64a332
commit 36584a3ce2
16 changed files with 86 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/Group.js
View File

@@ -3,24 +3,6 @@
* Group constructor. Groups are used to contain shapes or other groups.
* @constructor
* @augments Kinetic.Container
* @param {Object} config
* @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.Group = function(config) {
this._initGroup(config);

87
src/Shape.js
View File

@@ -5,57 +5,37 @@
* @constructor
* @augments Kinetic.Node
* @param {Object} config
* @config {String|Object} [config.fill] can be a string color, a linear gradient object, a radial
* @param {String|Object} [config.fill] can be a string color, a linear gradient object, a radial
* gradient object, or a pattern object.
* @config {Image} [config.fill.image] image object if filling the shape with a pattern
* @config {Object} [config.fill.offset] pattern offset if filling the shape with a pattern
* @config {Number} [config.fill.offset.x]
* @config {Number} [config.fill.offset.y]
* @config {Object} [config.fill.start] start point if using a linear gradient or
* @param {Image} [config.fill.image] image object if filling the shape with a pattern
* @param {Object} [config.fill.offset] pattern offset if filling the shape with a pattern
* @param {Number} [config.fill.offset.x]
* @param {Number} [config.fill.offset.y]
* @param {Object} [config.fill.start] start point if using a linear gradient or
* radial gradient fill
* @config {Number} [config.fill.start.x]
* @config {Number} [config.fill.start.y]
* @config {Number} [config.fill.start.radius] start radius if using a radial gradient fill
* @config {Object} [config.fill.end] end point if using a linear gradient or
* @param {Number} [config.fill.start.x]
* @param {Number} [config.fill.start.y]
* @param {Number} [config.fill.start.radius] start radius if using a radial gradient fill
* @param {Object} [config.fill.end] end point if using a linear gradient or
* radial gradient fill
* @config {Number} [config.fill.end.x]
* @config {Number} [config.fill.end.y]
* @config {Number} [config.fill.end.radius] end radius if using a radial gradient fill
* @config {String} [config.stroke] stroke color
* @config {Number} [config.strokeWidth] stroke width
* @config {String} [config.lineJoin] line join can be miter, round, or bevel. The default
* @param {Number} [config.fill.end.x]
* @param {Number} [config.fill.end.y]
* @param {Number} [config.fill.end.radius] end radius if using a radial gradient fill
* @param {String} [config.stroke] stroke color
* @param {Number} [config.strokeWidth] stroke width
* @param {String} [config.lineJoin] line join can be miter, round, or bevel. The default
* is miter
* @config {Object} [config.shadow] shadow object
* @config {String} [config.shadow.color]
* @config {Number} [config.shadow.blur]
* @config {Obect} [config.shadow.blur.offset]
* @config {Number} [config.shadow.blur.offset.x]
* @config {Number} [config.shadow.blur.offset.y]
* @config {Number} [config.shadow.opacity] shadow opacity. Can be any real number
* @param {Object} [config.shadow] shadow object
* @param {String} [config.shadow.color]
* @param {Number} [config.shadow.blur]
* @param {Obect} [config.shadow.blur.offset]
* @param {Number} [config.shadow.blur.offset.x]
* @param {Number} [config.shadow.blur.offset.y]
* @param {Number} [config.shadow.opacity] shadow opacity. Can be any real number
* between 0 and 1
* @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 {String} [config.dragConstraint] can be vertical, horizontal, or none. The default
* is none
* @param {Object} [config.dragBounds]
* @param {Number} [config.dragBounds.top]
* @param {Number} [config.dragBounds.right]
* @param {Number} [config.dragBounds.bottom]
* @param {Number} [config.dragBounds.left]
* @param {Array} [config.dashArray]
* @param {Number} [config.width]
* @param {Number} [config.height]
*/
Kinetic.Shape = function(config) {
this._initShape(config);
@@ -283,7 +263,7 @@
Kinetic.Global.extend(Kinetic.Shape, Kinetic.Node);
// add getters and setters
Kinetic.Node.addGettersSetters(Kinetic.Shape, ['stroke', 'lineJoin', 'lineCap', 'strokeWidth', 'drawFunc', 'drawHitFunc', 'cornerRadius', 'dashArray']);
Kinetic.Node.addGettersSetters(Kinetic.Shape, ['stroke', 'lineJoin', 'lineCap', 'strokeWidth', 'drawFunc', 'drawHitFunc', 'dashArray']);
Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
/**
@@ -322,13 +302,6 @@
* @param {Function} drawHitFunc drawing function used for hit detection
*/
/**
* set corner radius
* @name setCornerRadius
* @methodOf Kinetic.Shape.prototype
* @param {Number} corner radius
*/
/**
* set line cap. Can be butt, round, or square
* @name setLineCap
@@ -367,12 +340,6 @@
* @methodOf Kinetic.Shape.prototype
*/
/**
* get corner radius
* @name getCornerRadius
* @methodOf Kinetic.Shape.prototype
*/
/**
* get draw function
* @name getDrawFunc

17
src/Stage.js
View File

@@ -7,23 +7,6 @@
* @param {String|DomElement} config.container Container id or DOM element
* @param {Number} config.width
* @param {Number} config.height
* @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.Stage = function(config) {
this._initStage(config);

1
src/shapes/Circle.js
View File

@@ -4,6 +4,7 @@
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
* @param {Number} config.radius
*/
Kinetic.Circle = function(config) {
this._initCircle(config);

1
src/shapes/Ellipse.js
View File

@@ -4,6 +4,7 @@
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
* @param {Number|Array|Object} config.radius defines x and y radius
*/
Kinetic.Ellipse = function(config) {
this._initEllipse(config);

2
src/shapes/Image.js
View File

@@ -5,8 +5,6 @@
* @augments Kinetic.Shape
* @param {Object} config
* @param {ImageObject} config.image
* @param {Number} [config.width]
* @param {Number} [config.height]
* @param {Object} [config.crop]
*/
Kinetic.Image = function(config) {

2
src/shapes/Line.js
View File

@@ -4,6 +4,8 @@
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
* @param {Array} config.points can be a flattened array of points, or an array of point objects.
* e.g. [0,1,2,3] and [{x:1,y:2},{x:3,y:4}] are equivalent
*/
Kinetic.Line = function(config) {
this._initLine(config);

1
src/shapes/Path.js
View File

@@ -5,6 +5,7 @@
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
* @param {String} config.data SVG data string
*/
Kinetic.Path = function(config) {
this._initPath(config);

2
src/shapes/Polygon.js
View File

@@ -4,6 +4,8 @@
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
* @param {Array} config.points can be a flattened array of points, or an array of point objects.
* e.g. [0,1,2,3] and [{x:1,y:2},{x:3,y:4}] are equivalent
*/
Kinetic.Polygon = function(config) {
this._initPolygon(config);

21
src/shapes/Rect.js
View File

@@ -4,10 +4,12 @@
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
* @param {Number} config.cornerRadius
*/
Kinetic.Rect = function(config) {
this._initRect(config);
}
};
Kinetic.Rect.prototype = {
_initRect: function(config) {
this.setDefaultAttrs({
@@ -21,7 +23,7 @@
this._setDrawFuncs();
},
drawFunc: function(canvas) {
var context = canvas.getContext();
var context = canvas.getContext();
context.beginPath();
var cornerRadius = this.getCornerRadius(), width = this.getWidth(), height = this.getHeight();
if(cornerRadius === 0) {
@@ -47,4 +49,19 @@
Kinetic.Global.extend(Kinetic.Rect, Kinetic.Shape);
Kinetic.Node.addGettersSetters(Kinetic.Rect, ['cornerRadius']);
/**
* set corner radius
* @name setCornerRadius
* @methodOf Kinetic.Shape.prototype
* @param {Number} corner radius
*/
/**
* get corner radius
* @name getCornerRadius
* @methodOf Kinetic.Shape.prototype
*/
})();

2
src/shapes/RegularPolygon.js
View File

@@ -4,6 +4,8 @@
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
* @param {Number} sides
* @param {Number} radius
*/
Kinetic.RegularPolygon = function(config) {
this._initRegularPolygon(config);

3
src/shapes/Sprite.js
View File

@@ -4,6 +4,9 @@
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
* @param {String} config.animation animation key
* @param {Object} config.animations animation map
* @param {Integer} config.index animation index
*/
Kinetic.Sprite = function(config) {
this._initSprite(config);

3
src/shapes/Star.js
View File

@@ -4,6 +4,9 @@
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
* @param {Integer} config.numPoints
* @param {Number} config.innerRadius
* @param {Number} config.outerRadius
*/
Kinetic.Star = function(config) {
this._initStar(config);

16
src/shapes/Text.js
View File

@@ -4,6 +4,20 @@
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
* @param {String} config.textFill
* @param {String} config.textStroke
* @param {Number} config.textStrokeWidth
* @param {String} config.fontFamily default is Calibri
* @param {Number} config.fontSize default is 12
* @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
* @param {Number} config.lineHeight default is 1.2
* @param {Number} config.cornerRadius
*/
Kinetic.Text = function(config) {
this._initText(config);
@@ -296,7 +310,7 @@
Kinetic.HitCanvas.prototype._applyTextShadow = _applyTextShadow;
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'lineHeight']);
Kinetic.Node.addGettersSetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'lineHeight', 'cornerRadius']);
Kinetic.Node.addGetters(Kinetic.Text, ['text', 'textShadow']);
/**
* set font family

7
src/shapes/TextPath.js
View File

@@ -5,6 +5,13 @@
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
* @param {String} config.textFill
* @param {String} config.textStroke
* @param {Number} config.textStrokeWidth
* @param {String} config.fontFamily default is Calibri
* @param {Number} config.fontSize default is 12
* @param {String} config.fontStyle can be normal, bold, or italic. Default is normal
* @param {String} config.text
*/
Kinetic.TextPath = function(config) {
this._initTextPath(config);

3
src/shapes/Wedge.js
View File

@@ -4,6 +4,9 @@
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
* @param {Number} config.angle
* @param {Number} config.radius
* @param {Boolean} config.clockwise
*/
Kinetic.Wedge = function(config) {
this._initWedge(config);