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

build

Browse Source
This commit is contained in:
lavrton 2015-01-21 17:24:22 +07:00
parent 214da03a7d
commit abde07dd87
2 changed files with 340 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

628
kinetic.js
View File

@ -12631,17 +12631,17 @@ var Kinetic = {};
*/ */
Kinetic.Collection.mapMethods(Kinetic.Line); Kinetic.Collection.mapMethods(Kinetic.Line);
})();;(function() { })();;(function() {
/** /**
* Sprite constructor * Sprite constructor
* @constructor * @constructor
* @memberof Kinetic * @memberof Kinetic
* @augments Kinetic.Shape * @augments Kinetic.Shape
* @param {Object} config * @param {Object} config
* @param {String} config.animation animation key * @param {String} config.animation animation key
* @param {Object} config.animations animation map * @param {Object} config.animations animation map
* @param {Integer} [config.frameIndex] animation frame index * @param {Integer} [config.frameIndex] animation frame index
* @param {Image} config.image image object * @param {Image} config.image image object
* @param {String} [config.fill] fill color * @param {String} [config.fill] fill color
* @param {Integer} [config.fillRed] set fill red component * @param {Integer} [config.fillRed] set fill red component
* @param {Integer} [config.fillGreen] set fill green component * @param {Integer} [config.fillGreen] set fill green component
@ -12701,7 +12701,7 @@ var Kinetic = {};
* between 0 and 1 * between 0 and 1
* @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true
* @param {Array} [config.dash] * @param {Array} [config.dash]
* @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true
* @param {Number} [config.x] * @param {Number} [config.x]
* @param {Number} [config.y] * @param {Number} [config.y]
* @param {Number} [config.width] * @param {Number} [config.width]
@ -12721,283 +12721,333 @@ var Kinetic = {};
* @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop
* the entire stage by dragging any portion of the stage * the entire stage by dragging any portion of the stage
* @param {Number} [config.dragDistance] * @param {Number} [config.dragDistance]
* @param {Function} [config.dragBoundFunc] * @param {Function} [config.dragBoundFunc]
* @example * @example
* var imageObj = new Image(); * var imageObj = new Image();
* imageObj.onload = function() { * imageObj.onload = function() {
* var sprite = new Kinetic.Sprite({ * var sprite = new Kinetic.Sprite({
* x: 200, * x: 200,
* y: 100, * y: 100,
* image: imageObj, * image: imageObj,
* animation: 'standing', * animation: 'standing',
* animations: { * animations: {
* standing: [ * standing: [
* // x, y, width, height (6 frames) * // x, y, width, height (6 frames)
* 0, 0, 49, 109, * 0, 0, 49, 109,
* 52, 0, 49, 109, * 52, 0, 49, 109,
* 105, 0, 49, 109, * 105, 0, 49, 109,
* 158, 0, 49, 109, * 158, 0, 49, 109,
* 210, 0, 49, 109, * 210, 0, 49, 109,
* 262, 0, 49, 109 * 262, 0, 49, 109
* ], * ],
* kicking: [ * kicking: [
* // x, y, width, height (6 frames) * // x, y, width, height (6 frames)
* 0, 109, 45, 98, * 0, 109, 45, 98,
* 45, 109, 45, 98, * 45, 109, 45, 98,
* 95, 109, 63, 98, * 95, 109, 63, 98,
* 156, 109, 70, 98, * 156, 109, 70, 98,
* 229, 109, 60, 98, * 229, 109, 60, 98,
* 287, 109, 41, 98 * 287, 109, 41, 98
* ] * ]
* }, * },
* frameRate: 7, * frameRate: 7,
* frameIndex: 0 * frameIndex: 0
* }); * });
* }; * };
* imageObj.src = '/path/to/image.jpg' * imageObj.src = '/path/to/image.jpg'
*/ */
Kinetic.Sprite = function(config) { Kinetic.Sprite = function(config) {
this.___init(config); this.___init(config);
}; };
Kinetic.Sprite.prototype = { Kinetic.Sprite.prototype = {
___init: function(config) { ___init: function(config) {
// call super constructor // call super constructor
Kinetic.Shape.call(this, config); Kinetic.Shape.call(this, config);
this.className = 'Sprite'; this.className = 'Sprite';
this._updated = true; this._updated = true;
var that = this; var that = this;
this.anim = new Kinetic.Animation(function() { this.anim = new Kinetic.Animation(function() {
// if we don't need to redraw layer we should return false // if we don't need to redraw layer we should return false
var updated = that._updated; var updated = that._updated;
that._updated = false; that._updated = false;
return updated; return updated;
}); });
this.on('animationChange.kinetic', function() { this.on('animationChange.kinetic', function() {
// reset index when animation changes // reset index when animation changes
this.frameIndex(0); this.frameIndex(0);
}); });
this.on('frameIndexChange.kinetic', function() { this.on('frameIndexChange.kinetic', function() {
this._updated = true; this._updated = true;
}); });
// smooth change for frameRate // smooth change for frameRate
this.on('frameRateChange.kinetic', function() { this.on('frameRateChange.kinetic', function() {
if (!this.anim.isRunning()) { if (!this.anim.isRunning()) {
return; return;
} }
clearInterval(this.interval); clearInterval(this.interval);
this._setInterval(); this._setInterval();
}); });
this.sceneFunc(this._sceneFunc); this.sceneFunc(this._sceneFunc);
this.hitFunc(this._hitFunc); this.hitFunc(this._hitFunc);
}, },
_sceneFunc: function(context) { _sceneFunc: function(context) {
var anim = this.getAnimation(), var anim = this.getAnimation(),
index = this.frameIndex(), index = this.frameIndex(),
ix4 = index * 4, ix4 = index * 4,
set = this.getAnimations()[anim], set = this.getAnimations()[anim],
x = set[ix4 + 0], offsets = this.frameOffsets(),
y = set[ix4 + 1], x = set[ix4 + 0],
width = set[ix4 + 2], y = set[ix4 + 1],
height = set[ix4 + 3], width = set[ix4 + 2],
image = this.getImage(); height = set[ix4 + 3],
image = this.getImage();
if(image) {
context.drawImage(image, x, y, width, height, 0, 0, width, height); if(image) {
} if (offsets) {
}, var offset = offsets[anim],
_hitFunc: function(context) { ix2 = index * 2;
var anim = this.getAnimation(), context.drawImage(image, x, y, width, height, offset[ix2 + 0], offset[ix2 + 1], width, height);
index = this.frameIndex(), } else {
ix4 = index * 4, context.drawImage(image, x, y, width, height, 0, 0, width, height);
set = this.getAnimations()[anim], }
width = set[ix4 + 2], }
height = set[ix4 + 3]; },
_hitFunc: function(context) {
context.beginPath(); var anim = this.getAnimation(),
context.rect(0, 0, width, height); index = this.frameIndex(),
context.closePath(); ix4 = index * 4,
context.fillShape(this); set = this.getAnimations()[anim],
}, offsets = this.frameOffsets(),
_useBufferCanvas: function() { width = set[ix4 + 2],
return (this.hasShadow() || this.getAbsoluteOpacity() !== 1) && this.hasStroke(); height = set[ix4 + 3];
},
_setInterval: function() { context.beginPath();
var that = this; if (offsets) {
this.interval = setInterval(function() { var offset = offsets[anim];
that._updateIndex(); var ix2 = index * 2;
}, 1000 / this.getFrameRate()); context.rect(offset[ix2 + 0], offset[ix2 + 1], width, height);
}, } else {
/** context.rect(0, 0, width, height);
* start sprite animation }
* @method context.closePath();
* @memberof Kinetic.Sprite.prototype context.fillShape(this);
*/ },
start: function() { _useBufferCanvas: function() {
var layer = this.getLayer(); return (this.hasShadow() || this.getAbsoluteOpacity() !== 1) && this.hasStroke();
},
/* _setInterval: function() {
* animation object has no executable function because var that = this;
* the updates are done with a fixed FPS with the setInterval this.interval = setInterval(function() {
* below. The anim object only needs the layer reference for that._updateIndex();
* redraw }, 1000 / this.getFrameRate());
*/ },
this.anim.setLayers(layer); /**
this._setInterval(); * start sprite animation
this.anim.start(); * @method
}, * @memberof Kinetic.Sprite.prototype
/** */
* stop sprite animation start: function() {
* @method var layer = this.getLayer();
* @memberof Kinetic.Sprite.prototype
*/ /*
stop: function() { * animation object has no executable function because
this.anim.stop(); * the updates are done with a fixed FPS with the setInterval
clearInterval(this.interval); * below. The anim object only needs the layer reference for
}, * redraw
/** */
* determine if animation of sprite is running or not. returns true or false this.anim.setLayers(layer);
* @method this._setInterval();
* @memberof Kinetic.Animation.prototype this.anim.start();
* @returns {Boolean} },
*/ /**
isRunning: function() { * stop sprite animation
return this.anim.isRunning(); * @method
}, * @memberof Kinetic.Sprite.prototype
_updateIndex: function() { */
var index = this.frameIndex(), stop: function() {
animation = this.getAnimation(), this.anim.stop();
animations = this.getAnimations(), clearInterval(this.interval);
anim = animations[animation], },
len = anim.length / 4; /**
* determine if animation of sprite is running or not. returns true or false
if(index < len - 1) { * @method
this.frameIndex(index + 1); * @memberof Kinetic.Animation.prototype
} * @returns {Boolean}
else { */
this.frameIndex(0); isRunning: function() {
} return this.anim.isRunning();
} },
}; _updateIndex: function() {
Kinetic.Util.extend(Kinetic.Sprite, Kinetic.Shape); var index = this.frameIndex(),
animation = this.getAnimation(),
// add getters setters animations = this.getAnimations(),
Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'animation'); anim = animations[animation],
len = anim.length / 4;
/**
* get/set animation key if(index < len - 1) {
* @name animation this.frameIndex(index + 1);
* @method }
* @memberof Kinetic.Sprite.prototype else {
* @param {String} anim animation key this.frameIndex(0);
* @returns {String} }
* @example }
* // get animation key };
* var animation = sprite.animation(); Kinetic.Util.extend(Kinetic.Sprite, Kinetic.Shape);
*
* // set animation key // add getters setters
* sprite.animation('kicking'); Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'animation');
*/
/**
Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'animations'); * get/set animation key
* @name animation
/** * @method
* get/set animations map * @memberof Kinetic.Sprite.prototype
* @name animations * @param {String} anim animation key
* @method * @returns {String}
* @memberof Kinetic.Sprite.prototype * @example
* @param {Object} animations * // get animation key
* @returns {Object} * var animation = sprite.animation();
* @example *
* // get animations map * // set animation key
* var animations = sprite.animations(); * sprite.animation('kicking');
* */
* // set animations map
* sprite.animations({ Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'animations');
* standing: [
* // x, y, width, height (6 frames) /**
* 0, 0, 49, 109, * get/set animations map
* 52, 0, 49, 109, * @name animations
* 105, 0, 49, 109, * @method
* 158, 0, 49, 109, * @memberof Kinetic.Sprite.prototype
* 210, 0, 49, 109, * @param {Object} animations
* 262, 0, 49, 109 * @returns {Object}
* ], * @example
* kicking: [ * // get animations map
* // x, y, width, height (6 frames) * var animations = sprite.animations();
* 0, 109, 45, 98, *
* 45, 109, 45, 98, * // set animations map
* 95, 109, 63, 98, * sprite.animations({
* 156, 109, 70, 98, * standing: [
* 229, 109, 60, 98, * // x, y, width, height (6 frames)
* 287, 109, 41, 98 * 0, 0, 49, 109,
* ] * 52, 0, 49, 109,
* }); * 105, 0, 49, 109,
*/ * 158, 0, 49, 109,
* 210, 0, 49, 109,
Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'image'); * 262, 0, 49, 109
* ],
/** * kicking: [
* get/set image * // x, y, width, height (6 frames)
* @name image * 0, 109, 45, 98,
* @method * 45, 109, 45, 98,
* @memberof Kinetic.Sprite.prototype * 95, 109, 63, 98,
* @param {Image} image * 156, 109, 70, 98,
* @returns {Image} * 229, 109, 60, 98,
* @example * 287, 109, 41, 98
* // get image * ]
* var image = sprite.image(); * });
* */
* // set image
* sprite.image(imageObj); Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'frameOffsets');
*/
/**
Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'frameIndex', 0); * get/set offsets map
* @name offsets
/** * @method
* set/set animation frame index * @memberof Kinetic.Sprite.prototype
* @name frameIndex * @param {Object} offsets
* @method * @returns {Object}
* @memberof Kinetic.Sprite.prototype * @example
* @param {Integer} frameIndex * // get offsets map
* @returns {Integer} * var offsets = sprite.offsets();
* @example *
* // get animation frame index * // set offsets map
* var frameIndex = sprite.frameIndex(); * sprite.offsets({
* * standing: [
* // set animation frame index * // x, y (6 frames)
* sprite.frameIndex(3); * 0, 0,
*/ * 0, 0,
* 5, 0,
Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'frameRate', 17); * 0, 0,
* 0, 3,
/** * 2, 0
* get/set frame rate in frames per second. Increase this number to make the sprite * ],
* animation run faster, and decrease the number to make the sprite animation run slower * kicking: [
* The default is 17 frames per second * // x, y (6 frames)
* @name frameRate * 0, 5,
* @method * 5, 0,
* @memberof Kinetic.Sprite.prototype * 10, 0,
* @param {Integer} frameRate * 0, 0,
* @returns {Integer} * 2, 1,
* @example * 0, 0
* // get frame rate * ]
* var frameRate = sprite.frameRate(); * });
* */
* // set frame rate to 2 frames per second
* sprite.frameRate(2); Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'image');
*/
/**
Kinetic.Factory.backCompat(Kinetic.Sprite, { * get/set image
index: 'frameIndex', * @name image
getIndex: 'getFrameIndex', * @method
setIndex: 'setFrameIndex' * @memberof Kinetic.Sprite.prototype
}); * @param {Image} image
* @returns {Image}
Kinetic.Collection.mapMethods(Kinetic.Sprite); * @example
})(); * // get image
* var image = sprite.image();
*
* // set image
* sprite.image(imageObj);
*/
Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'frameIndex', 0);
/**
* set/set animation frame index
* @name frameIndex
* @method
* @memberof Kinetic.Sprite.prototype
* @param {Integer} frameIndex
* @returns {Integer}
* @example
* // get animation frame index
* var frameIndex = sprite.frameIndex();
*
* // set animation frame index
* sprite.frameIndex(3);
*/
Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'frameRate', 17);
/**
* get/set frame rate in frames per second. Increase this number to make the sprite
* animation run faster, and decrease the number to make the sprite animation run slower
* The default is 17 frames per second
* @name frameRate
* @method
* @memberof Kinetic.Sprite.prototype
* @param {Integer} frameRate
* @returns {Integer}
* @example
* // get frame rate
* var frameRate = sprite.frameRate();
*
* // set frame rate to 2 frames per second
* sprite.frameRate(2);
*/
Kinetic.Factory.backCompat(Kinetic.Sprite, {
index: 'frameIndex',
getIndex: 'getFrameIndex',
setIndex: 'setFrameIndex'
});
Kinetic.Collection.mapMethods(Kinetic.Sprite);
})();
;(function () { ;(function () {
/** /**
* Path constructor. * Path constructor.

2
kinetic.min.js vendored
View File

File diff suppressed because one or more lines are too long