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

refactored draw, _draw, and _drawChildren methods in such a way that isVisible and getListening logic resides in one place, therefore improving code quality

Browse Source
This commit is contained in:
Eric Rowell 2012-08-19 20:44:45 -07:00
parent e99312ece2
commit 9093d9a512
11 changed files with 101 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
dist/kinetic-core.js vendored
View File

@ -1278,7 +1278,7 @@ Kinetic.Node = Kinetic.Class.extend({
this.eventListeners = {};
this.transAnim = new Kinetic.Animation();
this.setAttrs(config);
// bind events
this.on('draggableChange.kinetic', function() {
this._onDraggableChange();
@ -2202,7 +2202,27 @@ Kinetic.Node = Kinetic.Class.extend({
}
}
}
}
},
_draw: function(canvas) {
if(this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening())) {
if(this._beforeDraw) {
this._beforeDraw(canvas);
}
var children = this.children;
if(children) {
for(var n = 0; n < children.length; n++) {
var child = children[n];
if(child.draw) {
child.draw(canvas);
}
else {
child._draw(canvas);
}
}
}
}
},
});
// add getter and setter methods
@ -2647,26 +2667,6 @@ Kinetic.Container = Kinetic.Node.extend({
return arr;
},
/**
* draw children
*/
_drawChildren: function(canvas) {
var stage = this.getStage();
var children = this.children;
for(var n = 0; n < children.length; n++) {
var child = children[n];
if(child.getListening()) {
if(child.nodeType === 'Shape') {
if(child.isVisible()) {
child._draw(canvas);
}
}
else {
child.draw(canvas);
}
}
}
},
/**
* set children indices
*/
@ -3489,9 +3489,6 @@ Kinetic.Stage = Kinetic.Container.extend({
this.ids = {};
this.names = {};
this.dragAnim = new Kinetic.Animation();
},
_draw: function() {
this._drawChildren();
}
});
@ -3582,7 +3579,23 @@ Kinetic.Layer = Kinetic.Container.extend({
* @methodOf Kinetic.Layer.prototype
*/
draw: function(canvas) {
this._draw(canvas);
// before draw handler
if(this.beforeDrawFunc !== undefined) {
this.beforeDrawFunc.call(this);
}
if(canvas) {
this._draw(canvas);
}
else {
this._draw(this.getCanvas());
this._draw(this.bufferCanvas);
}
// after draw handler
if(this.afterDrawFunc !== undefined) {
this.afterDrawFunc.call(this);
}
},
/**
* draw children nodes on buffer. this includes any groups
@ -3675,43 +3688,9 @@ Kinetic.Layer = Kinetic.Container.extend({
}
return canvas.toDataURL(mimeType, quality);
},
/**
* private draw children
*/
_draw: function(canvas) {
if(this.isVisible()) {
// before draw handler
if(this.beforeDrawFunc !== undefined) {
this.beforeDrawFunc.call(this);
}
if(this.attrs.clearBeforeDraw) {
if(canvas) {
canvas.clear();
}
else {
this.getCanvas().clear();
this.bufferCanvas.clear();
}
}
// draw custom func
if(this.attrs.drawFunc !== undefined) {
this.attrs.drawFunc.call(this);
}
if(canvas) {
this._drawChildren(canvas);
}
else {
this._drawChildren(this.getCanvas());
this._drawChildren(this.bufferCanvas);
}
// after draw handler
if(this.afterDrawFunc !== undefined) {
this.afterDrawFunc.call(this);
}
_beforeDraw: function(canvas) {
if(this.attrs.clearBeforeDraw) {
canvas.clear();
}
}
});
@ -3771,14 +3750,6 @@ Kinetic.Group = Kinetic.Container.extend({
// call super constructor
this._super(config);
},
draw: function(canvas) {
this._draw(canvas);
},
_draw: function(canvas) {
if(this.attrs.visible) {
this._drawChildren(canvas);
}
}
});
@ -4103,7 +4074,7 @@ Kinetic.Shape = Kinetic.Node.extend({
var obj = stage.getIntersection(pos);
return !!(obj && obj.pixel[3] > 0);
},
_draw: function(canvas) {
_beforeDraw: function(canvas) {
if(this.attrs.drawFunc) {
var stage = this.getStage();
var context = canvas.getContext();

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

File diff suppressed because one or more lines are too long

20
src/Container.js
View File

@ -241,26 +241,6 @@ Kinetic.Container = Kinetic.Node.extend({
return arr;
},
/**
* draw children
*/
_drawChildren: function(canvas) {
var stage = this.getStage();
var children = this.children;
for(var n = 0; n < children.length; n++) {
var child = children[n];
if(child.getListening()) {
if(child.nodeType === 'Shape') {
if(child.isVisible()) {
child._draw(canvas);
}
}
else {
child.draw(canvas);
}
}
}
},
/**
* set children indices
*/

8
src/Group.js
View File

@ -36,13 +36,5 @@ Kinetic.Group = Kinetic.Container.extend({
// call super constructor
this._super(config);
},
draw: function(canvas) {
this._draw(canvas);
},
_draw: function(canvas) {
if(this.attrs.visible) {
this._drawChildren(canvas);
}
}
});

58
src/Layer.js
View File

@ -57,7 +57,23 @@ Kinetic.Layer = Kinetic.Container.extend({
* @methodOf Kinetic.Layer.prototype
*/
draw: function(canvas) {
this._draw(canvas);
// before draw handler
if(this.beforeDrawFunc !== undefined) {
this.beforeDrawFunc.call(this);
}
if(canvas) {
this._draw(canvas);
}
else {
this._draw(this.getCanvas());
this._draw(this.bufferCanvas);
}
// after draw handler
if(this.afterDrawFunc !== undefined) {
this.afterDrawFunc.call(this);
}
},
/**
* draw children nodes on buffer. this includes any groups
@ -150,43 +166,9 @@ Kinetic.Layer = Kinetic.Container.extend({
}
return canvas.toDataURL(mimeType, quality);
},
/**
* private draw children
*/
_draw: function(canvas) {
if(this.isVisible()) {
// before draw handler
if(this.beforeDrawFunc !== undefined) {
this.beforeDrawFunc.call(this);
}
if(this.attrs.clearBeforeDraw) {
if(canvas) {
canvas.clear();
}
else {
this.getCanvas().clear();
this.bufferCanvas.clear();
}
}
// draw custom func
if(this.attrs.drawFunc !== undefined) {
this.attrs.drawFunc.call(this);
}
if(canvas) {
this._drawChildren(canvas);
}
else {
this._drawChildren(this.getCanvas());
this._drawChildren(this.bufferCanvas);
}
// after draw handler
if(this.afterDrawFunc !== undefined) {
this.afterDrawFunc.call(this);
}
_beforeDraw: function(canvas) {
if(this.attrs.clearBeforeDraw) {
canvas.clear();
}
}
});

24
src/Node.js
View File

@ -58,7 +58,7 @@ Kinetic.Node = Kinetic.Class.extend({
this.eventListeners = {};
this.transAnim = new Kinetic.Animation();
this.setAttrs(config);
// bind events
this.on('draggableChange.kinetic', function() {
this._onDraggableChange();
@ -982,7 +982,27 @@ Kinetic.Node = Kinetic.Class.extend({
}
}
}
}
},
_draw: function(canvas) {
if(this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening())) {
if(this._beforeDraw) {
this._beforeDraw(canvas);
}
var children = this.children;
if(children) {
for(var n = 0; n < children.length; n++) {
var child = children[n];
if(child.draw) {
child.draw(canvas);
}
else {
child._draw(canvas);
}
}
}
}
},
});
// add getter and setter methods

2
src/Shape.js
View File

@ -319,7 +319,7 @@ Kinetic.Shape = Kinetic.Node.extend({
var obj = stage.getIntersection(pos);
return !!(obj && obj.pixel[3] > 0);
},
_draw: function(canvas) {
_beforeDraw: function(canvas) {
if(this.attrs.drawFunc) {
var stage = this.getStage();
var context = canvas.getContext();

3
src/Stage.js
View File

@ -810,9 +810,6 @@ Kinetic.Stage = Kinetic.Container.extend({
this.ids = {};
this.names = {};
this.dragAnim = new Kinetic.Animation();
},
_draw: function() {
this._drawChildren();
}
});

2
tests/js/manualTests.js
View File

@ -363,6 +363,8 @@ Test.prototype.tests = {
layer.add(star);
stage.add(layer);
//document.body.appendChild(layer.bufferCanvas.element)
},
'EVENTS - drag events click': function(containerId) {
var stage = new Kinetic.Stage({

2
tests/js/performanceTests.js
View File

@ -67,7 +67,7 @@ Test.prototype.tests = {
anim.start();
}, 4000);
},
'*DRAWING - draw 10,000 small circles with tooltips': function(containerId) {
'DRAWING - draw 10,000 small circles with tooltips': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,

15
tests/js/unitTests.js
View File

@ -130,7 +130,7 @@ Test.prototype.tests = {
test(circle.getName() === 'myCircle', 'circle name should be myCircle');
//document.body.appendChild(layer.bufferCanvas.element)
document.body.appendChild(layer.bufferCanvas.element)
},
'STAGE - add shape with opacity': function(containerId) {
var stage = new Kinetic.Stage({
@ -480,7 +480,6 @@ Test.prototype.tests = {
test(stage.getScale().x === 0.5, 'stage scale x should be 0.5');
test(stage.getScale().y === 0.5, 'stage scale y should be 0.5');
stage.draw();
},
'STAGE - scale stage before add shape': function(containerId) {
@ -1882,11 +1881,17 @@ Test.prototype.tests = {
y: -120
});
layer.add(cachedShape);
layer.draw();
warn(urls[0] === layer.toDataURL(), 'layer data url is incorrect');
cachedShape.createBufferImage(function() {
layer.draw();
warn(urls[0] === layer.toDataURL(), 'layer data url is incorrect');
document.body.appendChild(layer.bufferCanvas.element)
});
}
});