lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-28 22:25:22 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

added new beforeDraw() and afterDraw() event handlers for Layer

Browse Source
This commit is contained in:
Eric Rowell 2012-04-28 23:03:58 -07:00
parent 1dbe93a232
commit 7bcd34ec47
4 changed files with 87 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
dist/kinetic-core.js vendored
View File

@ -2182,6 +2182,8 @@ Kinetic.Layer = function(config) {
this.nodeType = 'Layer';
this.lastDrawTime = 0;
this.beforeDrawFunc = undefined;
this.afterDrawFunc = undefined;
this.canvas = document.createElement('canvas');
this.context = this.canvas.getContext('2d');
@ -2243,6 +2245,18 @@ Kinetic.Layer.prototype = {
getThrottle: function() {
return this.attrs.throttle;
},
/**
* set before draw function handler
*/
beforeDraw: function(func) {
this.beforeDrawFunc = func;
},
/**
* set after draw function handler
*/
afterDraw: function(func) {
this.afterDrawFunc = func;
},
/**
* clears the canvas context tied to the layer. Clearing
* a layer does not remove its children. The nodes within
@ -2285,10 +2299,20 @@ Kinetic.Layer.prototype = {
* private draw children
*/
_draw: function() {
// before draw handler
if(this.beforeDrawFunc !== undefined) {
this.beforeDrawFunc();
}
this.clear();
if(this.attrs.visible) {
this._drawChildren();
}
// after draw handler
if(this.afterDrawFunc !== undefined) {
this.afterDrawFunc();
}
}
};
// Extend Container and Node

4
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

24
src/Layer.js
View File

@ -16,6 +16,8 @@ Kinetic.Layer = function(config) {
this.nodeType = 'Layer';
this.lastDrawTime = 0;
this.beforeDrawFunc = undefined;
this.afterDrawFunc = undefined;
this.canvas = document.createElement('canvas');
this.context = this.canvas.getContext('2d');
@ -77,6 +79,18 @@ Kinetic.Layer.prototype = {
getThrottle: function() {
return this.attrs.throttle;
},
/**
* set before draw function handler
*/
beforeDraw: function(func) {
this.beforeDrawFunc = func;
},
/**
* set after draw function handler
*/
afterDraw: function(func) {
this.afterDrawFunc = func;
},
/**
* clears the canvas context tied to the layer. Clearing
* a layer does not remove its children. The nodes within
@ -119,10 +133,20 @@ Kinetic.Layer.prototype = {
* private draw children
*/
_draw: function() {
// before draw handler
if(this.beforeDrawFunc !== undefined) {
this.beforeDrawFunc();
}
this.clear();
if(this.attrs.visible) {
this._drawChildren();
}
// after draw handler
if(this.afterDrawFunc !== undefined) {
this.afterDrawFunc();
}
}
};
// Extend Container and Node

39
tests/js/unitTests.js
View File

@ -587,6 +587,41 @@ Test.prototype.tests = {
var layer = new Kinetic.Layer();
stage.add(layer);
},
'LAYERS - beforeDraw and afterDraw': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: 100,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(circle);
stage.add(layer);
var counter = 0;
layer.beforeDraw(function() {
counter++;
test(counter === 1, 'counter should be 1');
});
layer.afterDraw(function() {
counter++;
test(counter === 2, 'counter should be 2');
});
layer.draw();
},
'LAYERS - throttling': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
@ -2660,8 +2695,8 @@ Test.prototype.tests = {
x: 300,
duration: 1,
callback: function() {
test(rect.getX() === 300, 'rect x is not 300');
test(rect.getX() === 300, 'rect x is not 300');
test(go.animations.length === 0, 'should be no animations running');
test(stage.animRunning === false, 'animRunning should be false');