mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
added new BaseLayer, which Layer and FastLayer extend
This commit is contained in:
Eric Rowell
parent
40dfbef81e
commit
a9b63fc8ed
@ -34,6 +34,7 @@ module.exports = function(grunt) {
|
||||
'src/Container.js',
|
||||
'src/Shape.js',
|
||||
'src/Stage.js',
|
||||
'src/BaseLayer.js',
|
||||
'src/Layer.js',
|
||||
'src/FastLayer.js',
|
||||
'src/Group.js',
|
||||
|
||||
158
src/BaseLayer.js
Normal file
158
src/BaseLayer.js
Normal file
@ -0,0 +1,158 @@
|
||||
(function() {
|
||||
Kinetic.Util.addMethods(Kinetic.BaseLayer, {
|
||||
___init: function(config) {
|
||||
this.nodeType = 'Layer';
|
||||
Kinetic.Container.call(this, config);
|
||||
},
|
||||
createPNGStream : function() {
|
||||
return this.canvas._canvas.createPNGStream();
|
||||
},
|
||||
/**
|
||||
* get layer canvas
|
||||
* @method
|
||||
* @memberof Kinetic.BaseLayer.prototype
|
||||
*/
|
||||
getCanvas: function() {
|
||||
return this.canvas;
|
||||
},
|
||||
/**
|
||||
* get layer hit canvas
|
||||
* @method
|
||||
* @memberof Kinetic.BaseLayer.prototype
|
||||
*/
|
||||
getHitCanvas: function() {
|
||||
return this.hitCanvas;
|
||||
},
|
||||
/**
|
||||
* get layer canvas context
|
||||
* @method
|
||||
* @memberof Kinetic.BaseLayer.prototype
|
||||
*/
|
||||
getContext: function() {
|
||||
return this.getCanvas().getContext();
|
||||
},
|
||||
/**
|
||||
* clear scene and hit canvas contexts tied to the layer
|
||||
* @method
|
||||
* @memberof Kinetic.BaseLayer.prototype
|
||||
* @param {Object} [bounds]
|
||||
* @param {Number} [bounds.x]
|
||||
* @param {Number} [bounds.y]
|
||||
* @param {Number} [bounds.width]
|
||||
* @param {Number} [bounds.height]
|
||||
* @example
|
||||
* layer.clear();<br>
|
||||
* layer.clear(0, 0, 100, 100);
|
||||
*/
|
||||
clear: function(bounds) {
|
||||
this.getContext().clear(bounds);
|
||||
this.getHitCanvas().getContext().clear(bounds);
|
||||
return this;
|
||||
},
|
||||
// extend Node.prototype.setZIndex
|
||||
setZIndex: function(index) {
|
||||
Kinetic.Node.prototype.setZIndex.call(this, index);
|
||||
var stage = this.getStage();
|
||||
if(stage) {
|
||||
stage.content.removeChild(this.getCanvas()._canvas);
|
||||
|
||||
if(index < stage.getChildren().length - 1) {
|
||||
stage.content.insertBefore(this.getCanvas()._canvas, stage.getChildren()[index + 1].getCanvas()._canvas);
|
||||
}
|
||||
else {
|
||||
stage.content.appendChild(this.getCanvas()._canvas);
|
||||
}
|
||||
}
|
||||
return this;
|
||||
},
|
||||
// extend Node.prototype.moveToTop
|
||||
moveToTop: function() {
|
||||
Kinetic.Node.prototype.moveToTop.call(this);
|
||||
var stage = this.getStage();
|
||||
if(stage) {
|
||||
stage.content.removeChild(this.getCanvas()._canvas);
|
||||
stage.content.appendChild(this.getCanvas()._canvas);
|
||||
}
|
||||
},
|
||||
// extend Node.prototype.moveUp
|
||||
moveUp: function() {
|
||||
if(Kinetic.Node.prototype.moveUp.call(this)) {
|
||||
var stage = this.getStage();
|
||||
if(stage) {
|
||||
stage.content.removeChild(this.getCanvas()._canvas);
|
||||
|
||||
if(this.index < stage.getChildren().length - 1) {
|
||||
stage.content.insertBefore(this.getCanvas()._canvas, stage.getChildren()[this.index + 1].getCanvas()._canvas);
|
||||
}
|
||||
else {
|
||||
stage.content.appendChild(this.getCanvas()._canvas);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// extend Node.prototype.moveDown
|
||||
moveDown: function() {
|
||||
if(Kinetic.Node.prototype.moveDown.call(this)) {
|
||||
var stage = this.getStage();
|
||||
if(stage) {
|
||||
var children = stage.getChildren();
|
||||
stage.content.removeChild(this.getCanvas()._canvas);
|
||||
stage.content.insertBefore(this.getCanvas()._canvas, children[this.index + 1].getCanvas()._canvas);
|
||||
}
|
||||
}
|
||||
},
|
||||
// extend Node.prototype.moveToBottom
|
||||
moveToBottom: function() {
|
||||
if(Kinetic.Node.prototype.moveToBottom.call(this)) {
|
||||
var stage = this.getStage();
|
||||
if(stage) {
|
||||
var children = stage.getChildren();
|
||||
stage.content.removeChild(this.getCanvas()._canvas);
|
||||
stage.content.insertBefore(this.getCanvas()._canvas, children[1].getCanvas()._canvas);
|
||||
}
|
||||
}
|
||||
},
|
||||
getLayer: function() {
|
||||
return this;
|
||||
},
|
||||
remove: function() {
|
||||
var stage = this.getStage(),
|
||||
canvas = this.getCanvas(),
|
||||
_canvas = canvas._canvas;
|
||||
|
||||
Kinetic.Node.prototype.remove.call(this);
|
||||
|
||||
if(stage && _canvas && Kinetic.Util._isInDocument(_canvas)) {
|
||||
stage.content.removeChild(_canvas);
|
||||
}
|
||||
return this;
|
||||
},
|
||||
getStage: function() {
|
||||
return this.parent;
|
||||
}
|
||||
});
|
||||
Kinetic.Util.extend(Kinetic.BaseLayer, Kinetic.Container);
|
||||
|
||||
// add getters and setters
|
||||
Kinetic.Factory.addGetterSetter(Kinetic.BaseLayer, 'clearBeforeDraw', true);
|
||||
/**
|
||||
* get/set clearBeforeDraw flag which determines if the layer is cleared or not
|
||||
* before drawing
|
||||
* @name clearBeforeDraw
|
||||
* @method
|
||||
* @memberof Kinetic.BaseLayer.prototype
|
||||
* @param {Boolean} clearBeforeDraw
|
||||
* @returns {Boolean}
|
||||
* @example
|
||||
* // get clearBeforeDraw flag<br>
|
||||
* var clearBeforeDraw = layer.clearBeforeDraw();<br><br>
|
||||
*
|
||||
* // disable clear before draw<br>
|
||||
* layer.clearBeforeDraw(false);<br><br>
|
||||
*
|
||||
* // enable clear before draw<br>
|
||||
* layer.clearBeforeDraw(true);
|
||||
*/
|
||||
|
||||
Kinetic.Collection.mapMethods(Kinetic.BaseLayer);
|
||||
})();
|
||||
127
src/FastLayer.js
127
src/FastLayer.js
@ -5,11 +5,11 @@
|
||||
DRAW = 'draw';
|
||||
|
||||
Kinetic.Util.addMethods(Kinetic.FastLayer, {
|
||||
___init: function(config) {
|
||||
____init: function(config) {
|
||||
this.nodeType = 'Layer';
|
||||
this.canvas = new Kinetic.SceneCanvas();
|
||||
// call super constructor
|
||||
Kinetic.Container.call(this, config);
|
||||
Kinetic.BaseLayer.call(this, config);
|
||||
},
|
||||
_validateAdd: function(child) {
|
||||
var type = child.getType();
|
||||
@ -26,9 +26,6 @@
|
||||
getIntersection: function() {
|
||||
return null;
|
||||
},
|
||||
createPNGStream : function() {
|
||||
return this.canvas._canvas.createPNGStream();
|
||||
},
|
||||
drawScene: function(can) {
|
||||
var layer = this.getLayer(),
|
||||
canvas = can || (layer && layer.getCanvas());
|
||||
@ -52,22 +49,6 @@
|
||||
this.drawScene();
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* get layer canvas
|
||||
* @method
|
||||
* @memberof Kinetic.FastLayer.prototype
|
||||
*/
|
||||
getCanvas: function() {
|
||||
return this.canvas;
|
||||
},
|
||||
/**
|
||||
* get layer canvas context
|
||||
* @method
|
||||
* @memberof Kinetic.FastLayer.prototype
|
||||
*/
|
||||
getContext: function() {
|
||||
return this.getCanvas().getContext();
|
||||
},
|
||||
/**
|
||||
* clear scene and hit canvas contexts tied to the layer
|
||||
* @method
|
||||
@ -95,111 +76,9 @@
|
||||
this.getCanvas()._canvas.style.display = 'none';
|
||||
}
|
||||
return this;
|
||||
},
|
||||
// extend Node.prototype.setZIndex
|
||||
setZIndex: function(index) {
|
||||
Kinetic.Node.prototype.setZIndex.call(this, index);
|
||||
var stage = this.getStage();
|
||||
if(stage) {
|
||||
stage.content.removeChild(this.getCanvas()._canvas);
|
||||
|
||||
if(index < stage.getChildren().length - 1) {
|
||||
stage.content.insertBefore(this.getCanvas()._canvas, stage.getChildren()[index + 1].getCanvas()._canvas);
|
||||
}
|
||||
else {
|
||||
stage.content.appendChild(this.getCanvas()._canvas);
|
||||
}
|
||||
}
|
||||
return this;
|
||||
},
|
||||
// extend Node.prototype.moveToTop
|
||||
moveToTop: function() {
|
||||
Kinetic.Node.prototype.moveToTop.call(this);
|
||||
var stage = this.getStage();
|
||||
if(stage) {
|
||||
stage.content.removeChild(this.getCanvas()._canvas);
|
||||
stage.content.appendChild(this.getCanvas()._canvas);
|
||||
}
|
||||
},
|
||||
// extend Node.prototype.moveUp
|
||||
moveUp: function() {
|
||||
if(Kinetic.Node.prototype.moveUp.call(this)) {
|
||||
var stage = this.getStage();
|
||||
if(stage) {
|
||||
stage.content.removeChild(this.getCanvas()._canvas);
|
||||
|
||||
if(this.index < stage.getChildren().length - 1) {
|
||||
stage.content.insertBefore(this.getCanvas()._canvas, stage.getChildren()[this.index + 1].getCanvas()._canvas);
|
||||
}
|
||||
else {
|
||||
stage.content.appendChild(this.getCanvas()._canvas);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// extend Node.prototype.moveDown
|
||||
moveDown: function() {
|
||||
if(Kinetic.Node.prototype.moveDown.call(this)) {
|
||||
var stage = this.getStage();
|
||||
if(stage) {
|
||||
var children = stage.getChildren();
|
||||
stage.content.removeChild(this.getCanvas()._canvas);
|
||||
stage.content.insertBefore(this.getCanvas()._canvas, children[this.index + 1].getCanvas()._canvas);
|
||||
}
|
||||
}
|
||||
},
|
||||
// extend Node.prototype.moveToBottom
|
||||
moveToBottom: function() {
|
||||
if(Kinetic.Node.prototype.moveToBottom.call(this)) {
|
||||
var stage = this.getStage();
|
||||
if(stage) {
|
||||
var children = stage.getChildren();
|
||||
stage.content.removeChild(this.getCanvas()._canvas);
|
||||
stage.content.insertBefore(this.getCanvas()._canvas, children[1].getCanvas()._canvas);
|
||||
}
|
||||
}
|
||||
},
|
||||
getLayer: function() {
|
||||
return this;
|
||||
},
|
||||
remove: function() {
|
||||
var stage = this.getStage(),
|
||||
canvas = this.getCanvas(),
|
||||
_canvas = canvas._canvas;
|
||||
|
||||
Kinetic.Node.prototype.remove.call(this);
|
||||
|
||||
if(stage && _canvas && Kinetic.Util._isInDocument(_canvas)) {
|
||||
stage.content.removeChild(_canvas);
|
||||
}
|
||||
return this;
|
||||
},
|
||||
getStage: function() {
|
||||
return this.parent;
|
||||
}
|
||||
});
|
||||
Kinetic.Util.extend(Kinetic.FastLayer, Kinetic.Container);
|
||||
|
||||
// add getters and setters
|
||||
Kinetic.Factory.addGetterSetter(Kinetic.FastLayer, 'clearBeforeDraw', true);
|
||||
/**
|
||||
* get/set clearBeforeDraw flag which determines if the layer is cleared or not
|
||||
* before drawing
|
||||
* @name clearBeforeDraw
|
||||
* @method
|
||||
* @memberof Kinetic.FastLayer.prototype
|
||||
* @param {Boolean} clearBeforeDraw
|
||||
* @returns {Boolean}
|
||||
* @example
|
||||
* // get clearBeforeDraw flag<br>
|
||||
* var clearBeforeDraw = layer.clearBeforeDraw();<br><br>
|
||||
*
|
||||
* // disable clear before draw<br>
|
||||
* layer.clearBeforeDraw(false);<br><br>
|
||||
*
|
||||
* // enable clear before draw<br>
|
||||
* layer.clearBeforeDraw(true);
|
||||
*/
|
||||
Kinetic.Util.extend(Kinetic.FastLayer, Kinetic.BaseLayer);
|
||||
|
||||
Kinetic.Collection.mapMethods(Kinetic.FastLayer);
|
||||
})();
|
||||
|
||||
@ -159,6 +159,23 @@ var Kinetic = {};
|
||||
this.___init(config);
|
||||
},
|
||||
|
||||
/**
|
||||
* BaseLayer constructor.
|
||||
* @constructor
|
||||
* @memberof Kinetic
|
||||
* @augments Kinetic.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 Kinetic.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
|
||||
@ -174,7 +191,7 @@ var Kinetic = {};
|
||||
* var layer = new Kinetic.Layer();
|
||||
*/
|
||||
Layer: function(config) {
|
||||
this.___init(config);
|
||||
this.____init(config);
|
||||
},
|
||||
|
||||
/**
|
||||
@ -190,7 +207,7 @@ var Kinetic = {};
|
||||
* var layer = new Kinetic.FastLayer();
|
||||
*/
|
||||
FastLayer: function(config) {
|
||||
this.___init(config);
|
||||
this.____init(config);
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
135
src/Layer.js
135
src/Layer.js
@ -26,12 +26,12 @@
|
||||
|
||||
|
||||
Kinetic.Util.addMethods(Kinetic.Layer, {
|
||||
___init: function(config) {
|
||||
____init: function(config) {
|
||||
this.nodeType = 'Layer';
|
||||
this.canvas = new Kinetic.SceneCanvas();
|
||||
this.hitCanvas = new Kinetic.HitCanvas();
|
||||
// call super constructor
|
||||
Kinetic.Container.call(this, config);
|
||||
Kinetic.BaseLayer.call(this, config);
|
||||
},
|
||||
_setCanvasSize: function(width, height) {
|
||||
this.canvas.setSize(width, height);
|
||||
@ -43,9 +43,6 @@
|
||||
Kinetic.Util.error('You may only add groups and shapes to a layer.');
|
||||
}
|
||||
},
|
||||
createPNGStream : function() {
|
||||
return this.canvas._canvas.createPNGStream();
|
||||
},
|
||||
/**
|
||||
* get visible intersection shape. This is the preferred
|
||||
* method for determining if a point intersects a shape or not
|
||||
@ -141,30 +138,6 @@
|
||||
Kinetic.Container.prototype.drawHit.call(this, canvas);
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* get layer canvas
|
||||
* @method
|
||||
* @memberof Kinetic.Layer.prototype
|
||||
*/
|
||||
getCanvas: function() {
|
||||
return this.canvas;
|
||||
},
|
||||
/**
|
||||
* get layer hit canvas
|
||||
* @method
|
||||
* @memberof Kinetic.Layer.prototype
|
||||
*/
|
||||
getHitCanvas: function() {
|
||||
return this.hitCanvas;
|
||||
},
|
||||
/**
|
||||
* get layer canvas context
|
||||
* @method
|
||||
* @memberof Kinetic.Layer.prototype
|
||||
*/
|
||||
getContext: function() {
|
||||
return this.getCanvas().getContext();
|
||||
},
|
||||
/**
|
||||
* clear scene and hit canvas contexts tied to the layer
|
||||
* @method
|
||||
@ -196,87 +169,6 @@
|
||||
}
|
||||
return this;
|
||||
},
|
||||
// extend Node.prototype.setZIndex
|
||||
setZIndex: function(index) {
|
||||
Kinetic.Node.prototype.setZIndex.call(this, index);
|
||||
var stage = this.getStage();
|
||||
if(stage) {
|
||||
stage.content.removeChild(this.getCanvas()._canvas);
|
||||
|
||||
if(index < stage.getChildren().length - 1) {
|
||||
stage.content.insertBefore(this.getCanvas()._canvas, stage.getChildren()[index + 1].getCanvas()._canvas);
|
||||
}
|
||||
else {
|
||||
stage.content.appendChild(this.getCanvas()._canvas);
|
||||
}
|
||||
}
|
||||
return this;
|
||||
},
|
||||
// extend Node.prototype.moveToTop
|
||||
moveToTop: function() {
|
||||
Kinetic.Node.prototype.moveToTop.call(this);
|
||||
var stage = this.getStage();
|
||||
if(stage) {
|
||||
stage.content.removeChild(this.getCanvas()._canvas);
|
||||
stage.content.appendChild(this.getCanvas()._canvas);
|
||||
}
|
||||
},
|
||||
// extend Node.prototype.moveUp
|
||||
moveUp: function() {
|
||||
if(Kinetic.Node.prototype.moveUp.call(this)) {
|
||||
var stage = this.getStage();
|
||||
if(stage) {
|
||||
stage.content.removeChild(this.getCanvas()._canvas);
|
||||
|
||||
if(this.index < stage.getChildren().length - 1) {
|
||||
stage.content.insertBefore(this.getCanvas()._canvas, stage.getChildren()[this.index + 1].getCanvas()._canvas);
|
||||
}
|
||||
else {
|
||||
stage.content.appendChild(this.getCanvas()._canvas);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// extend Node.prototype.moveDown
|
||||
moveDown: function() {
|
||||
if(Kinetic.Node.prototype.moveDown.call(this)) {
|
||||
var stage = this.getStage();
|
||||
if(stage) {
|
||||
var children = stage.getChildren();
|
||||
stage.content.removeChild(this.getCanvas()._canvas);
|
||||
stage.content.insertBefore(this.getCanvas()._canvas, children[this.index + 1].getCanvas()._canvas);
|
||||
}
|
||||
}
|
||||
},
|
||||
// extend Node.prototype.moveToBottom
|
||||
moveToBottom: function() {
|
||||
if(Kinetic.Node.prototype.moveToBottom.call(this)) {
|
||||
var stage = this.getStage();
|
||||
if(stage) {
|
||||
var children = stage.getChildren();
|
||||
stage.content.removeChild(this.getCanvas()._canvas);
|
||||
stage.content.insertBefore(this.getCanvas()._canvas, children[1].getCanvas()._canvas);
|
||||
}
|
||||
}
|
||||
},
|
||||
getLayer: function() {
|
||||
return this;
|
||||
},
|
||||
remove: function() {
|
||||
var stage = this.getStage(),
|
||||
canvas = this.getCanvas(),
|
||||
_canvas = canvas._canvas;
|
||||
|
||||
Kinetic.Node.prototype.remove.call(this);
|
||||
|
||||
if(stage && _canvas && Kinetic.Util._isInDocument(_canvas)) {
|
||||
stage.content.removeChild(_canvas);
|
||||
}
|
||||
return this;
|
||||
},
|
||||
getStage: function() {
|
||||
return this.parent;
|
||||
},
|
||||
/**
|
||||
* enable hit graph
|
||||
* @name enableHitGraph
|
||||
@ -300,28 +192,7 @@
|
||||
return this;
|
||||
}
|
||||
});
|
||||
Kinetic.Util.extend(Kinetic.Layer, Kinetic.Container);
|
||||
|
||||
// add getters and setters
|
||||
Kinetic.Factory.addGetterSetter(Kinetic.Layer, 'clearBeforeDraw', true);
|
||||
/**
|
||||
* get/set clearBeforeDraw flag which determines if the layer is cleared or not
|
||||
* before drawing
|
||||
* @name clearBeforeDraw
|
||||
* @method
|
||||
* @memberof Kinetic.Layer.prototype
|
||||
* @param {Boolean} clearBeforeDraw
|
||||
* @returns {Boolean}
|
||||
* @example
|
||||
* // get clearBeforeDraw flag<br>
|
||||
* var clearBeforeDraw = layer.clearBeforeDraw();<br><br>
|
||||
*
|
||||
* // disable clear before draw<br>
|
||||
* layer.clearBeforeDraw(false);<br><br>
|
||||
*
|
||||
* // enable clear before draw<br>
|
||||
* layer.clearBeforeDraw(true);
|
||||
*/
|
||||
Kinetic.Util.extend(Kinetic.Layer, Kinetic.BaseLayer);
|
||||
|
||||
Kinetic.Factory.addGetterSetter(Kinetic.Layer, 'hitGraphEnabled', true);
|
||||
/**
|
||||
|
||||
Loading…
Reference in New Issue
Block a user