lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 12:34:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

new stage batchDraw() method. draw events are now triggered on drawScene() as well as draw()

Browse Source
This commit is contained in:
Eric Rowell
2013-07-21 23:41:05 -07:00
parent 1d5eff629a
commit ecdd5cc59a
4 changed files with 93 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/Animation.js
View File

@@ -10,7 +10,7 @@
* since the last animation frame. The lastTime property is time in milliseconds that elapsed from the moment the animation started
* to the last animation frame. The time property is the time in milliseconds that ellapsed from the moment the animation started
* to the current animation frame. The frameRate property is the current frame rate in frames / second
* @param {Kinetic.Layer|Array} [layers] layer(s) to be redrawn on each animation frame. Can be a layer, an array of layers, or null.
* @param {Kinetic.Layer|Array} [layers] layer(s) to be redrawn on each animation frame. Can be a layer, an array of layers, or null.
* Not specifying a node will result in no redraw.
* @example
* // move a node to the right at 50 pixels / second<br>
@@ -44,7 +44,7 @@
* @param {Kinetic.Layer|Array} [layers] layer(s) to be redrawn.&nbsp; Can be a layer, an array of layers, or null. Not specifying a node will result in no redraw.
*/
setLayers: function(layers) {
var lays = [];
var lays = [];
// if passing in no layers
if (!layers) {
lays = [];
@@ -86,9 +86,9 @@
// don't add the layer if it already exists
for (n = 0; n < len; n++) {
if (layers[n]._id === layer._id) {
return false;
}
}
return false;
}
}
}
else {
this.layers = [];
@@ -156,7 +156,7 @@
};
Kinetic.Animation._runFrames = function() {
var layerHash = {},
var layerHash = {},
animations = this.animations,
anim, layers, func, n, i, layersLen, layer, key;
/*
@@ -172,7 +172,7 @@
*/
for(n = 0; n < animations.length; n++) {
anim = animations[n];
layers = anim.layers;
layers = anim.layers;
func = anim.func;
anim._updateFrameObject(new Date().getTime());
@@ -215,11 +215,11 @@
}
};
RAF = (function() {
return window.requestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.oRequestAnimationFrame
|| window.msRequestAnimationFrame
return window.requestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.oRequestAnimationFrame
|| window.msRequestAnimationFrame
|| FRAF;
})();
@@ -231,14 +231,14 @@
var raf = Kinetic.DD && Kinetic.DD.isDragging ? FRAF : RAF;
raf(callback);
};
var moveTo = Kinetic.Node.prototype.moveTo;
Kinetic.Node.prototype.moveTo = function(container) {
moveTo.call(this, container);
};
/**
* get batch draw
* batch draw
* @method
* @memberof Kinetic.Layer.prototype
*/
@@ -257,7 +257,18 @@
if (!this.batchAnim.isRunning()) {
this.draw();
this.batchAnim.start();
}
this.batchAnim.start();
}
};
/**
* batch draw
* @method
* @memberof Kinetic.Stage.prototype
*/
Kinetic.Stage.prototype.batchDraw = function() {
this.getChildren().each(function(layer) {
layer.batchDraw();
});
};
})();

8
src/Node.js
View File

@@ -22,8 +22,6 @@
DEG = 'Deg',
ON = 'on',
OFF = 'off',
BEFORE_DRAW = 'beforeDraw',
DRAW = 'draw',
BLACK = 'black',
RGB = 'RGB',
R = 'r',
@@ -1120,14 +1118,8 @@
* the scene renderer
*/
draw: function() {
var evt = {
node: this
};
this._fire(BEFORE_DRAW, evt);
this.drawScene();
this.drawHit();
this._fire(DRAW, evt);
return this;
},
shouldDrawHit: function() {

27
src/Shape.js
View File

@@ -1,4 +1,7 @@
(function() {
var BEFORE_DRAW = 'beforeDraw',
DRAW = 'draw';
function _fillFunc(context) {
context.fill();
}
@@ -198,23 +201,37 @@
drawScene: function(canvas) {
canvas = canvas || this.getLayer().getCanvas();
var drawFunc = this.getDrawFunc(),
var drawFunc = this.getDrawFunc(),
context = canvas.getContext();
if(drawFunc && this.isVisible()) {
context.save();
canvas._applyOpacity(this);
canvas._applyLineJoin(this);
canvas._applyLineJoin(this);
canvas._applyAncestorTransforms(this);
this._fireBeforeDrawEvents();
drawFunc.call(this, canvas);
this._fireDrawEvents();
context.restore();
}
return this;
},
_fireBeforeDrawEvents: function() {
this._fireAndBubble(BEFORE_DRAW, {
node: this
});
},
_fireDrawEvents: function() {
this._fireAndBubble(DRAW, {
node: this
});
},
drawHit: function() {
var attrs = this.getAttrs(),
drawFunc = attrs.drawHitFunc || attrs.drawFunc,
canvas = this.getLayer().hitCanvas,
var attrs = this.getAttrs(),
drawFunc = attrs.drawHitFunc || attrs.drawFunc,
canvas = this.getLayer().hitCanvas,
context = canvas.getContext();
if(drawFunc && this.shouldDrawHit()) {

45
tests/js/unit/animationTests.js
View File

@@ -54,7 +54,7 @@ Test.Modules.ANIMATION = {
anim.stop();
test(a.animations.length === 0, '7should be no animations running');
},
'batch draw': function(containerId) {
'layer batch draw': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@@ -96,5 +96,48 @@ Test.Modules.ANIMATION = {
setTimeout(function() {
layer.batchDraw();
}, 2000);
},
'stage batch draw': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
draws = 0;
layer.on('draw', function() {
//console.log('draw')
draws++;
});
stage.draw();
stage.draw();
stage.draw();
test(draws === 3, 'draw count should be 3');
stage.batchDraw();
stage.batchDraw();
stage.batchDraw();
test(draws !== 6, 'should not be 6 draws');
setTimeout(function() {
stage.batchDraw();
}, 2000);
}
};