2012-03-07 13:45:48 +08:00
|
|
|
///////////////////////////////////////////////////////////////////////
|
|
|
|
// Global Object
|
|
|
|
///////////////////////////////////////////////////////////////////////
|
|
|
|
/**
|
|
|
|
* Kinetic Namespace
|
|
|
|
* @namespace
|
|
|
|
*/
|
|
|
|
var Kinetic = {};
|
|
|
|
/**
|
|
|
|
* Kinetic Global Object
|
|
|
|
* @property {Object} GlobalObjet
|
|
|
|
*/
|
|
|
|
Kinetic.GlobalObject = {
|
|
|
|
stages: [],
|
|
|
|
idCounter: 0,
|
2012-04-09 02:01:31 +08:00
|
|
|
tempNodes: [],
|
2012-04-03 12:03:59 +08:00
|
|
|
animations: [],
|
|
|
|
animIdCounter: 0,
|
2012-05-04 03:05:54 +08:00
|
|
|
animRunning: false,
|
2012-04-15 01:04:17 +08:00
|
|
|
maxDragTimeInterval: 20,
|
2012-03-07 13:45:48 +08:00
|
|
|
frame: {
|
|
|
|
time: 0,
|
|
|
|
timeDiff: 0,
|
|
|
|
lastTime: 0
|
|
|
|
},
|
|
|
|
drag: {
|
|
|
|
moving: false,
|
|
|
|
node: undefined,
|
|
|
|
offset: {
|
|
|
|
x: 0,
|
|
|
|
y: 0
|
2012-04-13 12:33:40 +08:00
|
|
|
},
|
|
|
|
lastDrawTime: 0
|
2012-03-07 13:45:48 +08:00
|
|
|
},
|
|
|
|
extend: function(obj1, obj2) {
|
|
|
|
for(var key in obj2.prototype) {
|
2012-03-11 08:52:16 +08:00
|
|
|
if(obj2.prototype.hasOwnProperty(key) && obj1.prototype[key] === undefined) {
|
2012-03-07 13:45:48 +08:00
|
|
|
obj1.prototype[key] = obj2.prototype[key];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
2012-06-11 04:07:09 +08:00
|
|
|
addSetters: function(constructor, arr) {
|
|
|
|
for(var n = 0; n < arr.length; n++) {
|
|
|
|
var attr = arr[n];
|
|
|
|
this._addSetter(constructor, attr);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
addGetters: function(constructor, arr) {
|
|
|
|
for(var n = 0; n < arr.length; n++) {
|
|
|
|
var attr = arr[n];
|
|
|
|
this._addGetter(constructor, attr);
|
|
|
|
}
|
|
|
|
},
|
2012-04-09 02:01:31 +08:00
|
|
|
_pullNodes: function(stage) {
|
2012-04-29 02:41:58 +08:00
|
|
|
var tempNodes = this.tempNodes;
|
2012-04-09 02:01:31 +08:00
|
|
|
for(var n = 0; n < tempNodes.length; n++) {
|
|
|
|
var node = tempNodes[n];
|
|
|
|
if(node.getStage() !== undefined && node.getStage()._id === stage._id) {
|
|
|
|
stage._addId(node);
|
|
|
|
stage._addName(node);
|
2012-04-29 02:41:58 +08:00
|
|
|
this.tempNodes.splice(n, 1);
|
2012-04-09 02:01:31 +08:00
|
|
|
n -= 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
2012-04-29 08:45:13 +08:00
|
|
|
/*
|
|
|
|
* animation support
|
|
|
|
*/
|
|
|
|
_addAnimation: function(anim) {
|
|
|
|
anim.id = this.animIdCounter++;
|
|
|
|
this.animations.push(anim);
|
|
|
|
},
|
|
|
|
_removeAnimation: function(anim) {
|
|
|
|
var id = anim.id;
|
|
|
|
var animations = this.animations;
|
|
|
|
for(var n = 0; n < animations.length; n++) {
|
|
|
|
if(animations[n].id === id) {
|
|
|
|
this.animations.splice(n, 1);
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
2012-03-07 13:45:48 +08:00
|
|
|
_runFrames: function() {
|
2012-04-04 14:00:35 +08:00
|
|
|
var nodes = {};
|
2012-04-03 12:03:59 +08:00
|
|
|
for(var n = 0; n < this.animations.length; n++) {
|
2012-04-03 13:54:05 +08:00
|
|
|
var anim = this.animations[n];
|
2012-04-09 02:01:31 +08:00
|
|
|
if(anim.node && anim.node._id !== undefined) {
|
|
|
|
nodes[anim.node._id] = anim.node;
|
2012-04-03 14:38:14 +08:00
|
|
|
}
|
2012-04-03 13:54:05 +08:00
|
|
|
anim.func(this.frame);
|
2012-04-03 12:03:59 +08:00
|
|
|
}
|
2012-03-13 13:41:09 +08:00
|
|
|
|
2012-04-04 14:00:35 +08:00
|
|
|
for(var key in nodes) {
|
|
|
|
nodes[key].draw();
|
2012-04-03 13:54:05 +08:00
|
|
|
}
|
2012-03-07 13:45:48 +08:00
|
|
|
},
|
|
|
|
_updateFrameObject: function() {
|
|
|
|
var date = new Date();
|
|
|
|
var time = date.getTime();
|
|
|
|
if(this.frame.lastTime === 0) {
|
|
|
|
this.frame.lastTime = time;
|
2012-03-14 12:16:25 +08:00
|
|
|
}
|
|
|
|
else {
|
2012-03-07 13:45:48 +08:00
|
|
|
this.frame.timeDiff = time - this.frame.lastTime;
|
|
|
|
this.frame.lastTime = time;
|
|
|
|
this.frame.time += this.frame.timeDiff;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
_animationLoop: function() {
|
2012-04-03 12:03:59 +08:00
|
|
|
if(this.animations.length > 0) {
|
2012-03-07 13:45:48 +08:00
|
|
|
this._updateFrameObject();
|
|
|
|
this._runFrames();
|
|
|
|
var that = this;
|
|
|
|
requestAnimFrame(function() {
|
|
|
|
that._animationLoop();
|
|
|
|
});
|
|
|
|
}
|
2012-04-03 12:03:59 +08:00
|
|
|
else {
|
2012-05-04 03:05:54 +08:00
|
|
|
this.animRunning = false;
|
2012-04-03 12:03:59 +08:00
|
|
|
this.frame.lastTime = 0;
|
|
|
|
}
|
2012-03-07 13:45:48 +08:00
|
|
|
},
|
|
|
|
_handleAnimation: function() {
|
|
|
|
var that = this;
|
2012-05-04 03:05:54 +08:00
|
|
|
if(!this.animRunning) {
|
|
|
|
this.animRunning = true;
|
2012-03-07 13:45:48 +08:00
|
|
|
that._animationLoop();
|
2012-03-14 12:16:25 +08:00
|
|
|
}
|
2012-04-03 12:03:59 +08:00
|
|
|
else {
|
|
|
|
this.frame.lastTime = 0;
|
|
|
|
}
|
2012-04-28 10:42:04 +08:00
|
|
|
},
|
2012-04-29 08:45:13 +08:00
|
|
|
/*
|
2012-05-27 09:31:13 +08:00
|
|
|
* cherry-picked and modified utilities from underscore.js
|
2012-04-29 08:45:13 +08:00
|
|
|
*/
|
2012-04-28 10:42:04 +08:00
|
|
|
_isElement: function(obj) {
|
|
|
|
return !!(obj && obj.nodeType == 1);
|
|
|
|
},
|
|
|
|
_isFunction: function(obj) {
|
|
|
|
return !!(obj && obj.constructor && obj.call && obj.apply);
|
2012-04-28 14:57:01 +08:00
|
|
|
},
|
2012-05-09 13:11:37 +08:00
|
|
|
_isArray: function(obj) {
|
2012-06-21 03:55:34 +08:00
|
|
|
return Object.prototype.toString.call(obj) == '[object Array]';
|
2012-05-09 13:11:37 +08:00
|
|
|
},
|
|
|
|
_isObject: function(obj) {
|
2012-06-21 03:55:34 +08:00
|
|
|
return (obj !== undefined && obj.constructor == Object);
|
2012-05-09 13:11:37 +08:00
|
|
|
},
|
2012-05-26 11:18:05 +08:00
|
|
|
_isNumber: function(obj) {
|
2012-05-29 14:46:40 +08:00
|
|
|
return Object.prototype.toString.call(obj) == '[object Number]';
|
2012-05-26 11:18:05 +08:00
|
|
|
},
|
2012-05-27 09:31:13 +08:00
|
|
|
_hasMethods: function(obj) {
|
|
|
|
var names = [];
|
|
|
|
for(var key in obj) {
|
|
|
|
if(this._isFunction(obj[key]))
|
|
|
|
names.push(key);
|
|
|
|
}
|
|
|
|
return names.length > 0;
|
|
|
|
},
|
2012-05-14 01:46:49 +08:00
|
|
|
/*
|
2012-05-26 11:18:05 +08:00
|
|
|
* The argument can be:
|
|
|
|
* - an integer (will be applied to both x and y)
|
|
|
|
* - an array of one integer (will be applied to both x and y)
|
|
|
|
* - an array of two integers (contains x and y)
|
|
|
|
* - an array of four integers (contains x, y, width, and height)
|
|
|
|
* - an object with x and y properties
|
|
|
|
* - an array of one element which is an array of integers
|
|
|
|
* - an array of one element of an object
|
2012-05-14 01:46:49 +08:00
|
|
|
*/
|
|
|
|
_getXY: function(arg) {
|
2012-05-26 11:18:05 +08:00
|
|
|
if(this._isNumber(arg)) {
|
2012-05-20 12:14:04 +08:00
|
|
|
return {
|
2012-05-26 11:18:05 +08:00
|
|
|
x: arg,
|
|
|
|
y: arg
|
2012-05-20 12:14:04 +08:00
|
|
|
};
|
2012-05-13 09:37:07 +08:00
|
|
|
}
|
2012-05-26 11:18:05 +08:00
|
|
|
else if(this._isArray(arg)) {
|
|
|
|
// if arg is an array of one element
|
2012-05-20 12:14:04 +08:00
|
|
|
if(arg.length === 1) {
|
|
|
|
var val = arg[0];
|
2012-05-26 11:18:05 +08:00
|
|
|
// if arg is an array of one element which is a number
|
|
|
|
if(this._isNumber(val)) {
|
|
|
|
return {
|
|
|
|
x: val,
|
|
|
|
y: val
|
|
|
|
};
|
|
|
|
}
|
|
|
|
// if arg is an array of one element which is an array
|
|
|
|
else if(this._isArray(val)) {
|
2012-05-20 12:14:04 +08:00
|
|
|
return {
|
|
|
|
x: val[0],
|
|
|
|
y: val[1]
|
|
|
|
};
|
|
|
|
}
|
2012-05-26 11:18:05 +08:00
|
|
|
// if arg is an array of one element which is an object
|
|
|
|
else if(this._isObject(val)) {
|
2012-05-20 12:14:04 +08:00
|
|
|
return val;
|
|
|
|
}
|
2012-05-13 09:37:07 +08:00
|
|
|
}
|
2012-05-26 11:18:05 +08:00
|
|
|
// if arg is an array of two or more elements
|
2012-05-27 07:37:37 +08:00
|
|
|
else if(arg.length >= 2) {
|
2012-05-20 12:14:04 +08:00
|
|
|
return {
|
|
|
|
x: arg[0],
|
|
|
|
y: arg[1]
|
|
|
|
};
|
2012-05-13 09:37:07 +08:00
|
|
|
}
|
|
|
|
}
|
2012-05-26 11:18:05 +08:00
|
|
|
// if arg is an object return the object
|
|
|
|
else if(this._isObject(arg)) {
|
2012-05-20 12:14:04 +08:00
|
|
|
return arg;
|
|
|
|
}
|
2012-05-27 07:37:37 +08:00
|
|
|
|
|
|
|
// default
|
|
|
|
return {
|
|
|
|
x: 0,
|
|
|
|
y: 0
|
|
|
|
};
|
2012-05-13 09:37:07 +08:00
|
|
|
},
|
2012-05-14 02:58:40 +08:00
|
|
|
/*
|
2012-05-27 07:37:37 +08:00
|
|
|
* The argument can be:
|
|
|
|
* - an integer (will be applied to both width and height)
|
|
|
|
* - an array of one integer (will be applied to both width and height)
|
|
|
|
* - an array of two integers (contains width and height)
|
|
|
|
* - an array of four integers (contains x, y, width, and height)
|
|
|
|
* - an object with width and height properties
|
|
|
|
* - an array of one element which is an array of integers
|
|
|
|
* - an array of one element of an object
|
2012-05-14 02:58:40 +08:00
|
|
|
*/
|
2012-05-20 12:14:04 +08:00
|
|
|
_getSize: function(arg) {
|
2012-05-27 07:37:37 +08:00
|
|
|
if(this._isNumber(arg)) {
|
2012-05-20 12:14:04 +08:00
|
|
|
return {
|
2012-05-27 07:37:37 +08:00
|
|
|
width: arg,
|
|
|
|
height: arg
|
2012-05-20 12:14:04 +08:00
|
|
|
};
|
2012-05-13 09:37:07 +08:00
|
|
|
}
|
2012-05-27 07:37:37 +08:00
|
|
|
else if(this._isArray(arg)) {
|
|
|
|
// if arg is an array of one element
|
2012-05-20 12:14:04 +08:00
|
|
|
if(arg.length === 1) {
|
|
|
|
var val = arg[0];
|
2012-05-27 07:37:37 +08:00
|
|
|
// if arg is an array of one element which is a number
|
|
|
|
if(this._isNumber(val)) {
|
|
|
|
return {
|
|
|
|
width: val,
|
|
|
|
height: val
|
|
|
|
};
|
|
|
|
}
|
|
|
|
// if arg is an array of one element which is an array
|
|
|
|
else if(this._isArray(val)) {
|
|
|
|
/*
|
|
|
|
* if arg is an array of one element which is an
|
|
|
|
* array of four elements
|
|
|
|
*/
|
|
|
|
if(val.length >= 4) {
|
2012-05-20 12:14:04 +08:00
|
|
|
return {
|
2012-05-27 07:37:37 +08:00
|
|
|
width: val[2],
|
|
|
|
height: val[3]
|
2012-05-20 12:14:04 +08:00
|
|
|
};
|
|
|
|
}
|
2012-05-27 07:37:37 +08:00
|
|
|
/*
|
|
|
|
* if arg is an array of one element which is an
|
|
|
|
* array of two elements
|
|
|
|
*/
|
|
|
|
else if(val.length >= 2) {
|
2012-05-20 12:14:04 +08:00
|
|
|
return {
|
2012-05-27 07:37:37 +08:00
|
|
|
width: val[0],
|
|
|
|
height: val[1]
|
2012-05-20 12:14:04 +08:00
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
2012-05-27 07:37:37 +08:00
|
|
|
// if arg is an array of one element which is an object
|
|
|
|
else if(this._isObject(val)) {
|
2012-05-20 12:14:04 +08:00
|
|
|
return val;
|
|
|
|
}
|
|
|
|
}
|
2012-05-27 07:37:37 +08:00
|
|
|
// if arg is an array of four elements
|
|
|
|
else if(arg.length >= 4) {
|
2012-05-20 12:14:04 +08:00
|
|
|
return {
|
2012-05-27 07:37:37 +08:00
|
|
|
width: arg[2],
|
|
|
|
height: arg[3]
|
2012-05-20 12:14:04 +08:00
|
|
|
};
|
2012-05-13 09:37:07 +08:00
|
|
|
}
|
2012-05-27 07:37:37 +08:00
|
|
|
// if arg is an array of two elements
|
|
|
|
else if(arg.length >= 2) {
|
2012-05-20 12:14:04 +08:00
|
|
|
return {
|
2012-05-27 07:37:37 +08:00
|
|
|
width: arg[0],
|
|
|
|
height: arg[1]
|
2012-05-20 12:14:04 +08:00
|
|
|
};
|
2012-05-13 09:37:07 +08:00
|
|
|
}
|
|
|
|
}
|
2012-05-27 07:37:37 +08:00
|
|
|
// if arg is an object return the object
|
|
|
|
else if(this._isObject(arg)) {
|
2012-05-20 12:14:04 +08:00
|
|
|
return arg;
|
|
|
|
}
|
2012-05-27 07:37:37 +08:00
|
|
|
|
|
|
|
// default
|
|
|
|
return {
|
|
|
|
width: 0,
|
|
|
|
height: 0
|
|
|
|
};
|
2012-05-14 02:58:40 +08:00
|
|
|
},
|
|
|
|
/*
|
2012-05-20 12:14:04 +08:00
|
|
|
* arg will be an array of numbers or
|
2012-05-14 02:58:40 +08:00
|
|
|
* an array of point objects
|
|
|
|
*/
|
2012-05-20 12:14:04 +08:00
|
|
|
_getPoints: function(arg) {
|
|
|
|
if(arg === undefined) {
|
|
|
|
return [];
|
2012-05-14 02:58:40 +08:00
|
|
|
}
|
2012-05-20 12:14:04 +08:00
|
|
|
|
|
|
|
// an array of objects
|
|
|
|
if(this._isObject(arg[0])) {
|
|
|
|
return arg;
|
|
|
|
}
|
|
|
|
// an array of integers
|
2012-05-14 02:58:40 +08:00
|
|
|
else {
|
|
|
|
/*
|
|
|
|
* convert array of numbers into an array
|
|
|
|
* of objects containing x, y
|
|
|
|
*/
|
|
|
|
var arr = [];
|
2012-05-20 12:14:04 +08:00
|
|
|
for(var n = 0; n < arg.length; n += 2) {
|
2012-05-14 02:58:40 +08:00
|
|
|
arr.push({
|
2012-05-20 12:14:04 +08:00
|
|
|
x: arg[n],
|
|
|
|
y: arg[n + 1]
|
2012-05-14 02:58:40 +08:00
|
|
|
});
|
|
|
|
}
|
2012-05-20 12:14:04 +08:00
|
|
|
|
|
|
|
return arr;
|
2012-05-14 02:58:40 +08:00
|
|
|
}
|
2012-06-11 04:07:09 +08:00
|
|
|
},
|
|
|
|
_addSetter: function(constructor, attr) {
|
|
|
|
var that = this;
|
|
|
|
var method = 'set' + attr.charAt(0).toUpperCase() + attr.slice(1);
|
|
|
|
constructor.prototype[method] = function(arg) {
|
|
|
|
var obj = {};
|
|
|
|
obj[attr] = arg;
|
|
|
|
this.setAttrs(obj);
|
|
|
|
};
|
|
|
|
},
|
|
|
|
_addGetter: function(constructor, attr) {
|
|
|
|
var that = this;
|
|
|
|
var method = 'get' + attr.charAt(0).toUpperCase() + attr.slice(1);
|
|
|
|
constructor.prototype[method] = function(arg) {
|
|
|
|
return this.attrs[attr];
|
|
|
|
};
|
2012-03-07 13:45:48 +08:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
window.requestAnimFrame = (function(callback) {
|
|
|
|
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
|
|
|
|
function(callback) {
|
|
|
|
window.setTimeout(callback, 1000 / 60);
|
|
|
|
};
|
2012-03-11 08:52:16 +08:00
|
|
|
})();
|