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

added some performance tweaks and polished up code here and there

Browse Source
This commit is contained in:
Eric Rowell
2012-07-26 22:58:38 -07:00
parent c26a1ae5d5
commit ce3b98ee9c
15 changed files with 489 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Thorfile
View File

@@ -6,7 +6,7 @@ class Build < Thor
"license.js", "src/Global.js", "src/Transition.js", "src/filters/Grayscale.js",
"src/util/Type.js", "src/util/Canvas.js", "src/util/Class.js", "src/util/Tween.js", "src/util/Transform.js",
"src/Animation.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/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js",
"src/shapes/Rect.js", "src/shapes/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js", "src/shapes/Sprite.js"
]
desc "dev", "Concatenate all the js files into /dist/kinetic-VERSION.js."

288
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: Jul 24 2012
* Date: Jul 26 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*
@@ -1092,7 +1092,7 @@ Kinetic.Animation = {
frame: {
time: 0,
timeDiff: 0,
lastTime: 0
lastTime: new Date().getTime()
},
_addAnimation: function(anim) {
anim.id = this.animIdCounter++;
@@ -1133,16 +1133,10 @@ Kinetic.Animation = {
}
},
_updateFrameObject: function() {
var date = new Date();
var time = date.getTime();
if(this.frame.lastTime === 0) {
this.frame.lastTime = time;
}
else {
this.frame.timeDiff = time - this.frame.lastTime;
this.frame.lastTime = time;
this.frame.time += this.frame.timeDiff;
}
var time = new Date().getTime();
this.frame.timeDiff = time - this.frame.lastTime;
this.frame.lastTime = time;
this.frame.time += this.frame.timeDiff;
},
_animationLoop: function() {
if(this.animations.length > 0) {
@@ -2508,9 +2502,9 @@ Kinetic.Container = Kinetic.Node.extend({
child.parent = this;
this.children.push(child);
var stage = child.getStage();
if(stage === undefined) {
if(!stage) {
var go = Kinetic.Global;
go.tempNodes.push(child);
}
@@ -3318,10 +3312,6 @@ Kinetic.Stage = Kinetic.Container.extend({
* @param {Event} evt
*/
_handleStageEvent: function(evt) {
var date = new Date();
var time = date.getTime();
this.lastEventTime = time;
var go = Kinetic.Global;
if(!evt) {
evt = window.event;
@@ -3395,8 +3385,7 @@ Kinetic.Stage = Kinetic.Container.extend({
_mousemove: function(evt) {
//throttle mousemove
var throttle = this.attrs.throttle;
var date = new Date();
var time = date.getTime();
var time = new Date().getTime();
var timeDiff = time - this.lastEventTime;
var tt = 1000 / throttle;
@@ -3405,6 +3394,7 @@ Kinetic.Stage = Kinetic.Container.extend({
this.mouseUp = false;
this.mouseMove = true;
this._handleStageEvent(evt);
this.lastEventTime = new Date().getTime();
}
// start drag and drop
@@ -3458,8 +3448,7 @@ Kinetic.Stage = Kinetic.Container.extend({
//throttle touchmove
var that = this;
var throttle = this.attrs.throttle;
var date = new Date();
var time = date.getTime();
var time = new Date().getTime();
var timeDiff = time - this.lastEventTime;
var tt = 1000 / throttle;
@@ -3468,6 +3457,7 @@ Kinetic.Stage = Kinetic.Container.extend({
that.touchEnd = false;
that.touchMove = true;
that._handleStageEvent(evt);
this.lastEventTime = new Date().getTime();
}
// start drag and drop
@@ -3811,8 +3801,7 @@ Kinetic.Layer = Kinetic.Container.extend({
*/
draw: function(canvas) {
var throttle = this.attrs.throttle;
var date = new Date();
var time = date.getTime();
var time = new Date().getTime();
var timeDiff = time - this.lastDrawTime;
var tt = 1000 / throttle;
@@ -3923,8 +3912,7 @@ Kinetic.Layer = Kinetic.Container.extend({
canvas = this.getCanvas();
}
var date = new Date();
var time = date.getTime();
var time = new Date().getTime();
this.lastDrawTime = time;
// before draw handler
@@ -4137,21 +4125,16 @@ Kinetic.Shape = Kinetic.Node.extend({
var go = Kinetic.Global;
var appliedShadow = false;
if(this.attrs.stroke || this.attrs.strokeWidth) {
context.save();
if(this.attrs.shadow && !this.appliedShadow) {
appliedShadow = this._applyShadow(context);
}
var stroke = this.attrs.stroke ? this.attrs.stroke : 'black';
var strokeWidth = this.attrs.strokeWidth ? this.attrs.strokeWidth : 2;
context.lineWidth = strokeWidth;
context.strokeStyle = stroke;
context.stroke(context);
context.restore();
context.save();
if(this.attrs.shadow && !this.appliedShadow) {
appliedShadow = this._applyShadow(context);
}
context.lineWidth = this.attrs.strokeWidth;
context.strokeStyle = this.attrs.stroke;
context.stroke(context);
context.restore();
if(appliedShadow) {
this.stroke(context);
}
@@ -4176,18 +4159,13 @@ Kinetic.Shape = Kinetic.Node.extend({
var f = null;
// color fill
if( typeof fill == 'string') {
f = this.attrs.fill;
context.fillStyle = f;
if(Kinetic.Type._isString(fill)) {
context.fillStyle = fill;
context.fill(context);
}
// pattern
else if(fill.image) {
var repeat = !fill.repeat ? 'repeat' : fill.repeat;
f = context.createPattern(fill.image, repeat);
context.save();
if(fill.scale) {
context.scale(fill.scale.x, fill.scale.y);
}
@@ -4195,9 +4173,8 @@ Kinetic.Shape = Kinetic.Node.extend({
context.translate(fill.offset.x, fill.offset.y);
}
context.fillStyle = f;
context.fillStyle = context.createPattern(fill.image, repeat);
context.fill(context);
context.restore();
}
// linear gradient
else if(!s.radius && !e.radius) {
@@ -4208,8 +4185,7 @@ Kinetic.Shape = Kinetic.Node.extend({
for(var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]);
}
f = grd;
context.fillStyle = f;
context.fillStyle = grd;
context.fill(context);
}
// radial gradient
@@ -4221,13 +4197,11 @@ Kinetic.Shape = Kinetic.Node.extend({
for(var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]);
}
f = grd;
context.fillStyle = f;
context.fillStyle = grd;
context.fill(context);
}
else {
f = 'black';
context.fillStyle = f;
context.fillStyle = 'black';
context.fill(context);
}
context.restore();
@@ -4524,35 +4498,34 @@ Kinetic.Rect = Kinetic.Shape.extend({
height: 0,
cornerRadius: 0
});
this.shapeType = "Rect";
config.drawFunc = function(context) {
context.beginPath();
if(this.attrs.cornerRadius === 0) {
// simple rect - don't bother doing all that complicated maths stuff.
context.rect(0, 0, this.attrs.width, this.attrs.height);
}
else {
// arcTo would be nicer, but browser support is patchy (Opera)
context.moveTo(this.attrs.cornerRadius, 0);
context.lineTo(this.attrs.width - this.attrs.cornerRadius, 0);
context.arc(this.attrs.width - this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI * 3 / 2, 0, false);
context.lineTo(this.attrs.width, this.attrs.height - this.attrs.cornerRadius);
context.arc(this.attrs.width - this.attrs.cornerRadius, this.attrs.height - this.attrs.cornerRadius, this.attrs.cornerRadius, 0, Math.PI / 2, false);
context.lineTo(this.attrs.cornerRadius, this.attrs.height);
context.arc(this.attrs.cornerRadius, this.attrs.height - this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI / 2, Math.PI, false);
context.lineTo(0, this.attrs.cornerRadius);
context.arc(this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI, Math.PI * 3 / 2, false);
}
context.closePath();
this.fill(context);
this.stroke(context);
};
config.drawFunc = this.drawFunc;
// call super constructor
this._super(config);
},
drawFunc: function(context) {
context.beginPath();
if(this.attrs.cornerRadius === 0) {
// simple rect - don't bother doing all that complicated maths stuff.
context.rect(0, 0, this.attrs.width, this.attrs.height);
}
else {
// arcTo would be nicer, but browser support is patchy (Opera)
context.moveTo(this.attrs.cornerRadius, 0);
context.lineTo(this.attrs.width - this.attrs.cornerRadius, 0);
context.arc(this.attrs.width - this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI * 3 / 2, 0, false);
context.lineTo(this.attrs.width, this.attrs.height - this.attrs.cornerRadius);
context.arc(this.attrs.width - this.attrs.cornerRadius, this.attrs.height - this.attrs.cornerRadius, this.attrs.cornerRadius, 0, Math.PI / 2, false);
context.lineTo(this.attrs.cornerRadius, this.attrs.height);
context.arc(this.attrs.cornerRadius, this.attrs.height - this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI / 2, Math.PI, false);
context.lineTo(0, this.attrs.cornerRadius);
context.arc(this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI, Math.PI * 3 / 2, false);
}
context.closePath();
this.fill(context);
this.stroke(context);
},
/**
* set width and height
* @name setSize
@@ -5461,3 +5434,160 @@ Kinetic.Node.addGettersSetters(Kinetic.Line, ['dashArray', 'lineCap', 'points'])
* @name getPoints
* @methodOf Kinetic.Line.prototype
*/
///////////////////////////////////////////////////////////////////////
// Sprite
///////////////////////////////////////////////////////////////////////
/**
* Sprite constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Sprite = Kinetic.Shape.extend({
init: function(config) {
this.setDefaultAttrs({
index: 0,
frameRate: 17
});
config.drawFunc = function(context) {
if(!!this.attrs.image) {
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();
this.drawImage(context, this.attrs.image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height);
}
};
// call super constructor
this._super(config);
var that = this;
this.on('animationChange.kinetic', function() {
// reset index when animation changes
that.setIndex(0);
});
},
/**
* start sprite animation
* @name start
* @methodOf Kinetic.Sprite.prototype
*/
start: function() {
var that = this;
var layer = this.getLayer();
var ka = Kinetic.Animation;
// if sprite already has an animation, remove it
if(this.anim) {
ka._removeAnimation(this.anim);
this.anim = null;
}
/*
* animation object has no executable function because
* the updates are done with a fixed FPS with the setInterval
* below. The anim object only needs the layer reference for
* redraw
*/
this.anim = {
node: layer
};
/*
* adding the animation with the addAnimation
* method auto generates an id
*/
ka._addAnimation(this.anim);
this.interval = setInterval(function() {
var index = that.attrs.index;
that._updateIndex();
if(that.afterFrameFunc && index === that.afterFrameIndex) {
that.afterFrameFunc();
}
}, 1000 / this.attrs.frameRate);
ka._handleAnimation();
},
/**
* stop sprite animation
* @name stop
* @methodOf Kinetic.Sprite.prototype
*/
stop: function() {
var ka = Kinetic.Animation;
if(this.anim) {
ka._removeAnimation(this.anim);
this.anim = null;
}
clearInterval(this.interval);
},
/**
* set after frame event handler
* @name afterFrame
* @methodOf Kinetic.Sprite.prototype
* @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;
},
_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;
}
}
});
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Sprite, ['animation', 'animations', 'index']);
/**
* set animation key
* @name setAnimation
* @methodOf Kinetic.Sprite.prototype
* @param {String} anim animation key
*/
/**
* set animations obect
* @name setAnimations
* @methodOf Kinetic.Sprite.prototype
* @param {Object} animations
*/
/**
* set animation frame index
* @name setIndex
* @methodOf Kinetic.Sprite.prototype
* @param {Integer} index frame index
*/
/**
* get animation key
* @name getAnimation
* @methodOf Kinetic.Sprite.prototype
*/
/**
* get animations object
* @name getAnimations
* @methodOf Kinetic.Sprite.prototype
*/
/**
* get animation frame index
* @name getIndex
* @methodOf Kinetic.Sprite.prototype
*/

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

File diff suppressed because one or more lines are too long

16
src/Animation.js
View File

@@ -8,7 +8,7 @@ Kinetic.Animation = {
frame: {
time: 0,
timeDiff: 0,
lastTime: 0
lastTime: new Date().getTime()
},
_addAnimation: function(anim) {
anim.id = this.animIdCounter++;
@@ -49,16 +49,10 @@ Kinetic.Animation = {
}
},
_updateFrameObject: function() {
var date = new Date();
var time = date.getTime();
if(this.frame.lastTime === 0) {
this.frame.lastTime = time;
}
else {
this.frame.timeDiff = time - this.frame.lastTime;
this.frame.lastTime = time;
this.frame.time += this.frame.timeDiff;
}
var time = new Date().getTime();
this.frame.timeDiff = time - this.frame.lastTime;
this.frame.lastTime = time;
this.frame.time += this.frame.timeDiff;
},
_animationLoop: function() {
if(this.animations.length > 0) {

4
src/Container.js
View File

@@ -65,9 +65,9 @@ Kinetic.Container = Kinetic.Node.extend({
child.parent = this;
this.children.push(child);
var stage = child.getStage();
if(stage === undefined) {
if(!stage) {
var go = Kinetic.Global;
go.tempNodes.push(child);
}

6
src/Layer.js
View File

@@ -61,8 +61,7 @@ Kinetic.Layer = Kinetic.Container.extend({
*/
draw: function(canvas) {
var throttle = this.attrs.throttle;
var date = new Date();
var time = date.getTime();
var time = new Date().getTime();
var timeDiff = time - this.lastDrawTime;
var tt = 1000 / throttle;
@@ -173,8 +172,7 @@ Kinetic.Layer = Kinetic.Container.extend({
canvas = this.getCanvas();
}
var date = new Date();
var time = date.getTime();
var time = new Date().getTime();
this.lastDrawTime = time;
// before draw handler

42
src/Shape.js
View File

@@ -99,21 +99,16 @@ Kinetic.Shape = Kinetic.Node.extend({
var go = Kinetic.Global;
var appliedShadow = false;
if(this.attrs.stroke || this.attrs.strokeWidth) {
context.save();
if(this.attrs.shadow && !this.appliedShadow) {
appliedShadow = this._applyShadow(context);
}
var stroke = this.attrs.stroke ? this.attrs.stroke : 'black';
var strokeWidth = this.attrs.strokeWidth ? this.attrs.strokeWidth : 2;
context.lineWidth = strokeWidth;
context.strokeStyle = stroke;
context.stroke(context);
context.restore();
context.save();
if(this.attrs.shadow && !this.appliedShadow) {
appliedShadow = this._applyShadow(context);
}
context.lineWidth = this.attrs.strokeWidth;
context.strokeStyle = this.attrs.stroke;
context.stroke(context);
context.restore();
if(appliedShadow) {
this.stroke(context);
}
@@ -138,18 +133,13 @@ Kinetic.Shape = Kinetic.Node.extend({
var f = null;
// color fill
if( typeof fill == 'string') {
f = this.attrs.fill;
context.fillStyle = f;
if(Kinetic.Type._isString(fill)) {
context.fillStyle = fill;
context.fill(context);
}
// pattern
else if(fill.image) {
var repeat = !fill.repeat ? 'repeat' : fill.repeat;
f = context.createPattern(fill.image, repeat);
context.save();
if(fill.scale) {
context.scale(fill.scale.x, fill.scale.y);
}
@@ -157,9 +147,8 @@ Kinetic.Shape = Kinetic.Node.extend({
context.translate(fill.offset.x, fill.offset.y);
}
context.fillStyle = f;
context.fillStyle = context.createPattern(fill.image, repeat);
context.fill(context);
context.restore();
}
// linear gradient
else if(!s.radius && !e.radius) {
@@ -170,8 +159,7 @@ Kinetic.Shape = Kinetic.Node.extend({
for(var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]);
}
f = grd;
context.fillStyle = f;
context.fillStyle = grd;
context.fill(context);
}
// radial gradient
@@ -183,13 +171,11 @@ Kinetic.Shape = Kinetic.Node.extend({
for(var n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n], colorStops[n + 1]);
}
f = grd;
context.fillStyle = f;
context.fillStyle = grd;
context.fill(context);
}
else {
f = 'black';
context.fillStyle = f;
context.fillStyle = 'black';
context.fill(context);
}
context.restore();

12
src/Stage.js
View File

@@ -614,10 +614,6 @@ Kinetic.Stage = Kinetic.Container.extend({
* @param {Event} evt
*/
_handleStageEvent: function(evt) {
var date = new Date();
var time = date.getTime();
this.lastEventTime = time;
var go = Kinetic.Global;
if(!evt) {
evt = window.event;
@@ -691,8 +687,7 @@ Kinetic.Stage = Kinetic.Container.extend({
_mousemove: function(evt) {
//throttle mousemove
var throttle = this.attrs.throttle;
var date = new Date();
var time = date.getTime();
var time = new Date().getTime();
var timeDiff = time - this.lastEventTime;
var tt = 1000 / throttle;
@@ -701,6 +696,7 @@ Kinetic.Stage = Kinetic.Container.extend({
this.mouseUp = false;
this.mouseMove = true;
this._handleStageEvent(evt);
this.lastEventTime = new Date().getTime();
}
// start drag and drop
@@ -754,8 +750,7 @@ Kinetic.Stage = Kinetic.Container.extend({
//throttle touchmove
var that = this;
var throttle = this.attrs.throttle;
var date = new Date();
var time = date.getTime();
var time = new Date().getTime();
var timeDiff = time - this.lastEventTime;
var tt = 1000 / throttle;
@@ -764,6 +759,7 @@ Kinetic.Stage = Kinetic.Container.extend({
that.touchEnd = false;
that.touchMove = true;
that._handleStageEvent(evt);
this.lastEventTime = new Date().getTime();
}
// start drag and drop

49
src/shapes/Rect.js
View File

@@ -14,35 +14,34 @@ Kinetic.Rect = Kinetic.Shape.extend({
height: 0,
cornerRadius: 0
});
this.shapeType = "Rect";
config.drawFunc = function(context) {
context.beginPath();
if(this.attrs.cornerRadius === 0) {
// simple rect - don't bother doing all that complicated maths stuff.
context.rect(0, 0, this.attrs.width, this.attrs.height);
}
else {
// arcTo would be nicer, but browser support is patchy (Opera)
context.moveTo(this.attrs.cornerRadius, 0);
context.lineTo(this.attrs.width - this.attrs.cornerRadius, 0);
context.arc(this.attrs.width - this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI * 3 / 2, 0, false);
context.lineTo(this.attrs.width, this.attrs.height - this.attrs.cornerRadius);
context.arc(this.attrs.width - this.attrs.cornerRadius, this.attrs.height - this.attrs.cornerRadius, this.attrs.cornerRadius, 0, Math.PI / 2, false);
context.lineTo(this.attrs.cornerRadius, this.attrs.height);
context.arc(this.attrs.cornerRadius, this.attrs.height - this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI / 2, Math.PI, false);
context.lineTo(0, this.attrs.cornerRadius);
context.arc(this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI, Math.PI * 3 / 2, false);
}
context.closePath();
this.fill(context);
this.stroke(context);
};
config.drawFunc = this.drawFunc;
// call super constructor
this._super(config);
},
drawFunc: function(context) {
context.beginPath();
if(this.attrs.cornerRadius === 0) {
// simple rect - don't bother doing all that complicated maths stuff.
context.rect(0, 0, this.attrs.width, this.attrs.height);
}
else {
// arcTo would be nicer, but browser support is patchy (Opera)
context.moveTo(this.attrs.cornerRadius, 0);
context.lineTo(this.attrs.width - this.attrs.cornerRadius, 0);
context.arc(this.attrs.width - this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI * 3 / 2, 0, false);
context.lineTo(this.attrs.width, this.attrs.height - this.attrs.cornerRadius);
context.arc(this.attrs.width - this.attrs.cornerRadius, this.attrs.height - this.attrs.cornerRadius, this.attrs.cornerRadius, 0, Math.PI / 2, false);
context.lineTo(this.attrs.cornerRadius, this.attrs.height);
context.arc(this.attrs.cornerRadius, this.attrs.height - this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI / 2, Math.PI, false);
context.lineTo(0, this.attrs.cornerRadius);
context.arc(this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI, Math.PI * 3 / 2, false);
}
context.closePath();
this.fill(context);
this.stroke(context);
},
/**
* set width and height
* @name setSize

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

@@ -0,0 +1,157 @@
///////////////////////////////////////////////////////////////////////
// Sprite
///////////////////////////////////////////////////////////////////////
/**
* Sprite constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Sprite = Kinetic.Shape.extend({
init: function(config) {
this.setDefaultAttrs({
index: 0,
frameRate: 17
});
config.drawFunc = function(context) {
if(!!this.attrs.image) {
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();
this.drawImage(context, this.attrs.image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height);
}
};
// call super constructor
this._super(config);
var that = this;
this.on('animationChange.kinetic', function() {
// reset index when animation changes
that.setIndex(0);
});
},
/**
* start sprite animation
* @name start
* @methodOf Kinetic.Sprite.prototype
*/
start: function() {
var that = this;
var layer = this.getLayer();
var ka = Kinetic.Animation;
// if sprite already has an animation, remove it
if(this.anim) {
ka._removeAnimation(this.anim);
this.anim = null;
}
/*
* animation object has no executable function because
* the updates are done with a fixed FPS with the setInterval
* below. The anim object only needs the layer reference for
* redraw
*/
this.anim = {
node: layer
};
/*
* adding the animation with the addAnimation
* method auto generates an id
*/
ka._addAnimation(this.anim);
this.interval = setInterval(function() {
var index = that.attrs.index;
that._updateIndex();
if(that.afterFrameFunc && index === that.afterFrameIndex) {
that.afterFrameFunc();
}
}, 1000 / this.attrs.frameRate);
ka._handleAnimation();
},
/**
* stop sprite animation
* @name stop
* @methodOf Kinetic.Sprite.prototype
*/
stop: function() {
var ka = Kinetic.Animation;
if(this.anim) {
ka._removeAnimation(this.anim);
this.anim = null;
}
clearInterval(this.interval);
},
/**
* set after frame event handler
* @name afterFrame
* @methodOf Kinetic.Sprite.prototype
* @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;
},
_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;
}
}
});
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Sprite, ['animation', 'animations', 'index']);
/**
* set animation key
* @name setAnimation
* @methodOf Kinetic.Sprite.prototype
* @param {String} anim animation key
*/
/**
* set animations obect
* @name setAnimations
* @methodOf Kinetic.Sprite.prototype
* @param {Object} animations
*/
/**
* set animation frame index
* @name setIndex
* @methodOf Kinetic.Sprite.prototype
* @param {Integer} index frame index
*/
/**
* get animation key
* @name getAnimation
* @methodOf Kinetic.Sprite.prototype
*/
/**
* get animations object
* @name getAnimations
* @methodOf Kinetic.Sprite.prototype
*/
/**
* get animation frame index
* @name getIndex
* @methodOf Kinetic.Sprite.prototype
*/

1
tests/html/manualTests.html
View File

@@ -6,7 +6,6 @@
<!-- plugins -->
<script src="../../src/plugins/shapes/Path.js"></script>
<script src="../../src/plugins/shapes/RegularPolygon.js"></script>
<script src="../../src/plugins/shapes/Sprite.js"></script>
<script src="../../src/plugins/shapes/Star.js"></script>
<script src="../../src/plugins/shapes/TextPath.js"></script>
<!-- assets -->

1
tests/html/performanceTests.html
View File

@@ -6,7 +6,6 @@
<!-- plugins -->
<script src="../../src/plugins/shapes/Path.js"></script>
<script src="../../src/plugins/shapes/RegularPolygon.js"></script>
<script src="../../src/plugins/shapes/Sprite.js"></script>
<script src="../../src/plugins/shapes/Star.js"></script>
<script src="../../src/plugins/shapes/TextPath.js"></script>
<!-- assets -->

1
tests/html/unitTests.html
View File

@@ -6,7 +6,6 @@
<!-- plugins -->
<script src="../../src/plugins/shapes/Path.js"></script>
<script src="../../src/plugins/shapes/RegularPolygon.js"></script>
<script src="../../src/plugins/shapes/Sprite.js"></script>
<script src="../../src/plugins/shapes/Star.js"></script>
<script src="../../src/plugins/shapes/TextPath.js"></script>
<!-- assets -->

2
tests/js/manualTests.js
View File

@@ -327,7 +327,7 @@ Test.prototype.tests = {
};
imageObj.src = '../assets/darth-vader.jpg';
},
'EVENTS - star pixel detection': function(containerId) {
'*EVENTS - star pixel detection': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,

65
tests/js/performanceTests.js
View File

@@ -1,4 +1,69 @@
Test.prototype.tests = {
'DRAWING - draw rect': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
startTimer();
console.profile();
for(var n = 0; n < 1000; n++) {
var rect = new Kinetic.Rect({
x: 10,
y: 10,
width: 100,
height: 100,
fill: 'yellow',
stroke: 'blue'
});
layer.add(rect);
}
stage.add(layer);
console.profileEnd();
endTimer('add and draw 1,000 Kinetic rectangles');
},
'*ANIMATION - test animation frame rate': 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);
var amplitude = 150;
var period = 1000;
// in ms
var centerX = stage.getWidth() / 2 - 100 / 2;
stage.onFrame(function(frame) {
rect.attrs.x = amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX;
layer.draw();
//console.log(frame.timeDiff)
});
stage.start();
setTimeout(function() {
//stage.stop();
}, 1000)
},
'DRAWING - draw rect vs image from image data': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,