mirror of
https://github.com/konvajs/konva.git
synced 2025-09-19 02:37:59 +08:00
removed beforeDraw and afterDraw methods. you can now subscribe to draw events with .on('draw') or .on('beforeDraw'). Draw events also bubble
This commit is contained in:
19
src/Layer.js
19
src/Layer.js
@@ -27,25 +27,6 @@
|
|||||||
// call super constructor
|
// call super constructor
|
||||||
Kinetic.Container.call(this, config);
|
Kinetic.Container.call(this, config);
|
||||||
},
|
},
|
||||||
/**
|
|
||||||
* draw children nodes. this includes any groups
|
|
||||||
* or shapes
|
|
||||||
* @name draw
|
|
||||||
* @methodOf Kinetic.Layer.prototype
|
|
||||||
*/
|
|
||||||
draw: function() {
|
|
||||||
// before draw handler
|
|
||||||
if(this.beforeDrawFunc !== undefined) {
|
|
||||||
this.beforeDrawFunc.call(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
Kinetic.Container.prototype.draw.call(this);
|
|
||||||
|
|
||||||
// after draw handler
|
|
||||||
if(this.afterDrawFunc !== undefined) {
|
|
||||||
this.afterDrawFunc.call(this);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
toDataURL: function(config) {
|
toDataURL: function(config) {
|
||||||
config = config || {};
|
config = config || {};
|
||||||
var mimeType = config.mimeType || null,
|
var mimeType = config.mimeType || null,
|
||||||
|
13
src/Node.js
13
src/Node.js
@@ -18,7 +18,9 @@
|
|||||||
MOUSELEAVE = 'mouseleave',
|
MOUSELEAVE = 'mouseleave',
|
||||||
DEG = 'Deg',
|
DEG = 'Deg',
|
||||||
ON = 'on',
|
ON = 'on',
|
||||||
OFF = 'off';
|
OFF = 'off',
|
||||||
|
BEFORE_DRAW = 'beforeDraw',
|
||||||
|
DRAW = 'draw';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Node constructor. Nodes are entities that can be transformed, layered,
|
* Node constructor. Nodes are entities that can be transformed, layered,
|
||||||
@@ -945,7 +947,7 @@
|
|||||||
},
|
},
|
||||||
_handleEvent: function(eventType, evt, compareShape) {
|
_handleEvent: function(eventType, evt, compareShape) {
|
||||||
if(evt && this.nodeType === SHAPE) {
|
if(evt && this.nodeType === SHAPE) {
|
||||||
evt.shape = this;
|
evt.node = this;
|
||||||
}
|
}
|
||||||
var stage = this.getStage();
|
var stage = this.getStage();
|
||||||
var el = this.eventListeners;
|
var el = this.eventListeners;
|
||||||
@@ -990,15 +992,20 @@
|
|||||||
* the scene renderer
|
* the scene renderer
|
||||||
*/
|
*/
|
||||||
draw: function() {
|
draw: function() {
|
||||||
var layer = this.getLayer();
|
var layer = this.getLayer(),
|
||||||
|
evt = {
|
||||||
|
node: this
|
||||||
|
};
|
||||||
|
|
||||||
if(layer && layer.getClearBeforeDraw()) {
|
if(layer && layer.getClearBeforeDraw()) {
|
||||||
layer.getCanvas().clear();
|
layer.getCanvas().clear();
|
||||||
layer.getHitCanvas().clear();
|
layer.getHitCanvas().clear();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.fire(BEFORE_DRAW, evt);
|
||||||
this.drawScene();
|
this.drawScene();
|
||||||
this.drawHit();
|
this.drawHit();
|
||||||
|
this.fire(DRAW, evt);
|
||||||
},
|
},
|
||||||
shouldDrawHit: function() {
|
shouldDrawHit: function() {
|
||||||
return this.isVisible() && this.isListening() && !Kinetic.Global.isDragging();
|
return this.isVisible() && this.isListening() && !Kinetic.Global.isDragging();
|
||||||
|
@@ -302,6 +302,57 @@ Test.Modules.DD = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
Test.Modules.EVENT = {
|
Test.Modules.EVENT = {
|
||||||
|
'draw events': function(containerId) {
|
||||||
|
var stage = new Kinetic.Stage({
|
||||||
|
container: containerId,
|
||||||
|
width: 578,
|
||||||
|
height: 200,
|
||||||
|
throttle: 999
|
||||||
|
});
|
||||||
|
var layer = new Kinetic.Layer();
|
||||||
|
|
||||||
|
var circle = new Kinetic.Circle({
|
||||||
|
x: stage.getWidth() / 2,
|
||||||
|
y: stage.getHeight() / 2,
|
||||||
|
radius: 70,
|
||||||
|
fill: 'red'
|
||||||
|
});
|
||||||
|
|
||||||
|
var eventNodes = [];
|
||||||
|
var savedEvt;
|
||||||
|
var order = [];
|
||||||
|
|
||||||
|
layer.on('draw', function(evt) {
|
||||||
|
savedEvt = evt;
|
||||||
|
eventNodes.push(this.getNodeType());
|
||||||
|
order.push('layer draw');
|
||||||
|
});
|
||||||
|
|
||||||
|
stage.on('draw', function(evt) {
|
||||||
|
eventNodes.push(this.getNodeType());
|
||||||
|
order.push('stage draw');
|
||||||
|
});
|
||||||
|
|
||||||
|
layer.on('beforeDraw', function(evt) {
|
||||||
|
order.push('layer beforeDraw');
|
||||||
|
});
|
||||||
|
|
||||||
|
stage.on('beforeDraw', function(evt) {
|
||||||
|
order.push('stage beforeDraw');
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
layer.add(circle);
|
||||||
|
stage.add(layer);
|
||||||
|
|
||||||
|
|
||||||
|
test(eventNodes.toString() === 'Layer,Stage', 'layer draw event should have fired followed by stage draw event');
|
||||||
|
|
||||||
|
test(savedEvt.node.getNodeType() === 'Layer', 'event object should contain a node property which is Layer');
|
||||||
|
|
||||||
|
test(order.toString() === 'layer beforeDraw,stage beforeDraw,layer draw,stage draw', 'order should be: layer beforeDraw,stage beforeDraw,layer draw,stage draw');
|
||||||
|
|
||||||
|
},
|
||||||
'click mapping': function(containerId) {
|
'click mapping': function(containerId) {
|
||||||
var stage = new Kinetic.Stage({
|
var stage = new Kinetic.Stage({
|
||||||
container: containerId,
|
container: containerId,
|
||||||
|
Reference in New Issue
Block a user