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

more docs, especially for Util and Tween

Browse Source
This commit is contained in:
Eric Rowell
2013-05-18 10:40:05 -07:00
parent 993ffd7b0e
commit 2ea5f83204
7 changed files with 219 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Canvas.js
View File

@@ -424,7 +424,7 @@
_fill: function(shape) {
var context = this.context;
context.save();
context.fillStyle = '#' + shape.colorKey;
context.fillStyle = shape.colorKey;
shape._fillFuncHit(context);
context.restore();
},
@@ -437,7 +437,7 @@
this._applyLineCap(shape);
context.save();
context.lineWidth = strokeWidth || 2;
context.strokeStyle = '#' + shape.colorKey;
context.strokeStyle = shape.colorKey;
shape._strokeFuncHit(context);
context.restore();
}

25
src/Container.js
View File

@@ -38,14 +38,23 @@
return this;
},
/**
* return an array of nodes that match the selector. Use '#' for id selections
* and '.' for name selections
* ex:
* var node = stage.get('#foo'); // selects node with id foo
* var nodes = layer.get('.bar'); // selects nodes with name bar inside layer
* return a {@link Kinetic.Collection} of nodes that match the selector. Use '#' for id selections
* and '.' for name selections. You can also select by type or class name
* @method
* @memberof Kinetic.Container.prototype
* @param {String} selector
* @example
* // select node with id foo<br>
* var node = stage.get('#foo');<br><br>
*
* // select nodes with name bar inside layer<br>
* var nodes = layer.get('.bar');<br><br>
*
* // select all groups inside layer<br>
* var nodes = layer.get('Group');<br><br>
*
* // select all rectangles inside layer<br>
* var nodes = layer.get('Rect');
*/
get: function(selector) {
var collection = new Kinetic.Collection();
@@ -138,12 +147,6 @@
return false;
},
/**
* clone node
* @method
* @memberof Kinetic.Container.prototype
* @param {Object} attrs override attrs
*/
clone: function(obj) {
// call super method
var node = Kinetic.Node.prototype.clone.call(this, obj)

5
src/Layer.js
View File

@@ -1,4 +1,7 @@
(function() {
// constants
var HASH = '#';
Kinetic.Util.addMethods(Kinetic.Layer, {
_initLayer: function(config) {
this.nodeType = 'Layer';
@@ -26,7 +29,7 @@
// this indicates that a hit pixel may have been found
if(p[3] === 255) {
colorKey = Kinetic.Util._rgbToHex(p[0], p[1], p[2]);
shape = Kinetic.Global.shapes[colorKey];
shape = Kinetic.Global.shapes[HASH + colorKey];
return {
shape: shape,
pixel: p

51
src/Node.js
View File

@@ -201,7 +201,7 @@
* @memberof Kinetic.Node.prototype
* @param {String} attr
* @example
* var attr = node.getAttr('x');
* var x = node.getAttr('x');
*/
getAttr: function(attr) {
var method = GET + Kinetic.Util._capitalize(attr);
@@ -723,8 +723,8 @@
* bar: 10<br>
* });<br><br>
*
* // fire click event that doesn't bubble<br>
* node.fire('click', null, false);
* // fire click event that bubbles<br>
* node.fire('click', null, true);
*/
fire: function(eventType, evt, bubble) {
// bubble
@@ -1465,10 +1465,23 @@
/**
* set scale
* @name setScale
* @param {Number} x
* @param {Number} y
* @param {Number} scale
* @method
* @memberof Kinetic.Node.prototype
* @example
* // set x and y to the same value<br>
* shape.setScale(5);<br><br>
*
* // set x and y<br>
* shape.setScale(20, 40);<br><br>
*
* // set x only <br>
* shape.setScale({<br>
* x: 20<br>
* });<br><br>
*
* // set x and y using an array<br>
* shape.setScale([20, 40]);
*/
/**
@@ -1517,6 +1530,20 @@
* @param {Number} y
* @method
* @memberof Kinetic.Node.prototype
* @example
* // set x and y<br>
* shape.setSkew(20, 40);<br><br>
*
* // set x only <br>
* shape.setSkew({<br>
* x: 20<br>
* });<br><br>
*
* // set x and y using an array<br>
* shape.setSkew([20, 40]);<br><br>
*
* // set x and y to the same value<br>
* shape.setSkew(5);
*/
/**
@@ -1565,6 +1592,20 @@
* @memberof Kinetic.Node.prototype
* @param {Number} x
* @param {Number} y
* @example
* // set x and y<br>
* shape.setOffset(20, 40);<br><br>
*
* // set x only <br>
* shape.setOffset({<br>
* x: 20<br>
* });<br><br>
*
* // set x and y using an array<br>
* shape.setOffset([20, 40]);<br><br>
*
* // set x and y to the same value<br>
* shape.setOffset(5);
*/
/**

118
src/Shape.js
View File

@@ -243,6 +243,12 @@
* @method
* @memberof Kinetic.Shape.prototype
* @param {Obect} color requires an object literal containing an r, g, and b component
* @example
* shape.setStrokeRGB({<br>
* r: 200,<br>
* g: 50,<br>
* b: 100<br>
* });
*/
/**
@@ -430,6 +436,12 @@
* @method
* @memberof Kinetic.Shape.prototype
* @param {Obect} color requires an object literal containing an r, g, and b component
* @example
* shape.setShadowRGB({<br>
* r: 200,<br>
* g: 50,<br>
* b: 100<br>
* });
*/
/**
@@ -558,6 +570,12 @@
* @method
* @memberof Kinetic.Shape.prototype
* @param {Obect} color requires an object literal containing an r, g, and b component
* @example
* shape.setFillRGB({<br>
* r: 200,<br>
* g: 50,<br>
* b: 100<br>
* });
*/
/**
@@ -850,6 +868,20 @@
* @method
* @memberof Kinetic.Shape.prototype
* @param {Number|Array|Object} offset
* @example
* // set x and y<br>
* shape.setFillPatternOffset(20, 40);<br><br>
*
* // set x only <br>
* shape.setFillPatternOffset({<br>
* x: 20<br>
* });<br><br>
*
* // set x and y using an array<br>
* shape.setFillPatternOffset([20, 40]);<br><br>
*
* // set x and y to the same value<br>
* shape.setFillPatternOffset(5);
*/
/**
@@ -896,7 +928,21 @@
* @name setFillPatternScale
* @method
* @memberof Kinetic.Shape.prototype
* @param {Number|Array|Object} scale
* @param {Number} scale
* @example
* // set x and y to the same value<br>
* shape.setFillPatternScale(5);<br><br>
*
* // set x and y<br>
* shape.setFillPatternScale(20, 40);<br><br>
*
* // set x only <br>
* shape.setFillPatternScale({<br>
* x: 20<br>
* });<br><br>
*
* // set x and y using an array<br>
* shape.setFillPatternScale([20, 40]);
*/
/**
@@ -944,6 +990,20 @@
* @method
* @memberof Kinetic.Shape.prototype
* @param {Number|Array|Object} startPoint
* @example
* // set x and y<br>
* shape.setFillLinearGradientStartPoint(20, 40);<br><br>
*
* // set x only <br>
* shape.setFillLinearGradientStartPoint({<br>
* x: 20<br>
* });<br><br>
*
* // set x and y using an array<br>
* shape.setFillLinearGradientStartPoint([20, 40]);<br><br>
*
* // set x and y to the same value<br>
* shape.setFillLinearGradientStartPoint(5);
*/
/**
@@ -991,6 +1051,20 @@
* @method
* @memberof Kinetic.Shape.prototype
* @param {Number|Array|Object} endPoint
* @example
* // set x and y<br>
* shape.setFillLinearGradientEndPoint(20, 40);<br><br>
*
* // set x only <br>
* shape.setFillLinearGradientEndPoint({<br>
* x: 20<br>
* });<br><br>
*
* // set x and y using an array<br>
* shape.setFillLinearGradientEndPoint([20, 40]);<br><br>
*
* // set x and y to the same value<br>
* shape.setFillLinearGradientEndPoint(5);
*/
/**
@@ -1038,6 +1112,20 @@
* @method
* @memberof Kinetic.Shape.prototype
* @param {Number|Array|Object} startPoint
* @example
* // set x and y<br>
* shape.setFillRadialGradientStartPoint(20, 40);<br><br>
*
* // set x only <br>
* shape.setFillRadialGradientStartPoint({<br>
* x: 20<br>
* });<br><br>
*
* // set x and y using an array<br>
* shape.setFillRadialGradientStartPoint([20, 40]);<br><br>
*
* // set x and y to the same value<br>
* shape.setFillRadialGradientStartPoint(5);
*/
/**
@@ -1085,6 +1173,20 @@
* @method
* @memberof Kinetic.Shape.prototype
* @param {Number|Array|Object} endPoint
* @example
* // set x and y<br>
* shape.setFillRadialGradientEndPoint(20, 40);<br><br>
*
* // set x only <br>
* shape.setFillRadialGradientEndPoint({<br>
* x: 20<br>
* });<br><br>
*
* // set x and y using an array<br>
* shape.setFillRadialGradientEndPoint([20, 40]);<br><br>
*
* // set x and y to the same value<br>
* shape.setFillRadialGradientEndPoint(5);
*/
/**
@@ -1132,6 +1234,20 @@
* @method
* @memberof Kinetic.Shape.prototype
* @param {Number|Array|Object} offset
* @example
* // set x and y<br>
* shape.setShadowOffset(20, 40);<br><br>
*
* // set x only <br>
* shape.setShadowOffset({<br>
* x: 20<br>
* });<br><br>
*
* // set x and y using an array<br>
* shape.setShadowOffset([20, 40]);<br><br>
*
* // set x and y to the same value<br>
* shape.setShadowOffset(5);
*/
/**

27
src/Tween.js
View File

@@ -19,9 +19,25 @@
}
/**
* Tween constructor.
* Tween constructor. Tweens enable you to animate a node between the current state and a new state.
* You can play, pause, reverse, seek, reset, and finish tweens. By default, tweens are animated using
* a linear easing. For more tweening options, check out {@link Kinetic.Easings}
* @constructor
* @memberof Kinetic
* @example
* // instantiate new tween which fully rotates a node in 1 second
* var tween = new Kinetic.Tween({<br>
* node: node,<br>
* rotationDeg: 360,<br>
* duration: 1,<br>
* Kinetic.Easings.EaseInOut<br>
* });<br><br>
*
* // play tween<br>
* tween.play();<br><br>
*
* // pause tween<br>
* tween.pause();
*/
Kinetic.Tween = function(config) {
var that = this,
@@ -38,7 +54,7 @@
this.onFinish = config.onFinish;
this.anim = new Kinetic.Animation(function() {
that.onEnterFrame();
that._onEnterFrame();
}, node.getLayer());
for (key in config) {
@@ -163,12 +179,7 @@
});
this.node.getLayer().draw();
},
/**
* define a function that's executed on each tween animation frame
* @method
* @memberof Kinetic.Tween.prototype
*/
onEnterFrame: function() {
_onEnterFrame: function() {
this._iterate(function(tween) {
tween.onEnterFrame();
});

22
src/Util.js
View File

@@ -1,7 +1,7 @@
(function() {
/**
* Collection constructor. Collection extends
* Array. This class is used in conjunction with get()
* Array. This class is used in conjunction with {@link Kinetic.Container#get}
* @constructor
* @memberof Kinetic
*/
@@ -21,6 +21,11 @@
* @method
* @memberof Kinetic.Collection.prototype
* @param {Function} func
* @example
* // get all nodes with name foo inside layer, and set x to 10 for each
* layer.get('.foo').each(function(shape, n) {<br>
* shape.setX(10);<br>
* });
*/
Kinetic.Collection.prototype.each = function(func) {
for(var n = 0; n < this.length; n++) {
@@ -214,6 +219,8 @@
PI_OVER_DEG180 = Math.PI / 180,
DEG180_OVER_PI = 180 / Math.PI,
HASH = '#',
ZERO = '0',
KINETIC_WARNING = 'Kinetic warning: ',
RGB_PAREN = 'rgb(',
COLORS = {
aqua: [0,255,255],
@@ -525,22 +532,27 @@
};
},
/**
* get random color
* return random hex color
* @method
* @memberof Kinetic.Util.prototype
*/
getRandomColor: function() {
var randColor = (Math.random() * 0xFFFFFF << 0).toString(16);
while (randColor.length < 6) {
randColor = '0' + randColor;
randColor = ZERO + randColor;
}
return randColor;
return HASH + randColor;
},
/**
* get RGB components of a color
* @method
* @memberof Kinetic.Util.prototype
* @param {String} color
* @example
* // each of the following examples return {r:0, g:0, b:255}<br>
* var rgb = Kinetic.Util.getRGB('blue');<br>
* var rgb = Kinetic.Util.getRGB('#0000ff');<br>
* var rgb = Kinetic.Util.getRGB('rgb(0,0,255)');
*/
getRGB: function(color) {
var rgb;
@@ -616,7 +628,7 @@
* if we don't use window.console in the conditional
*/
if(window.console && console.warn) {
console.warn('Kinetic warning: ' + str);
console.warn(KINETIC_WARNING + str);
}
},
extend: function(c1, c2) {