diff --git a/src/plugins/Path.js b/src/plugins/Path.js index a895a6fc..b8c96ad5 100644 --- a/src/plugins/Path.js +++ b/src/plugins/Path.js @@ -23,9 +23,9 @@ this.shapeType = 'Path'; this._setDrawFuncs(); - this.dataArray = Kinetic.Path.parsePathData(this.attrs.data); + this.dataArray = Kinetic.Path.parsePathData(this.getData()); this.on('dataChange', function() { - that.dataArray = Kinetic.Path.parsePathData(that.attrs.data); + that.dataArray = Kinetic.Path.parsePathData(this.getData()); }); }, drawFunc: function(canvas) { @@ -74,10 +74,6 @@ }; Kinetic.Global.extend(Kinetic.Path, Kinetic.Shape); - /* - * Utility methods written by jfollas to - * handle length and point measurements - */ Kinetic.Path.getLineLength = function(x1, y1, x2, y2) { return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); }; diff --git a/src/shapes/Sprite.js b/src/shapes/Sprite.js index 73f7148f..d2f6ec0e 100644 --- a/src/shapes/Sprite.js +++ b/src/shapes/Sprite.js @@ -7,12 +7,13 @@ * @param {String} config.animation animation key * @param {Object} config.animations animation map * @param {Integer} [config.index] animation index + * @param {Image} image image object * {{ShapeParams}} * {{NodeParams}} */ Kinetic.Sprite = function(config) { this._initSprite(config); - }; + } Kinetic.Sprite.prototype = { _initSprite: function(config) { @@ -31,14 +32,21 @@ }); }, drawFunc: function(canvas) { - var anim = this.attrs.animation, index = this.attrs.index, f = this.attrs.animations[anim][index], context = canvas.getContext(), image = this.attrs.image; + var anim = this.getAnimation(), + index = this.getIndex(), + f = this.getAnimations()[anim][index], + context = canvas.getContext(), + image = this.getImage(); if(image) { context.drawImage(image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height); } }, drawHitFunc: function(canvas) { - var anim = this.attrs.animation, index = this.attrs.index, f = this.attrs.animations[anim][index], context = canvas.getContext(); + var anim = this.getAnimation(), + index = this.getIndex(), + f = this.getAnimations()[anim][index], + context = canvas.getContext(); context.beginPath(); context.rect(0, 0, f.width, f.height); @@ -63,14 +71,14 @@ this.anim.node = layer; this.interval = setInterval(function() { - var index = that.attrs.index; + var index = that.getIndex(); that._updateIndex(); if(that.afterFrameFunc && index === that.afterFrameIndex) { that.afterFrameFunc(); delete that.afterFrameFunc; delete that.afterFrameIndex; } - }, 1000 / this.attrs.frameRate); + }, 1000 / this.getFrameRate()); this.anim.start(); }, @@ -95,13 +103,17 @@ 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++; + var index = this.getIndex(), + animation = this.getAnimation(), + animations = this.getAnimations(), + anim = animations[animation], + len = anim.length; + + if(index < len - 1) { + this.setIndex(index + 1); } else { - this.attrs.index = 0; + this.setIndex(0); } } }; @@ -110,6 +122,7 @@ // add getters setters Kinetic.Node.addGetterSetter(Kinetic.Sprite, 'animation'); Kinetic.Node.addGetterSetter(Kinetic.Sprite, 'animations'); + Kinetic.Node.addGetterSetter(Kinetic.Sprite, 'image'); Kinetic.Node.addGetterSetter(Kinetic.Sprite, 'index', 0); Kinetic.Node.addGetterSetter(Kinetic.Sprite, 'frameRate', 17); @@ -127,6 +140,13 @@ * @param {Object} animations */ + /** + * set image + * @name setImage + * @methodOf Kinetic.Sprite.prototype + * @param {Image} image + */ + /** * set animation frame index * @name setIndex @@ -146,6 +166,12 @@ * @methodOf Kinetic.Sprite.prototype */ + /** + * get image + * @name getImage + * @methodOf Kinetic.Sprite.prototype + */ + /** * get animation frame index * @name getIndex diff --git a/tests/js/unit/shapes/spriteTests.js b/tests/js/unit/shapes/spriteTests.js index 8855ddf8..e1280f9f 100644 --- a/tests/js/unit/shapes/spriteTests.js +++ b/tests/js/unit/shapes/spriteTests.js @@ -84,7 +84,6 @@ Test.Modules.SPRITE = { image: imageObj, animation: 'standing', animations: anims, - index: 0, frameRate: Math.random() * 6 + 6, frameRate: 10, draggable: true, @@ -114,6 +113,8 @@ Test.Modules.SPRITE = { //document.body.appendChild(layer.bufferCanvas.element) test(sprite.getShapeType() === 'Sprite', 'shape type should be Sprite'); + + test(sprite.getIndex() === 0, 'sprite index should default to 0'); }; imageObj.src = '../assets/scorpion-sprite.png'; }