lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-18 09:50:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

stage tweens now work correctly. getChildren() and getLayers() now return a Kinetic.Collection. added toArray() method to Kinetic.Collection

Browse Source
This commit is contained in:
Eric Rowell
2013-05-19 21:07:43 -07:00
parent 056346c14d
commit 7069bf9e0c
8 changed files with 78 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Animation.js
View File

@@ -48,7 +48,9 @@
lays = [];
}
// if passing in an array of Layers
else if (Kinetic.Util._isArray(layers)) {
// NOTE: layers could be an array or Kinetic.Collection. for simplicity, I'm just inspecting
// the length property to check for both cases
else if (layers.length > 0) {
lays = layers;
}
// if passing in a Layer

13
src/Container.js
View File

@@ -1,11 +1,11 @@
(function() {
Kinetic.Util.addMethods(Kinetic.Container, {
_containerInit: function(config) {
this.children = [];
this.children = new Kinetic.Collection();
Kinetic.Node.call(this, config);
},
/**
* get children
* returns a {@link Kinetic.Collection} of direct descendant nodes
* @method
* @memberof Kinetic.Container.prototype
*/
@@ -149,12 +149,11 @@
},
clone: function(obj) {
// call super method
var node = Kinetic.Node.prototype.clone.call(this, obj)
var node = Kinetic.Node.prototype.clone.call(this, obj);
// perform deep clone on containers
for(var key in this.children) {
node.add(this.children[key].clone());
}
this.getChildren().each(function(no) {
node.add(no.clone());
});
return node;
},
/**

4
src/Node.js
View File

@@ -366,7 +366,7 @@
index++;
if(child.nodeType !== SHAPE) {
nodes = nodes.concat(child.getChildren());
nodes = nodes.concat(child.getChildren().toArray());
}
if(child._id === that._id) {
@@ -1701,5 +1701,5 @@
*/
Kinetic.Node.prototype.isVisible = Kinetic.Node.prototype.getVisible;
Kinetic.Collection.mapMethods(['on', 'off']);
Kinetic.Collection.mapMethods(['on', 'off', 'draw']);
})();

2
src/Stage.js
View File

@@ -323,7 +323,7 @@
return null;
},
/**
* get layers
* returns a {@link Kinetic.Collection} of layers
* @method
* @memberof Kinetic.Stage.prototype
*/

11
src/Tween.js
View File

@@ -55,7 +55,7 @@
this.anim = new Kinetic.Animation(function() {
that._onEnterFrame();
}, node.getLayer());
}, node.getLayer() || node.getLayers());
for (key in config) {
if (blacklist[key] === undefined) {
@@ -141,10 +141,11 @@
* @memberof Kinetic.Tween.prototype
*/
reset: function() {
var node = this.node;
this._iterate(function(tween) {
tween.reset();
});
this.node.getLayer().draw();
(node.getLayer() || node.getLayers()).draw();
},
/**
* seek
@@ -153,10 +154,11 @@
* @param {Integer} t time in seconds between 0 and the duration
*/
seek: function(t) {
this.node = node;
this._iterate(function(tween) {
tween.seek(t * 1000);
});
this.node.getLayer().draw();
(node.getLayer() || node.getLayers()).draw();
},
/**
* pause
@@ -174,10 +176,11 @@
* @memberof Kinetic.Tween.prototype
*/
finish: function() {
this.node = node;
this._iterate(function(tween) {
tween.finish();
});
this.node.getLayer().draw();
(node.getLayer() || node.getLayers()).draw();
},
_onEnterFrame: function() {
this._iterate(function(tween) {

12
src/Util.js
View File

@@ -32,6 +32,18 @@
func(this[n], n);
}
};
/**
* convert collection into an array
* @method
* @memberof Kinetic.Collection.prototype
*/
Kinetic.Collection.prototype.toArray = function() {
var arr = [];
for(var n = 0; n < this.length; n++) {
arr.push(this[n]);
}
return arr;
};
Kinetic.Collection.mapMethods = function(arr) {
var leng = arr.length,

6
tests/js/functionalTests.js
View File

@@ -423,12 +423,12 @@ Test.Modules.EVENT = {
layer.on('draw', function(evt) {
savedEvt = evt;
eventNodes.push(this.getNodeType());
eventNodes.push(this.getType());
order.push('layer draw');
});
stage.on('draw', function(evt) {
eventNodes.push(this.getNodeType());
eventNodes.push(this.getType());
order.push('stage draw');
});
@@ -447,7 +447,7 @@ Test.Modules.EVENT = {
// Note: draw events no longer bubble
//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(savedEvt.node.getType() === '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');

53
tests/js/manualTests.js
View File

@@ -1,4 +1,4 @@
Test.Modules.TRANSITION = {
Test.Modules.Tween = {
'!transition position and rotation': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
@@ -213,21 +213,50 @@ Test.Modules.TRANSITION = {
tween.play();
/*
var tween2 = new Kinetic.Tween({
node: greenBox,
duration: 2,
x: 200,
easing: Kinetic.Easings.BounceEaseOut,
});
tween2.play();
*/
document.getElementById(containerId).addEventListener('click', function() {
tween.seek(1.5);
tween.reverse();
});
},
'tween stage': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var greenBox = new Kinetic.Rect({
x: 50,
y: stage.getHeight() / 2 - 25,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
offset: {
x: 50,
y: 25
}
});
layer.add(greenBox);
stage.add(layer);
var tween = new Kinetic.Tween({
node: stage,
duration: 2,
x: 400,
scaleX: 2,
scaleY: 2,
easing: Kinetic.Easings.BounceEaseOut,
yoyo: false,
onFinish: function() {
console.log('finished!')
}
});
tween.play();
}
};