mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
refactoring
This commit is contained in:
lavrton
parent
18cce13ea5
commit
858ddd5029
@ -44,9 +44,6 @@ var sourceFiles = [
|
|||||||
'src/filters/Kaleidoscope.js',
|
'src/filters/Kaleidoscope.js',
|
||||||
|
|
||||||
// core
|
// core
|
||||||
'src/Animation.js',
|
|
||||||
'src/Tween.js',
|
|
||||||
'src/DragAndDrop.js',
|
|
||||||
'src/Container.js',
|
'src/Container.js',
|
||||||
'src/Shape.js',
|
'src/Shape.js',
|
||||||
'src/Stage.js',
|
'src/Stage.js',
|
||||||
@ -54,6 +51,9 @@ var sourceFiles = [
|
|||||||
'src/Layer.js',
|
'src/Layer.js',
|
||||||
'src/FastLayer.js',
|
'src/FastLayer.js',
|
||||||
'src/Group.js',
|
'src/Group.js',
|
||||||
|
'src/Animation.js',
|
||||||
|
'src/Tween.js',
|
||||||
|
'src/DragAndDrop.js',
|
||||||
|
|
||||||
// shapes
|
// shapes
|
||||||
'src/shapes/Rect.js',
|
'src/shapes/Rect.js',
|
||||||
|
|||||||
@ -1,4 +1,21 @@
|
|||||||
(function() {
|
(function() {
|
||||||
|
/**
|
||||||
|
* BaseLayer constructor.
|
||||||
|
* @constructor
|
||||||
|
* @memberof Konva
|
||||||
|
* @augments Konva.Container
|
||||||
|
* @param {Object} config
|
||||||
|
* @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want
|
||||||
|
* to clear the canvas before each layer draw. The default value is true.
|
||||||
|
* @@nodeParams
|
||||||
|
* @@containerParams
|
||||||
|
* @example
|
||||||
|
* var layer = new Konva.Layer();
|
||||||
|
*/
|
||||||
|
Konva.BaseLayer = function(config) {
|
||||||
|
this.___init(config);
|
||||||
|
};
|
||||||
|
|
||||||
Konva.Util.addMethods(Konva.BaseLayer, {
|
Konva.Util.addMethods(Konva.BaseLayer, {
|
||||||
___init: function(config) {
|
___init: function(config) {
|
||||||
this.nodeType = 'Layer';
|
this.nodeType = 'Layer';
|
||||||
|
|||||||
@ -1,4 +1,18 @@
|
|||||||
(function() {
|
(function() {
|
||||||
|
/**
|
||||||
|
* Container constructor. Containers are used to contain nodes or other containers
|
||||||
|
* @constructor
|
||||||
|
* @memberof Konva
|
||||||
|
* @augments Konva.Node
|
||||||
|
* @abstract
|
||||||
|
* @param {Object} config
|
||||||
|
* @@nodeParams
|
||||||
|
* @@containerParams
|
||||||
|
*/
|
||||||
|
Konva.Container = function(config) {
|
||||||
|
this.__init(config);
|
||||||
|
};
|
||||||
|
|
||||||
Konva.Util.addMethods(Konva.Container, {
|
Konva.Util.addMethods(Konva.Container, {
|
||||||
__init: function(config) {
|
__init: function(config) {
|
||||||
this.children = new Konva.Collection();
|
this.children = new Konva.Collection();
|
||||||
|
|||||||
@ -1,4 +1,26 @@
|
|||||||
(function() {
|
(function() {
|
||||||
|
/**
|
||||||
|
* FastLayer constructor. Layers are tied to their own canvas element and are used
|
||||||
|
* to contain shapes only. If you don't need node nesting, mouse and touch interactions,
|
||||||
|
* or event pub/sub, you should use FastLayer instead of Layer to create your layers.
|
||||||
|
* It renders about 2x faster than normal layers.
|
||||||
|
* @constructor
|
||||||
|
* @memberof Konva
|
||||||
|
* @augments Konva.BaseLayer
|
||||||
|
* @param {Object} config
|
||||||
|
* @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want
|
||||||
|
* to clear the canvas before each layer draw. The default value is true.
|
||||||
|
* @param {Boolean} [config.visible]
|
||||||
|
* @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
|
||||||
|
* @@containerParams
|
||||||
|
* @example
|
||||||
|
* var layer = new Konva.FastLayer();
|
||||||
|
*/
|
||||||
|
Konva.FastLayer = function(config) {
|
||||||
|
this.____init(config);
|
||||||
|
};
|
||||||
|
|
||||||
Konva.Util.addMethods(Konva.FastLayer, {
|
Konva.Util.addMethods(Konva.FastLayer, {
|
||||||
____init: function(config) {
|
____init: function(config) {
|
||||||
|
|||||||
149
src/Global.js
149
src/Global.js
@ -101,154 +101,6 @@ var Konva = {};
|
|||||||
*/
|
*/
|
||||||
Filters: {},
|
Filters: {},
|
||||||
|
|
||||||
/**
|
|
||||||
* Node constructor. Nodes are entities that can be transformed, layered,
|
|
||||||
* and have bound events. The stage, layers, groups, and shapes all extend Node.
|
|
||||||
* @constructor
|
|
||||||
* @memberof Konva
|
|
||||||
* @abstract
|
|
||||||
* @param {Object} config
|
|
||||||
* @@nodeParams
|
|
||||||
*/
|
|
||||||
Node: function(config) {
|
|
||||||
this._init(config);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Shape constructor. Shapes are primitive objects such as rectangles,
|
|
||||||
* circles, text, lines, etc.
|
|
||||||
* @constructor
|
|
||||||
* @memberof Konva
|
|
||||||
* @augments Konva.Node
|
|
||||||
* @param {Object} config
|
|
||||||
* @@shapeParams
|
|
||||||
* @@nodeParams
|
|
||||||
* @example
|
|
||||||
* var customShape = new Konva.Shape({
|
|
||||||
* x: 5,
|
|
||||||
* y: 10,
|
|
||||||
* fill: 'red',
|
|
||||||
* // a Konva.Canvas renderer is passed into the drawFunc function
|
|
||||||
* drawFunc: function(context) {
|
|
||||||
* context.beginPath();
|
|
||||||
* context.moveTo(200, 50);
|
|
||||||
* context.lineTo(420, 80);
|
|
||||||
* context.quadraticCurveTo(300, 100, 260, 170);
|
|
||||||
* context.closePath();
|
|
||||||
* context.fillStrokeShape(this);
|
|
||||||
* }
|
|
||||||
*});
|
|
||||||
*/
|
|
||||||
Shape: function(config) {
|
|
||||||
this.__init(config);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Container constructor. Containers are used to contain nodes or other containers
|
|
||||||
* @constructor
|
|
||||||
* @memberof Konva
|
|
||||||
* @augments Konva.Node
|
|
||||||
* @abstract
|
|
||||||
* @param {Object} config
|
|
||||||
* @@nodeParams
|
|
||||||
* @@containerParams
|
|
||||||
*/
|
|
||||||
Container: function(config) {
|
|
||||||
this.__init(config);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Stage constructor. A stage is used to contain multiple layers
|
|
||||||
* @constructor
|
|
||||||
* @memberof Konva
|
|
||||||
* @augments Konva.Container
|
|
||||||
* @param {Object} config
|
|
||||||
* @param {String|Element} config.container Container id or DOM element
|
|
||||||
* @@nodeParams
|
|
||||||
* @example
|
|
||||||
* var stage = new Konva.Stage({
|
|
||||||
* width: 500,
|
|
||||||
* height: 800,
|
|
||||||
* container: 'containerId'
|
|
||||||
* });
|
|
||||||
*/
|
|
||||||
Stage: function(config) {
|
|
||||||
this.___init(config);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* BaseLayer constructor.
|
|
||||||
* @constructor
|
|
||||||
* @memberof Konva
|
|
||||||
* @augments Konva.Container
|
|
||||||
* @param {Object} config
|
|
||||||
* @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want
|
|
||||||
* to clear the canvas before each layer draw. The default value is true.
|
|
||||||
* @@nodeParams
|
|
||||||
* @@containerParams
|
|
||||||
* @example
|
|
||||||
* var layer = new Konva.Layer();
|
|
||||||
*/
|
|
||||||
BaseLayer: function(config) {
|
|
||||||
this.___init(config);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Layer constructor. Layers are tied to their own canvas element and are used
|
|
||||||
* to contain groups or shapes.
|
|
||||||
* @constructor
|
|
||||||
* @memberof Konva
|
|
||||||
* @augments Konva.BaseLayer
|
|
||||||
* @param {Object} config
|
|
||||||
* @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want
|
|
||||||
* to clear the canvas before each layer draw. The default value is true.
|
|
||||||
* @@nodeParams
|
|
||||||
* @@containerParams
|
|
||||||
* @example
|
|
||||||
* var layer = new Konva.Layer();
|
|
||||||
*/
|
|
||||||
Layer: function(config) {
|
|
||||||
this.____init(config);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* FastLayer constructor. Layers are tied to their own canvas element and are used
|
|
||||||
* to contain shapes only. If you don't need node nesting, mouse and touch interactions,
|
|
||||||
* or event pub/sub, you should use FastLayer instead of Layer to create your layers.
|
|
||||||
* It renders about 2x faster than normal layers.
|
|
||||||
* @constructor
|
|
||||||
* @memberof Konva
|
|
||||||
* @augments Konva.BaseLayer
|
|
||||||
* @param {Object} config
|
|
||||||
* @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want
|
|
||||||
* to clear the canvas before each layer draw. The default value is true.
|
|
||||||
* @param {Boolean} [config.visible]
|
|
||||||
* @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
|
|
||||||
* @@containerParams
|
|
||||||
* @example
|
|
||||||
* var layer = new Konva.FastLayer();
|
|
||||||
*/
|
|
||||||
FastLayer: function(config) {
|
|
||||||
this.____init(config);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Group constructor. Groups are used to contain shapes or other groups.
|
|
||||||
* @constructor
|
|
||||||
* @memberof Konva
|
|
||||||
* @augments Konva.Container
|
|
||||||
* @param {Object} config
|
|
||||||
* @@nodeParams
|
|
||||||
* @@containerParams
|
|
||||||
* @example
|
|
||||||
* var group = new Konva.Group();
|
|
||||||
*/
|
|
||||||
Group: function(config) {
|
|
||||||
this.___init(config);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* returns whether or not drag and drop is currently active
|
* returns whether or not drag and drop is currently active
|
||||||
* @method
|
* @method
|
||||||
@ -400,7 +252,6 @@ var Konva = {};
|
|||||||
Konva.root = root;
|
Konva.root = root;
|
||||||
|
|
||||||
}(this, function() {
|
}(this, function() {
|
||||||
|
|
||||||
// Just return a value to define the module export.
|
// Just return a value to define the module export.
|
||||||
// This example returns an object, but the module
|
// This example returns an object, but the module
|
||||||
// can return a function as the exported value.
|
// can return a function as the exported value.
|
||||||
|
|||||||
16
src/Group.js
16
src/Group.js
@ -1,4 +1,20 @@
|
|||||||
(function() {
|
(function() {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Group constructor. Groups are used to contain shapes or other groups.
|
||||||
|
* @constructor
|
||||||
|
* @memberof Konva
|
||||||
|
* @augments Konva.Container
|
||||||
|
* @param {Object} config
|
||||||
|
* @@nodeParams
|
||||||
|
* @@containerParams
|
||||||
|
* @example
|
||||||
|
* var group = new Konva.Group();
|
||||||
|
*/
|
||||||
|
Konva.Group = function(config) {
|
||||||
|
this.___init(config);
|
||||||
|
};
|
||||||
|
|
||||||
Konva.Util.addMethods(Konva.Group, {
|
Konva.Util.addMethods(Konva.Group, {
|
||||||
___init: function(config) {
|
___init: function(config) {
|
||||||
this.nodeType = 'Group';
|
this.nodeType = 'Group';
|
||||||
|
|||||||
17
src/Layer.js
17
src/Layer.js
@ -24,6 +24,23 @@
|
|||||||
],
|
],
|
||||||
INTERSECTION_OFFSETS_LEN = INTERSECTION_OFFSETS.length;
|
INTERSECTION_OFFSETS_LEN = INTERSECTION_OFFSETS.length;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Layer constructor. Layers are tied to their own canvas element and are used
|
||||||
|
* to contain groups or shapes.
|
||||||
|
* @constructor
|
||||||
|
* @memberof Konva
|
||||||
|
* @augments Konva.BaseLayer
|
||||||
|
* @param {Object} config
|
||||||
|
* @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want
|
||||||
|
* to clear the canvas before each layer draw. The default value is true.
|
||||||
|
* @@nodeParams
|
||||||
|
* @@containerParams
|
||||||
|
* @example
|
||||||
|
* var layer = new Konva.Layer();
|
||||||
|
*/
|
||||||
|
Konva.Layer = function(config) {
|
||||||
|
this.____init(config);
|
||||||
|
};
|
||||||
|
|
||||||
Konva.Util.addMethods(Konva.Layer, {
|
Konva.Util.addMethods(Konva.Layer, {
|
||||||
____init: function(config) {
|
____init: function(config) {
|
||||||
|
|||||||
12
src/Node.js
12
src/Node.js
@ -35,6 +35,18 @@
|
|||||||
'transformsEnabledChange.konva'
|
'transformsEnabledChange.konva'
|
||||||
].join(SPACE);
|
].join(SPACE);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Node constructor. Nodes are entities that can be transformed, layered,
|
||||||
|
* and have bound events. The stage, layers, groups, and shapes all extend Node.
|
||||||
|
* @constructor
|
||||||
|
* @memberof Konva
|
||||||
|
* @abstract
|
||||||
|
* @param {Object} config
|
||||||
|
* @@nodeParams
|
||||||
|
*/
|
||||||
|
Konva.Node = function(config) {
|
||||||
|
this._init(config);
|
||||||
|
};
|
||||||
|
|
||||||
Konva.Util.addMethods(Konva.Node, {
|
Konva.Util.addMethods(Konva.Node, {
|
||||||
_init: function(config) {
|
_init: function(config) {
|
||||||
|
|||||||
29
src/Shape.js
29
src/Shape.js
@ -23,6 +23,35 @@
|
|||||||
this._clearCache(SHADOW_RGBA);
|
this._clearCache(SHADOW_RGBA);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Shape constructor. Shapes are primitive objects such as rectangles,
|
||||||
|
* circles, text, lines, etc.
|
||||||
|
* @constructor
|
||||||
|
* @memberof Konva
|
||||||
|
* @augments Konva.Node
|
||||||
|
* @param {Object} config
|
||||||
|
* @@shapeParams
|
||||||
|
* @@nodeParams
|
||||||
|
* @example
|
||||||
|
* var customShape = new Konva.Shape({
|
||||||
|
* x: 5,
|
||||||
|
* y: 10,
|
||||||
|
* fill: 'red',
|
||||||
|
* // a Konva.Canvas renderer is passed into the drawFunc function
|
||||||
|
* drawFunc: function(context) {
|
||||||
|
* context.beginPath();
|
||||||
|
* context.moveTo(200, 50);
|
||||||
|
* context.lineTo(420, 80);
|
||||||
|
* context.quadraticCurveTo(300, 100, 260, 170);
|
||||||
|
* context.closePath();
|
||||||
|
* context.fillStrokeShape(this);
|
||||||
|
* }
|
||||||
|
*});
|
||||||
|
*/
|
||||||
|
Konva.Shape = function(config) {
|
||||||
|
this.__init(config);
|
||||||
|
};
|
||||||
|
|
||||||
Konva.Util.addMethods(Konva.Shape, {
|
Konva.Util.addMethods(Konva.Shape, {
|
||||||
__init: function(config) {
|
__init: function(config) {
|
||||||
this.nodeType = 'Shape';
|
this.nodeType = 'Shape';
|
||||||
|
|||||||
19
src/Stage.js
19
src/Stage.js
@ -53,6 +53,25 @@
|
|||||||
}, false);
|
}, false);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Stage constructor. A stage is used to contain multiple layers
|
||||||
|
* @constructor
|
||||||
|
* @memberof Konva
|
||||||
|
* @augments Konva.Container
|
||||||
|
* @param {Object} config
|
||||||
|
* @param {String|Element} config.container Container id or DOM element
|
||||||
|
* @@nodeParams
|
||||||
|
* @example
|
||||||
|
* var stage = new Konva.Stage({
|
||||||
|
* width: 500,
|
||||||
|
* height: 800,
|
||||||
|
* container: 'containerId'
|
||||||
|
* });
|
||||||
|
*/
|
||||||
|
Konva.Stage = function(config) {
|
||||||
|
this.___init(config);
|
||||||
|
};
|
||||||
|
|
||||||
Konva.Util.addMethods(Konva.Stage, {
|
Konva.Util.addMethods(Konva.Stage, {
|
||||||
___init: function(config) {
|
___init: function(config) {
|
||||||
this.nodeType = STAGE;
|
this.nodeType = STAGE;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user