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

added new Kinetic.Sprite shape that enables you to easily add animated sprites to the stage

Browse Source
This commit is contained in:
Eric Rowell 2012-05-02 00:35:32 -07:00
parent 7bcd34ec47
commit 3585e000b6
7 changed files with 294 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Thorfile
View File

@ -5,7 +5,7 @@ class Build < Thor
FILES = [
"license.js", "src/GlobalObject.js", "src/Node.js", "src/Container.js", "src/Stage.js",
"src/Layer.js", "src/Group.js", "src/Shape.js", "src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Image.js",
"src/shapes/Polygon.js", "src/shapes/RegularPolygon.js", "src/shapes/Star.js", "src/shapes/Text.js",
"src/shapes/Sprite.js", "src/shapes/Polygon.js", "src/shapes/RegularPolygon.js", "src/shapes/Star.js", "src/shapes/Text.js",
"src/shapes/Line.js", "src/util/Transform.js", "src/util/Transition.js"
]

94
dist/kinetic-core.js vendored
View File

@ -3,7 +3,7 @@
* http://www.kineticjs.com/
* Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses.
* Date: Apr 28 2012
* Date: May 02 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*
@ -2907,6 +2907,98 @@ Kinetic.Image.prototype = {
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Image, Kinetic.Shape);
///////////////////////////////////////////////////////////////////////
// Sprite
///////////////////////////////////////////////////////////////////////
/**
* Sprite constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Sprite = function(config) {
this.setDefaultAttrs({
index: 0,
frameRate: 17
});
config.drawFunc = function() {
if(this.image !== undefined) {
var context = this.getContext();
var anim = this.attrs.animation;
var index = this.attrs.index;
var f = this.attrs.animations[anim][index];
context.beginPath();
context.rect(0, 0, f.width, f.height);
context.closePath();
context.drawImage(this.image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height);
}
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
};
/*
* Sprite methods
*/
Kinetic.Sprite.prototype = {
/**
* start sprite animation
*/
start: function() {
var that = this;
var layer = this.getLayer();
this.interval = setInterval(function() {
that._updateIndex();
layer.draw();
if(that.afterFrameFunc && that.attrs.index === that.afterFrameIndex) {
that.afterFrameFunc();
}
}, 1000 / this.attrs.frameRate)
},
/**
* stop sprite animation
*/
stop: function() {
clearInterval(this.interval);
},
/**
* set after frame event handler
* @param {Integer} index frame index
* @param {Function} func function to be executed after frame has been drawn
*/
afterFrame: function(index, func) {
this.afterFrameIndex = index;
this.afterFrameFunc = func;
},
/**
* set animation key
* @param {String} anim animation key
*/
setAnimation: function(anim) {
this.attrs.animation = anim;
},
/**
* set animation frame index
* @param {Integer} index frame index
*/
setIndex: function(index) {
this.attrs.index = index;
},
_updateIndex: function() {
var i = this.attrs.index;
var a = this.attrs.animation;
if(i < this.attrs.animations[a].length - 1) {
this.attrs.index++;
}
else {
this.attrs.index = 0;
}
}
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Sprite, Kinetic.Shape);
///////////////////////////////////////////////////////////////////////
// Polygon
///////////////////////////////////////////////////////////////////////

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

File diff suppressed because one or more lines are too long

91
src/shapes/Sprite.js Normal file
View File

@ -0,0 +1,91 @@
///////////////////////////////////////////////////////////////////////
// Sprite
///////////////////////////////////////////////////////////////////////
/**
* Sprite constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Sprite = function(config) {
this.setDefaultAttrs({
index: 0,
frameRate: 17
});
config.drawFunc = function() {
if(this.image !== undefined) {
var context = this.getContext();
var anim = this.attrs.animation;
var index = this.attrs.index;
var f = this.attrs.animations[anim][index];
context.beginPath();
context.rect(0, 0, f.width, f.height);
context.closePath();
context.drawImage(this.image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height);
}
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
};
/*
* Sprite methods
*/
Kinetic.Sprite.prototype = {
/**
* start sprite animation
*/
start: function() {
var that = this;
var layer = this.getLayer();
this.interval = setInterval(function() {
that._updateIndex();
layer.draw();
if(that.afterFrameFunc && that.attrs.index === that.afterFrameIndex) {
that.afterFrameFunc();
}
}, 1000 / this.attrs.frameRate)
},
/**
* stop sprite animation
*/
stop: function() {
clearInterval(this.interval);
},
/**
* set after frame event handler
* @param {Integer} index frame index
* @param {Function} func function to be executed after frame has been drawn
*/
afterFrame: function(index, func) {
this.afterFrameIndex = index;
this.afterFrameFunc = func;
},
/**
* set animation key
* @param {String} anim animation key
*/
setAnimation: function(anim) {
this.attrs.animation = anim;
},
/**
* set animation frame index
* @param {Integer} index frame index
*/
setIndex: function(index) {
this.attrs.index = index;
},
_updateIndex: function() {
var i = this.attrs.index;
var a = this.attrs.animation;
if(i < this.attrs.animations[a].length - 1) {
this.attrs.index++;
}
else {
this.attrs.index = 0;
}
}
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Sprite, Kinetic.Shape);

2
tests/js/Test.js
View File

@ -10,7 +10,7 @@ function log(message) {
* Test constructor
*/
function Test() {
this.testOnly = '';
this.testOnly = 'SHAPES - add sprite';
this.counter = 0;
}
/**

105
tests/js/unitTests.js
View File

@ -900,6 +900,111 @@ Test.prototype.tests = {
};
imageObj.src = '../darth-vader.jpg';
},
'SHAPES - add sprite': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
sprite = new Kinetic.Sprite({
x: 200,
y: 60,
image: imageObj,
animation: 'standing',
animations: {
standing: [{
x: 0,
y: 0,
width: 49,
height: 109
}, {
x: 52,
y: 0,
width: 49,
height: 109
}, {
x: 105,
y: 0,
width: 49,
height: 109
}, {
x: 158,
y: 0,
width: 49,
height: 109
}, {
x: 210,
y: 0,
width: 49,
height: 109
}, {
x: 262,
y: 0,
width: 49,
height: 109
}],
kicking: [{
x: 0,
y: 109,
width: 45,
height: 98
}, {
x: 45,
y: 109,
width: 45,
height: 98
}, {
x: 95,
y: 109,
width: 63,
height: 98
}, {
x: 156,
y: 109,
width: 70,
height: 98
}, {
x: 229,
y: 109,
width: 60,
height: 98
}, {
x: 287,
y: 109,
width: 41,
height: 98
}]
},
index: 0,
frameRate: 10,
draggable: true
});
layer.add(sprite);
stage.add(layer);
sprite.start();
// kick once
setTimeout(function() {
sprite.setIndex(0);
sprite.setAnimation('kicking');
sprite.afterFrame(0, function() {
sprite.setAnimation('standing');
});
}, 2000);
setTimeout(function() {
//sprite.start();
}, 3000);
};
imageObj.src = '../scorpion-sprite.png';
},
'STAGE - serialize stage with an image': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {

BIN
tests/scorpion-sprite.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB