diff --git a/dist/kinetic-core.js b/dist/kinetic-core.js index f333c173..e34346e8 100644 --- a/dist/kinetic-core.js +++ b/dist/kinetic-core.js @@ -3,7 +3,7 @@ * http://www.kineticjs.com/ * Copyright 2012, Eric Rowell * Licensed under the MIT or GPL Version 2 licenses. - * Date: Jun 09 2012 + * Date: Jun 10 2012 * * Copyright (C) 2011 - 2012 by Eric Rowell * @@ -2990,9 +2990,9 @@ Kinetic.Shape.prototype = { * radial gradient object, or pattern object * @param {String|Object} fill */ - setFill: function(config) { + setFill: function(fill) { this.setAttrs({ - fill: config + fill: fill }); }, /** @@ -3006,7 +3006,9 @@ Kinetic.Shape.prototype = { * @param {String} stroke */ setStroke: function(stroke) { - this.attrs.stroke = stroke; + this.setAttrs({ + stroke: stroke + }); }, /** * get stroke color @@ -3020,7 +3022,9 @@ Kinetic.Shape.prototype = { * default is miter */ setLineJoin: function(lineJoin) { - this.attrs.lineJoin = lineJoin; + this.setAttrs({ + lineJoin: lineJoin + }); }, /** * get line join @@ -3033,7 +3037,9 @@ Kinetic.Shape.prototype = { * @param {Number} strokeWidth */ setStrokeWidth: function(strokeWidth) { - this.attrs.strokeWidth = strokeWidth; + this.setAttrs({ + strokeWidth: strokeWidth + }); }, /** * get stroke width @@ -3061,7 +3067,9 @@ Kinetic.Shape.prototype = { * @param {Function} func drawing function */ setDrawFunc: function(func) { - this.attrs.drawFunc = func; + this.setAttrs({ + drawFunc: func + }); }, /** * save shape data when using pixel detection. @@ -3192,7 +3200,7 @@ Kinetic.Rect = function(config) { context.arc(this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI, Math.PI * 3 / 2, false); } context.closePath(); - + this.fill(); this.stroke(); }; @@ -3208,7 +3216,9 @@ Kinetic.Rect.prototype = { * @param {Number} width */ setWidth: function(width) { - this.attrs.width = width; + this.setAttrs({ + width: width + }); }, /** * get width @@ -3221,7 +3231,9 @@ Kinetic.Rect.prototype = { * @param {Number} height */ setHeight: function(height) { - this.attrs.height = height; + this.setAttrs({ + height: height + }); }, /** * get height @@ -3250,14 +3262,16 @@ Kinetic.Rect.prototype = { * @param {Number} radius */ setCornerRadius: function(radius) { - this.attrs.cornerRadius = radius; + this.setAttrs({ + cornerRadius: radius + }); }, /** * get corner radius */ getCornerRadius: function() { return this.attrs.cornerRadius; - }, + } }; // extend Shape @@ -3300,7 +3314,9 @@ Kinetic.Circle.prototype = { * @param {Number} radius */ setRadius: function(radius) { - this.attrs.radius = radius; + this.setAttrs({ + radius: radius + }); }, /** * get radius @@ -3372,7 +3388,9 @@ Kinetic.Image.prototype = { * @param {ImageObject} image */ setImage: function(image) { - this.attrs.image = image; + this.setAttrs({ + image: image + }); }, /** * get image @@ -3385,7 +3403,9 @@ Kinetic.Image.prototype = { * @param {Number} width */ setWidth: function(width) { - this.attrs.width = width; + this.setAttrs({ + width: width + }); }, /** * get width @@ -3398,7 +3418,9 @@ Kinetic.Image.prototype = { * @param {Number} height */ setHeight: function(height) { - this.attrs.height = height; + this.setAttrs({ + height: height + }); }, /** * get height @@ -3465,7 +3487,7 @@ Kinetic.Sprite = function(config) { context.beginPath(); context.rect(0, 0, f.width, f.height); context.closePath(); - + this.drawImage(this.attrs.image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height); } }; @@ -3510,14 +3532,18 @@ Kinetic.Sprite.prototype = { * @param {String} anim animation key */ setAnimation: function(anim) { - this.attrs.animation = anim; + this.setAttrs({ + animation: anim + }); }, /** * set animations obect * @param {Object} animations */ setAnimations: function(animations) { - this.attrs.animations = animations; + this.setAttrs({ + animations: animations + }); }, /** * get animations object @@ -3536,7 +3562,9 @@ Kinetic.Sprite.prototype = { * @param {Integer} index frame index */ setIndex: function(index) { - this.attrs.index = index; + this.setAttrs({ + index: index + }); }, _updateIndex: function() { var i = this.attrs.index; @@ -3648,7 +3676,9 @@ Kinetic.RegularPolygon.prototype = { * @param {Number} radius */ setRadius: function(radius) { - this.attrs.radius = radius; + this.setAttrs({ + radius: radius + }); }, /** * get radius @@ -3661,7 +3691,9 @@ Kinetic.RegularPolygon.prototype = { * @param {int} sides */ setSides: function(sides) { - this.attrs.sides = sides; + this.setAttrs({ + sides: sides + }); }, /** * get number of sides @@ -3703,7 +3735,7 @@ Kinetic.Star = function(config) { context.lineTo(x, y); } context.closePath(); - + this.fill(); this.stroke(); }; @@ -3719,7 +3751,9 @@ Kinetic.Star.prototype = { * @param {Integer} points */ setNumPoints: function(numPoints) { - this.attrs.numPoints = numPoints; + this.setAttrs({ + numPoints: numPoints + }); }, /** * get number of points @@ -3732,7 +3766,9 @@ Kinetic.Star.prototype = { * @param {Number} radius */ setOuterRadius: function(radius) { - this.attrs.outerRadius = radius; + this.setAttrs({ + outerRadius: radius + }); }, /** * get outer radius @@ -3745,7 +3781,9 @@ Kinetic.Star.prototype = { * @param {Number} radius */ setInnerRadius: function(radius) { - this.attrs.innerRadius = radius; + this.setAttrs({ + innerRadius: radius + }); }, /** * get inner radius @@ -3851,7 +3889,9 @@ Kinetic.Text.prototype = { * @param {String} fontFamily */ setFontFamily: function(fontFamily) { - this.attrs.fontFamily = fontFamily; + this.setAttrs({ + fontFamily: fontFamily + }); }, /** * get font family @@ -3864,7 +3904,9 @@ Kinetic.Text.prototype = { * @param {int} fontSize */ setFontSize: function(fontSize) { - this.attrs.fontSize = fontSize; + this.setAttrs({ + fontSize: fontSize + }); }, /** * get font size @@ -3877,7 +3919,9 @@ Kinetic.Text.prototype = { * @param {String} fontStyle */ setFontStyle: function(fontStyle) { - this.attrs.fontStyle = fontStyle; + this.setAttrs({ + fontStyle: fontStyle + }); }, /** * get font style @@ -3890,7 +3934,9 @@ Kinetic.Text.prototype = { * @param {String} textFill */ setTextFill: function(textFill) { - this.attrs.textFill = textFill; + this.setAttrs({ + textFill: textFill + }); }, /** * get text fill color @@ -3903,7 +3949,9 @@ Kinetic.Text.prototype = { * @param {String} textStroke */ setTextStroke: function(textStroke) { - this.attrs.textStroke = textStroke; + this.setAttrs({ + textStroke: textStroke + }); }, /** * get text stroke color @@ -3916,7 +3964,9 @@ Kinetic.Text.prototype = { * @param {int} textStrokeWidth */ setTextStrokeWidth: function(textStrokeWidth) { - this.attrs.textStrokeWidth = textStrokeWidth; + this.setAttrs({ + textStrokeWidth: textStrokeWidth + }); }, /** * get text stroke width @@ -3929,7 +3979,9 @@ Kinetic.Text.prototype = { * @param {int} padding */ setPadding: function(padding) { - this.attrs.padding = padding; + this.setAttrs({ + padding: padding + }); }, /** * get padding @@ -3942,7 +3994,9 @@ Kinetic.Text.prototype = { * @param {String} align align can be 'left', 'center', or 'right' */ setAlign: function(align) { - this.attrs.align = align; + this.setAttrs({ + align: align + }); }, /** * get horizontal align @@ -3955,7 +4009,9 @@ Kinetic.Text.prototype = { * @param {String} verticalAlign verticalAlign can be "top", "middle", or "bottom" */ setVerticalAlign: function(verticalAlign) { - this.attrs.verticalAlign = verticalAlign; + this.setAttrs({ + verticalAlign: verticalAlign + }); }, /** * get vertical align @@ -3968,7 +4024,9 @@ Kinetic.Text.prototype = { * @param {String} text */ setText: function(text) { - this.attrs.text = text; + this.setAttrs({ + text: text + }); }, /** * get text @@ -4024,7 +4082,9 @@ Kinetic.Text.prototype = { * @param {Number} width */ setWidth: function(width) { - this.attrs.width = width; + this.setAttrs({ + width: width + }); } }; // extend Shape @@ -4104,7 +4164,9 @@ Kinetic.Line.prototype = { * @param {String} lineCap */ setLineCap: function(lineCap) { - this.attrs.lineCap = lineCap; + this.setAttrs({ + lineCap: lineCap + }); }, /** * get line cap @@ -4123,7 +4185,9 @@ Kinetic.Line.prototype = { * apart */ setDashArray: function(dashArray) { - this.attrs.dashArray = dashArray; + this.setAttrs({ + dashArray: dashArray + }); }, /** * get dash array @@ -4187,7 +4251,7 @@ Kinetic.GlobalObject.extend(Kinetic.Line, Kinetic.Shape); // SVG Path /////////////////////////////////////////////////////////////////////// /** - * Path constructor. + * Path constructor. * @author Jason Follas * @constructor * @augments Kinetic.Shape @@ -4220,7 +4284,7 @@ Kinetic.Path = function(config) { break; case 'A': var cx = p[0], cy = p[1], rx = p[2], ry = p[3], theta = p[4], dTheta = p[5], psi = p[6], fs = p[7]; - + var r = (rx > ry) ? rx : ry; var scaleX = (rx > ry) ? 1 : rx / ry; var scaleY = (rx > ry) ? ry / rx : 1; @@ -4232,8 +4296,8 @@ Kinetic.Path = function(config) { context.scale(1 / scaleX, 1 / scaleY); context.rotate(-psi); context.translate(-cx, -cy); - - break; + + break; case 'z': context.closePath(); break; @@ -4453,17 +4517,13 @@ Kinetic.Path.prototype = { break; case 'A': var rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift(); - var x1 = cpx, y1 = cpy; - cpx = p.shift(), cpy = p.shift(); - + var x1 = cpx, y1 = cpy; cpx = p.shift(), cpy = p.shift(); cmd = 'A'; points = this._convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi); break; case 'a': var rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift(); - var x1 = cpx, y1 = cpy; - cpx += p.shift(), cpy += p.shift(); - + var x1 = cpx, y1 = cpy; cpx += p.shift(), cpy += p.shift(); cmd = 'A'; points = this._convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi); break; @@ -4499,53 +4559,66 @@ Kinetic.Path.prototype = { * @param {String} SVG path command string */ setData: function(data) { - this.attrs.data = data; + this.setAttrs({ + data: data + }); this.dataArray = this.getDataArray(); }, _convertEndpointToCenterParameterization: function(x1, y1, x2, y2, fa, fs, rx, ry, psiDeg) { - + // Derived from: http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes - + var psi = psiDeg * (Math.PI / 180.0); var xp = Math.cos(psi) * (x1 - x2) / 2.0 + Math.sin(psi) * (y1 - y2) / 2.0; var yp = -1 * Math.sin(psi) * (x1 - x2) / 2.0 + Math.cos(psi) * (y1 - y2) / 2.0; - var lambda = (xp*xp) / (rx*rx) + (yp*yp) / (ry*ry); - - if (lambda > 1) { + var lambda = (xp * xp) / (rx * rx) + (yp * yp) / (ry * ry); + + if(lambda > 1) { rx *= Math.sqrt(lambda); ry *= Math.sqrt(lambda); } - - var f = Math.sqrt((((rx*rx) * (ry*ry)) - ((rx*rx) * (yp*yp)) - ((ry*ry) * (xp*xp))) / ((rx*rx) * (yp*yp) + (ry*ry) * (xp*xp))); - - if (fa == fs) f *= -1; - if (isNaN(f)) f = 0; - + + var f = Math.sqrt((((rx * rx) * (ry * ry)) - ((rx * rx) * (yp * yp)) - ((ry * ry) * (xp * xp))) / ((rx * rx) * (yp * yp) + (ry * ry) * (xp * xp))); + + if(fa == fs) + f *= -1; + if(isNaN(f)) + f = 0; + var cxp = f * rx * yp / ry; var cyp = f * -ry * xp / rx; - + var cx = (x1 + x2) / 2.0 + Math.cos(psi) * cxp - Math.sin(psi) * cyp; var cy = (y1 + y2) / 2.0 + Math.sin(psi) * cxp + Math.cos(psi) * cyp; - - var vMag = function(v) { return Math.sqrt(v[0]*v[0] + v[1]*v[1]); } - var vRatio = function(u, v) { return (u[0]*v[0] + u[1]*v[1]) / (vMag(u) * vMag(v)) } - var vAngle = function(u, v) { return (u[0]*v[1] < u[1]*v[0] ? -1 : 1) * Math.acos(vRatio(u,v)); } - - var theta = vAngle([1,0], [(xp - cxp) / rx, (yp - cyp) / ry]); + + var vMag = function(v) { + return Math.sqrt(v[0] * v[0] + v[1] * v[1]); + } + var vRatio = function(u, v) { + return (u[0] * v[0] + u[1] * v[1]) / (vMag(u) * vMag(v)) + } + var vAngle = function(u, v) { + return (u[0] * v[1] < u[1] * v[0] ? -1 : 1) * Math.acos(vRatio(u, v)); + } + var theta = vAngle([1, 0], [(xp - cxp) / rx, (yp - cyp) / ry]); var u = [(xp - cxp) / rx, (yp - cyp) / ry]; var v = [(-1 * xp - cxp) / rx, (-1 * yp - cyp) / ry]; var dTheta = vAngle(u, v); - - if (vRatio(u,v) <= -1) dTheta = Math.PI; - if (vRatio(u,v) >= 1) dTheta = 0; - if (fs == 0 && dTheta > 0) dTheta = dTheta - 2 * Math.PI; - if (fs == 1 && dTheta < 0) dTheta = dTheta + 2 * Math.PI; - - return [cx, cy, rx, ry, theta, dTheta, psi, fs]; + if(vRatio(u, v) <= -1) + dTheta = Math.PI; + if(vRatio(u, v) >= 1) + dTheta = 0; + + if(fs == 0 && dTheta > 0) + dTheta = dTheta - 2 * Math.PI; + if(fs == 1 && dTheta < 0) + dTheta = dTheta + 2 * Math.PI; + + return [cx, cy, rx, ry, theta, dTheta, psi, fs]; } }; diff --git a/dist/kinetic-core.min.js b/dist/kinetic-core.min.js index 934f4214..6ebf08e6 100644 --- a/dist/kinetic-core.min.js +++ b/dist/kinetic-core.min.js @@ -3,7 +3,7 @@ * http://www.kineticjs.com/ * Copyright 2012, Eric Rowell * Licensed under the MIT or GPL Version 2 licenses. - * Date: Jun 09 2012 + * Date: Jun 10 2012 * * Copyright (C) 2011 - 2012 by Eric Rowell * @@ -25,5 +25,5 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */ -var Kinetic={};Kinetic.GlobalObject={stages:[],idCounter:0,tempNodes:[],animations:[],animIdCounter:0,animRunning:!1,maxDragTimeInterval:20,frame:{time:0,timeDiff:0,lastTime:0},drag:{moving:!1,node:undefined,offset:{x:0,y:0},lastDrawTime:0},extend:function(a,b){for(var c in b.prototype)b.prototype.hasOwnProperty(c)&&a.prototype[c]===undefined&&(a.prototype[c]=b.prototype[c])},_pullNodes:function(a){var b=this.tempNodes;for(var c=0;c0){this._updateFrameObject(),this._runFrames();var a=this;requestAnimFrame(function(){a._animationLoop()})}else this.animRunning=!1,this.frame.lastTime=0},_handleAnimation:function(){var a=this;this.animRunning?this.frame.lastTime=0:(this.animRunning=!0,a._animationLoop())},_isElement:function(a){return!!a&&a.nodeType==1},_isFunction:function(a){return!!(a&&a.constructor&&a.call&&a.apply)},_isArray:function(a){return a.length!==undefined},_isObject:function(a){return a===Object(a)},_isNumber:function(a){return Object.prototype.toString.call(a)=="[object Number]"},_hasMethods:function(a){var b=[];for(var c in a)this._isFunction(a[c])&&b.push(c);return b.length>0},_getXY:function(a){if(this._isNumber(a))return{x:a,y:a};if(this._isArray(a)){if(a.length===1){var b=a[0];if(this._isNumber(b))return{x:b,y:b};if(this._isArray(b))return{x:b[0],y:b[1]};if(this._isObject(b))return b}else if(a.length>=2)return{x:a[0],y:a[1]}}else if(this._isObject(a))return a;return{x:0,y:0}},_getSize:function(a){if(this._isNumber(a))return{width:a,height:a};if(this._isArray(a))if(a.length===1){var b=a[0];if(this._isNumber(b))return{width:b,height:b};if(this._isArray(b)){if(b.length>=4)return{width:b[2],height:b[3]};if(b.length>=2)return{width:b[0],height:b[1]}}else if(this._isObject(b))return b}else{if(a.length>=4)return{width:a[2],height:a[3]};if(a.length>=2)return{width:a[0],height:a[1]}}else if(this._isObject(a))return a;return{width:0,height:0}},_getPoints:function(a){if(a===undefined)return[];if(this._isObject(a[0]))return a;var b=[];for(var c=0;c1?g[1]:"";this.eventListeners[h]||(this.eventListeners[h]=[]),this.eventListeners[h].push({name:i,handler:b})}},off:function(a){var b=a.split(" ");for(var c=0;c1){var h=f[1];for(var i=0;i0&&f[0].getLevel()<=a&&e(f)}var a=this.getLevel(),b=this.getStage(),c=this,d=0;return c.nodeType!=="Stage"&&e(c.getStage().getChildren()),d},getLevel:function(){var a=0,b=this.parent;while(b)a++,b=b.parent;return a},setScale:function(){this.setAttrs({scale:arguments})},getScale:function(){return this.attrs.scale},setPosition:function(){var a=Kinetic.GlobalObject._getXY(arguments);this.setAttrs(a)},setX:function(a){this.setAttrs({x:a})},setY:function(a){this.setAttrs({y:a})},getX:function(){return this.attrs.x},getY:function(){return this.attrs.y},setDetectionType:function(a){this.setAttrs({detectionType:a})},getDetectionType:function(){return this.attrs.detectionType},getPosition:function(){return{x:this.attrs.x,y:this.attrs.y}},getAbsolutePosition:function(){return this.getAbsoluteTransform().getTranslation()},setAbsolutePosition:function(){var a=Kinetic.GlobalObject._getXY(arguments),b=this.attrs.rotation,c={x:this.attrs.scale.x,y:this.attrs.scale.y},d={x:this.attrs.offset.x,y:this.attrs.offset.y};this.attrs.rotation=0,this.attrs.scale={x:1,y:1};var e=this.getAbsoluteTransform();e.invert(),e.translate(a.x,a.y),a={x:this.attrs.x+e.getTranslation().x,y:this.attrs.y+e.getTranslation().y},this.setPosition(a.x,a.y),this.rotate(b),this.attrs.scale={x:c.x,y:c.y}},move:function(){var a=Kinetic.GlobalObject._getXY(arguments),b=this.getX(),c=this.getY();a.x!==undefined&&(b+=a.x),a.y!==undefined&&(c+=a.y),this.setAttrs({x:b,y:c})},setRotation:function(a){this.setAttrs({rotation:a})},setRotationDeg:function(a){this.setRotation(a*Math.PI/180)},getRotation:function(){return this.attrs.rotation},getRotationDeg:function(){return this.attrs.rotation*180/Math.PI},rotate:function(a){this.setAttrs({rotation:this.getRotation()+a})},rotateDeg:function(a){this.setAttrs({rotation:this.getRotation()+a*Math.PI/180})},listen:function(a){this.setAttrs({listen:a})},isListening:function(){return this.attrs.listen},moveToTop:function(){var a=this.index;this.parent.children.splice(a,1),this.parent.children.push(this),this.parent._setChildrenIndices()},moveUp:function(){var a=this.index;this.parent.children.splice(a,1),this.parent.children.splice(a+1,0,this),this.parent._setChildrenIndices()},moveDown:function(){var a=this.index;a>0&&(this.parent.children.splice(a,1),this.parent.children.splice(a-1,0,this),this.parent._setChildrenIndices())},moveToBottom:function(){var a=this.index;this.parent.children.splice(a,1),this.parent.children.unshift(this),this.parent._setChildrenIndices()},setZIndex:function(a){var b=this.index;this.parent.children.splice(b,1),this.parent.children.splice(a,0,this),this.parent._setChildrenIndices()},setAlpha:function(a){this.setAttrs({alpha:a})},getAlpha:function(){return this.attrs.alpha},getAbsoluteAlpha:function(){var a=1,b=this;while(b.nodeType!=="Stage")a*=b.attrs.alpha,b=b.parent;return a},draggable:function(a){this.setAttrs({draggable:a})},isDragging:function(){var a=Kinetic.GlobalObject;return a.drag.node!==undefined&&a.drag.node._id===this._id&&a.drag.moving},moveTo:function(a){var b=this.parent;b.children.splice(this.index,1),b._setChildrenIndices(),a.children.push(this),this.index=a.children.length-1,this.parent=a,a._setChildrenIndices()},getParent:function(){return this.parent},getLayer:function(){return this.nodeType==="Layer"?this:this.getParent().getLayer()},getStage:function(){return this.nodeType==="Stage"?this:this.getParent()===undefined?undefined:this.getParent().getStage()},getName:function(){return this.attrs.name},getId:function(){return this.attrs.id},simulate:function(a){this._handleEvent(a,{})},setOffset:function(){this.setAttrs({offset:arguments})},getOffset:function(){return this.attrs.offset},transitionTo:function(a){var b=Kinetic.GlobalObject;this.transAnim!==undefined&&(b._removeAnimation(this.transAnim),this.transAnim=undefined);var c=this.nodeType==="Stage"?this:this.getLayer(),d=this,e=new Kinetic.Transition(this,a),f={func:function(){e._onEnterFrame()},node:c};return this.transAnim=f,b._addAnimation(f),e.onFinished=function(){b._removeAnimation(f),d.transAnim=undefined,a.callback!==undefined&&a.callback(),f.node.draw()},e.start(),b._handleAnimation(),e},setDragConstraint:function(a){this.setAttrs({dragConstraint:a})},getDragConstraint:function(){return this.attrs.dragConstraint},setDragBounds:function(a){this.setAttrs({dragBounds:a})},getDragBounds:function(){return this.attrs.dragBounds},getAbsoluteTransform:function(){var a=new Kinetic.Transform,b=[],c=this.parent;b.unshift(this);while(c)b.unshift(c),c=c.parent;for(var d=0;d0)this.remove(this.children[0])},add:function(a){a._id=Kinetic.GlobalObject.idCounter++,a.index=this.children.length,a.parent=this,this.children.push(a);var b=a.getStage();if(b===undefined){var c=Kinetic.GlobalObject;c.tempNodes.push(a)}else{b._addId(a),b._addName(a);var c=Kinetic.GlobalObject;c._pullNodes(b)}return this._add!==undefined&&this._add(a),this},remove:function(a){if(a&&a.index!==undefined&&this.children[a.index]._id==a._id){var b=this.getStage();b!==undefined&&(b._removeId(a),b._removeName(a));var c=Kinetic.GlobalObject;for(var d=0;d=0;d--){var e=c[d];if(e.attrs.listen)if(e.nodeType==="Shape"){var f=this._detectEvent(e,b);if(f)return!0}else{var f=this._traverseChildren(e,b);if(f)return!0}}return!1},_handleStageEvent:function(a){var b=new Date,c=b.getTime();this.lastEventTime=c;var d=Kinetic.GlobalObject;a||(a=window.event),this._setMousePosition(a),this._setTouchPosition(a),this.pathLayer.clear(),this.targetFound=!1;var e=!1;for(var f=this.children.length-1;f>=0;f--){var g=this.children[f];if(g.isVisible()&&f>=0&&g.attrs.listen&&this._traverseChildren(g,a)){e=!0;break}}!e&&this.mouseoutShape&&(this.mouseoutShape._handleEvent("mouseout",a),this.mouseoutShape=undefined)},_bindContentEvents:function(){var a=Kinetic.GlobalObject,b=this;this.content.addEventListener("mousedown",function(a){b.mouseDown=!0,b.mouseUp=!1,b.mouseMove=!1,b._handleStageEvent(a),b.attrs.draggable&&b._initDrag()},!1),this.content.addEventListener("mousemove",function(a){var c=b.attrs.throttle,d=new Date,e=d.getTime(),f=e-b.lastEventTime,g=1e3/c;f>=g&&(b.mouseMove=!0,b._handleStageEvent(a))},!1),this.content.addEventListener("mouseup",function(a){b.mouseDown=!1,b.mouseUp=!0,b.mouseMove=!1,b._handleStageEvent(a),b.clickStart=!1},!1),this.content.addEventListener("mouseover",function(a){b._handleStageEvent(a)},!1),this.content.addEventListener("mouseout",function(a){var c=b.targetShape;c&&(c._handleEvent("mouseout",a),b.targetShape=undefined),b.mousePos=undefined},!1),this.content.addEventListener("touchstart",function(a){a.preventDefault(),b.touchStart=!0,b.touchEnd=!1,b.touchMove=!1,b._handleStageEvent(a),b.attrs.draggable&&b._initDrag()},!1),this.content.addEventListener("touchmove",function(a){var c=b.attrs.throttle,d=new Date,e=d.getTime(),f=e-b.lastEventTime,g=1e3/c;f>=g&&(a.preventDefault(),b.touchMove=!0,b._handleStageEvent(a))},!1),this.content.addEventListener("touchend",function(a){b.touchStart=!1,b.touchEnd=!0,b.touchMove=!1,b._handleStageEvent(a),b.tapStart=!1},!1)},_setMousePosition:function(a){var b=a.offsetX||a.clientX-this._getContentPosition().left+window.pageXOffset,c=a.offsetY||a.clientY-this._getContentPosition().top+window.pageYOffset;this.mousePos={x:b,y:c}},_setTouchPosition:function(a){if(a.touches!==undefined&&a.touches.length===1){var b=a.touches[0],c=b.clientX-this._getContentPosition().left+window.pageXOffset,d=b.clientY-this._getContentPosition().top+window.pageYOffset;this.touchPos={x:c,y:d}}},_getContentPosition:function(){var a=this.content,b=0,c=0;while(a&&a.tagName!=="BODY")b+=a.offsetTop-a.scrollTop,c+=a.offsetLeft-a.scrollLeft,a=a.offsetParent;return{top:b,left:c}},_modifyPathContext:function(a){a.stroke=function(){},a.fill=function(){},a.fillRect=function(b,c,d,e){a.rect(b,c,d,e)},a.strokeRect=function(b,c,d,e){a.rect(b,c,d,e)},a.drawImage=function(){},a.fillText=function(){},a.strokeText=function(){}},_endDrag:function(a){var b=Kinetic.GlobalObject;b.drag.node&&b.drag.moving&&(b.drag.moving=!1,b.drag.node._handleEvent("dragend",a)),b.drag.node=undefined},_prepareDrag:function(){var a=this;this._onContent("mousemove touchmove",function(b){var c=Kinetic.GlobalObject,d=c.drag.node;if(d){var e=a.getUserPosition(),f=d.attrs.dragConstraint,g=d.attrs.dragBounds,h={x:d.attrs.x,y:d.attrs.y},i={x:e.x-c.drag.offset.x,y:e.y-c.drag.offset.y};g.left!==undefined&&i.xg.right&&(i.x=g.right),g.top!==undefined&&i.yg.bottom&&(i.y=g.bottom),d.setAbsolutePosition(i),f==="horizontal"?d.attrs.y=h.y:f==="vertical"&&(d.attrs.x=h.x),c.drag.node.nodeType==="Stage"?c.drag.node.draw():c.drag.node.getLayer().draw(),c.drag.moving||(c.drag.moving=!0,c.drag.node._handleEvent("dragstart",b)),c.drag.node._handleEvent("dragmove",b)}},!1),this._onContent("mouseup touchend mouseout",function(b){a._endDrag(b)})},_buildDOM:function(){this.content=document.createElement("div"),this.content.style.position="relative",this.content.style.display="inline-block",this.content.className="kineticjs-content",this.attrs.container.appendChild(this.content),this.bufferLayer=new Kinetic.Layer({name:"bufferLayer"}),this.pathLayer=new Kinetic.Layer({name:"pathLayer"}),this.bufferLayer.parent=this,this.pathLayer.parent=this,this._modifyPathContext(this.pathLayer.context),this.bufferLayer.getCanvas().style.display="none",this.pathLayer.getCanvas().style.display="none",this.bufferLayer.canvas.className="kineticjs-buffer-layer",this.content.appendChild(this.bufferLayer.canvas),this.pathLayer.canvas.className="kineticjs-path-layer",this.content.appendChild(this.pathLayer.canvas),this.setSize(this.attrs.width,this.attrs.height),this._resizeDOM()},_addId:function(a){a.attrs.id!==undefined&&(this.ids[a.attrs.id]=a)},_removeId:function(a){a.attrs.id!==undefined&&(this.ids[a.attrs.id]=undefined)},_addName:function(a){var b=a.attrs.name;b!==undefined&&(this.names[b]===undefined&&(this.names[b]=[]),this.names[b].push(a))},_removeName:function(a){if(a.attrs.name!==undefined){var b=this.names[a.attrs.name];if(b!==undefined){for(var c=0;c=e)this._draw(),this.drawTimeout!==undefined&&(clearTimeout(this.drawTimeout),this.drawTimeout=undefined);else if(this.drawTimeout===undefined){var f=this;this.drawTimeout=setTimeout(function(){f.draw()},17)}},setThrottle:function(a){this.attrs.throttle=a},getThrottle:function(){return this.attrs.throttle},beforeDraw:function(a){this.beforeDrawFunc=a},afterDraw:function(a){this.afterDrawFunc=a},clear:function(){var a=this.getContext(),b=this.getCanvas();a.clearRect(0,0,b.width,b.height)},getCanvas:function(){return this.canvas},getContext:function(){return this.context},_draw:function(){var a=new Date,b=a.getTime();this.lastDrawTime=b,this.beforeDrawFunc!==undefined&&this.beforeDrawFunc.call(this),this.clear(),this.isVisible()&&(this.attrs.drawFunc!==undefined&&this.attrs.drawFunc.call(this),this._drawChildren()),this.afterDrawFunc!==undefined&&this.afterDrawFunc.call(this)}},Kinetic.GlobalObject.extend(Kinetic.Layer,Kinetic.Container),Kinetic.GlobalObject.extend(Kinetic.Layer,Kinetic.Node),Kinetic.Group=function(a){this.nodeType="Group",Kinetic.Container.apply(this,[]),Kinetic.Node.apply(this,[a])},Kinetic.Group.prototype={draw:function(){this.attrs.visible&&this._drawChildren()}},Kinetic.GlobalObject.extend(Kinetic.Group,Kinetic.Container),Kinetic.GlobalObject.extend(Kinetic.Group,Kinetic.Node),Kinetic.Shape=function(a){this.setDefaultAttrs({fill:undefined,stroke:undefined,strokeWidth:undefined,lineJoin:undefined,detectionType:"path",shadow:{blur:10,alpha:1,offset:{x:0,y:0}}}),this.data=[],this.nodeType="Shape",this.appliedShadow=!1,Kinetic.Node.apply(this,[a])},Kinetic.Shape.prototype={getContext:function(){return this.tempLayer===undefined?null:this.tempLayer.getContext()},getCanvas:function(){return this.tempLayer.getCanvas()},stroke:function(){var a=!1,b=this.getContext();b.save();if(!!this.attrs.stroke||!!this.attrs.strokeWidth){this.appliedShadow||(a=this._applyShadow());var c=this.attrs.stroke?this.attrs.stroke:"black",d=this.attrs.strokeWidth?this.attrs.strokeWidth:2;b.lineWidth=d,b.strokeStyle=c,b.stroke()}b.restore(),a&&this.stroke()},fill:function(){var a=!1,b=this.getContext();b.save();var c=this.attrs.fill;if(!!c){this.appliedShadow||(a=this._applyShadow());var d=c.start,e=c.end,f=null;if(typeof c=="string")f=this.attrs.fill,b.fillStyle=f,b.fill();else if(c.image!==undefined){var g=c.repeat===undefined?"repeat":c.repeat;f=b.createPattern(c.image,g),b.save(),c.offset!==undefined&&b.translate(c.offset.x,c.offset.y),b.fillStyle=f,b.fill(),b.restore()}else if(d.radius===undefined&&e.radius===undefined){var b=this.getContext(),h=b.createLinearGradient(d.x,d.y,e.x,e.y),i=c.colorStops;for(var j=0;j0){var f=this.attrs.points[c-1].x,g=this.attrs.points[c-1].y;this._dashedLine(f,g,d,e,this.attrs.dashArray)}else a.lineTo(d,e)}!this.attrs.lineCap||(a.lineCap=this.attrs.lineCap),this.stroke()},Kinetic.Shape.apply(this,[a])},Kinetic.Line.prototype={setPoints:function(a){this.setAttrs({points:a})},getPoints:function(){return this.attrs.points},setLineCap:function(a){this.attrs.lineCap=a},getLineCap:function(){return this.attrs.lineCap},setDashArray:function(a){this.attrs.dashArray=a},getDashArray:function(){return this.attrs.dashArray},_dashedLine:function(a,b,c,d,e){var f=this.getContext(),g=e.length,h=c-a,i=d-b,j=h>i,k=j?i/h:h/i;k>9999?k=9999:k<-9999&&(k=-9999);var l=Math.sqrt(h*h+i*i),m=0,n=!0;while(l>=.1&&m<1e4){var o=e[m++%g];o===0&&(o=.001),o>l&&(o=l);var p=Math.sqrt(o*o/(1+k*k));j?(a+=h<0&&i<0?p*-1:p,b+=h<0&&i<0?k*p*-1:k*p):(a+=h<0&&i<0?k*p*-1:k*p,b+=h<0&&i<0?p*-1:p),f[n?"lineTo":"moveTo"](a,b),l-=o,n=!n}f.moveTo(c,d)}},Kinetic.GlobalObject.extend(Kinetic.Line,Kinetic.Shape),Kinetic.Path=function(a){this.shapeType="Path",this.dataArray=[],a.drawFunc=function(){var a=this.getContext(),b=this.dataArray;a.beginPath();for(var c=0;ci?h:i,o=h>i?1:h/i,p=h>i?i/h:1;a.translate(f,g),a.rotate(l),a.scale(o,p),a.arc(0,0,n,j,j+k,1-m),a.scale(1/o,1/p),a.rotate(-l),a.translate(-f,-g);break;case"z":a.closePath()}}this.fill(),this.stroke()},Kinetic.Shape.apply(this,[a]),this.dataArray=this.getDataArray()},Kinetic.Path.prototype={getDataArray:function(){var a=this.attrs.data,b=["m","M","l","L","v","V","h","H","z","Z","c","C","q","Q","t","T","s","S","a","A"];a=a.replace(new RegExp(" ","g"),",");for(var c=0;c0&&j[0]===""&&j.shift();for(var k=0;k0){if(isNaN(j[0]))break;var l=undefined,m=[];switch(i){case"l":f+=j.shift(),g+=j.shift(),l="L",m.push(f,g);break;case"L":f=j.shift(),g=j.shift(),m.push(f,g);break;case"m":f+=j.shift(),g+=j.shift(),l="M",m.push(f,g),i="l";break;case"M":f=j.shift(),g=j.shift(),l="M",m.push(f,g),i="L";break;case"h":f+=j.shift(),l="L",m.push(f,g);break;case"H":f=j.shift(),l="L",m.push(f,g);break;case"v":g+=j.shift(),l="L",m.push(f,g);break;case"V":g=j.shift(),l="L",m.push(f,g);break;case"C":m.push(j.shift(),j.shift(),j.shift(),j.shift()),f=j.shift(),g=j.shift(),m.push(f,g);break;case"c":m.push(f+j.shift(),g+j.shift(),f+j.shift(),g+j.shift()),f+=j.shift(),g+=j.shift(),l="C",m.push(f,g);break;case"S":var n=f,o=g,p=e[e.length-1];p.command==="C"&&(n=f+(f-p.points[2]),o=g+(g-p.points[3])),m.push(n,o,j.shift(),j.shift()),f=j.shift(),g=j.shift(),l="C",m.push(f,g);break;case"s":var n=f,o=g,p=e[e.length-1];p.command==="C"&&(n=f+(f-p.points[2]),o=g+(g-p.points[3])),m.push(n,o,f+j.shift(),g+j.shift()),f+=j.shift(),g+=j.shift(),l="C",m.push(f,g);break;case"Q":m.push(j.shift(),j.shift()),f=j.shift(),g=j.shift(),m.push(f,g);break;case"q":m.push(f+j.shift(),g+j.shift()),f+=j.shift(),g+=j.shift(),l="Q",m.push(f,g);break;case"T":var n=f,o=g,p=e[e.length-1];p.command==="Q"&&(n=f+(f-p.points[0]),o=g+(g-p.points[1])),f=j.shift(),g=j.shift(),l="Q",m.push(n,o,f,g);break;case"t":var n=f,o=g,p=e[e.length-1];p.command==="Q"&&(n=f+(f-p.points[0]),o=g+(g-p.points[1])),f+=j.shift(),g+=j.shift(),l="Q",m.push(n,o,f,g);break;case"A":var q=j.shift(),r=j.shift(),s=j.shift(),t=j.shift(),u=j.shift(),v=f,w=g;f=j.shift(),g=j.shift(),l="A",m=this._convertEndpointToCenterParameterization(v,w,f,g,t,u,q,r,s);break;case"a":var q=j.shift(),r=j.shift(),s=j.shift(),t=j.shift(),u=j.shift(),v=f,w=g;f+=j.shift(),g+=j.shift(),l="A",m=this._convertEndpointToCenterParameterization(v,w,f,g,t,u,q,r,s)}e.push({command:l||i,points:m})}(i==="z"||i==="Z")&&e.push({command:"z",points:[]})}return e},getData:function(){return this.attrs.data},setData:function(a){this.attrs.data=a,this.dataArray=this.getDataArray()},_convertEndpointToCenterParameterization:function(a,b,c,d,e,f,g,h,i){var j=i*(Math.PI/180),k=Math.cos(j)*(a-c)/2+Math.sin(j)*(b-d)/2,l=-1*Math.sin(j)*(a-c)/2+Math.cos(j)*(b-d)/2,m=k*k/(g*g)+l*l/(h*h);m>1&&(g*=Math.sqrt(m),h*=Math.sqrt(m));var n=Math.sqrt((g*g*h*h-g*g*l*l-h*h*k*k)/(g*g*l*l+h*h*k*k));e==f&&(n*=-1),isNaN(n)&&(n=0);var o=n*g*l/h,p=n*-h*k/g,q=(a+c)/2+Math.cos(j)*o-Math.sin(j)*p,r=(b+d)/2+Math.sin(j)*o+Math.cos(j)*p,s=function(a){return Math.sqrt(a[0]*a[0]+a[1]*a[1])},t=function(a,b){return(a[0]*b[0]+a[1]*b[1])/(s(a)*s(b))},u=function(a,b){return(a[0]*b[1]=1&&(y=0),f==0&&y>0&&(y-=2*Math.PI),f==1&&y<0&&(y+=2*Math.PI),[q,r,g,h,v,y,j,f]}},Kinetic.GlobalObject.extend(Kinetic.Path,Kinetic.Shape),Kinetic.Transform=function(){this.m=[1,0,0,1,0,0]},Kinetic.Transform.prototype={translate:function(a,b){this.m[4]+=this.m[0]*a+this.m[2]*b,this.m[5]+=this.m[1]*a+this.m[3]*b},scale:function(a,b){this.m[0]*=a,this.m[1]*=a,this.m[2]*=b,this.m[3]*=b},rotate:function(a){var b=Math.cos(a),c=Math.sin(a),d=this.m[0]*b+this.m[2]*c,e=this.m[1]*b+this.m[3]*c,f=this.m[0]*-c+this.m[2]*b,g=this.m[1]*-c+this.m[3]*b;this.m[0]=d,this.m[1]=e,this.m[2]=f,this.m[3]=g},getTranslation:function(){return{x:this.m[4],y:this.m[5]}},multiply:function(a){var b=this.m[0]*a.m[0]+this.m[2]*a.m[1],c=this.m[1]*a.m[0]+this.m[3]*a.m[1],d=this.m[0]*a.m[2]+this.m[2]*a.m[3],e=this.m[1]*a.m[2]+this.m[3]*a.m[3],f=this.m[0]*a.m[4]+this.m[2]*a.m[5]+this.m[4],g=this.m[1]*a.m[4]+this.m[3]*a.m[5]+this.m[5];this.m[0]=b,this.m[1]=c,this.m[2]=d,this.m[3]=e,this.m[4]=f,this.m[5]=g},invert:function(){var a=1/(this.m[0]*this.m[3]-this.m[1]*this.m[2]),b=this.m[3]*a,c=-this.m[1]*a,d=-this.m[2]*a,e=this.m[0]*a,f=a*(this.m[2]*this.m[5]-this.m[3]*this.m[4]),g=a*(this.m[1]*this.m[4]-this.m[0]*this.m[5]);this.m[0]=b,this.m[1]=c,this.m[2]=d,this.m[3]=e,this.m[4]=f,this.m[5]=g},getMatrix:function(){return this.m}},Kinetic.Transition=function(a,b){function d(a,b){for(var e in a)e!=="duration"&&e!=="easing"&&e!=="callback"&&(Kinetic.GlobalObject._isObject(a[e])?d(a[e],b[e]):c._add(c._getTween(b,e,a[e])))}this.node=a,this.config=b,this.tweens=[];var c=this;d(b,a.attrs);var e=0;for(var f=0;f=c.tweens.length&&c.onFinished()}}},Kinetic.Transition.prototype={start:function(){for(var a=0;athis.getDuration()?this.looping?(this.rewind(a-this._duration),this.update(),this.broadcastMessage("onLooped",{target:this,type:"onLooped"})):(this._time=this._duration,this.update(),this.stop(),this.broadcastMessage("onFinished",{target:this,type:"onFinished"})):a<0?(this.rewind(),this.update()):(this._time=a,this.update())},getTime:function(){return this._time},setDuration:function(a){this._duration=a===null||a<=0?1e5:a},getDuration:function(){return this._duration},setPosition:function(a){this.prevPos=this._pos,this.propFunc(a),this._pos=a,this.broadcastMessage("onChanged",{target:this,type:"onChanged"})},getPosition:function(a){return a===undefined&&(a=this._time),this.func(a,this.begin,this._change,this._duration)},setFinish:function(a){this._change=a-this.begin},getFinish:function(){return this.begin+this._change},start:function(){this.rewind(),this.startEnterFrame(),this.broadcastMessage("onStarted",{target:this,type:"onStarted"})},rewind:function(a){this.stop(),this._time=a===undefined?0:a,this.fixTime(),this.update()},fforward:function(){this._time=this._duration,this.fixTime(),this.update()},update:function(){this.setPosition(this.getPosition(this._time))},startEnterFrame:function(){this.stopEnterFrame(),this.isPlaying=!0,this.onEnterFrame()},onEnterFrame:function(){this.isPlaying&&this.nextFrame()},nextFrame:function(){this.setTime((this.getTimer()-this._startTime)/1e3)},stop:function(){this.stopEnterFrame(),this.broadcastMessage("onStopped",{target:this,type:"onStopped"})},stopEnterFrame:function(){this.isPlaying=!1},continueTo:function(a,b){this.begin=this._pos,this.setFinish(a),this._duration!==undefined&&this.setDuration(b),this.start()},resume:function(){this.fixTime(),this.startEnterFrame(),this.broadcastMessage("onResumed",{target:this,type:"onResumed"})},yoyo:function(){this.continueTo(this.begin,this._time)},addListener:function(a){return this.removeListener(a),this._listeners.push(a)},removeListener:function(a){var b=this._listeners,c=b.length;while(c--)if(b[c]==a)return b.splice(c,1),!0;return!1},broadcastMessage:function(){var a=[];for(var b=0;b0){this._updateFrameObject(),this._runFrames();var a=this;requestAnimFrame(function(){a._animationLoop()})}else this.animRunning=!1,this.frame.lastTime=0},_handleAnimation:function(){var a=this;this.animRunning?this.frame.lastTime=0:(this.animRunning=!0,a._animationLoop())},_isElement:function(a){return!!a&&a.nodeType==1},_isFunction:function(a){return!!(a&&a.constructor&&a.call&&a.apply)},_isArray:function(a){return a.length!==undefined},_isObject:function(a){return a===Object(a)},_isNumber:function(a){return Object.prototype.toString.call(a)=="[object Number]"},_hasMethods:function(a){var b=[];for(var c in a)this._isFunction(a[c])&&b.push(c);return b.length>0},_getXY:function(a){if(this._isNumber(a))return{x:a,y:a};if(this._isArray(a)){if(a.length===1){var b=a[0];if(this._isNumber(b))return{x:b,y:b};if(this._isArray(b))return{x:b[0],y:b[1]};if(this._isObject(b))return b}else if(a.length>=2)return{x:a[0],y:a[1]}}else if(this._isObject(a))return a;return{x:0,y:0}},_getSize:function(a){if(this._isNumber(a))return{width:a,height:a};if(this._isArray(a))if(a.length===1){var b=a[0];if(this._isNumber(b))return{width:b,height:b};if(this._isArray(b)){if(b.length>=4)return{width:b[2],height:b[3]};if(b.length>=2)return{width:b[0],height:b[1]}}else if(this._isObject(b))return b}else{if(a.length>=4)return{width:a[2],height:a[3]};if(a.length>=2)return{width:a[0],height:a[1]}}else if(this._isObject(a))return a;return{width:0,height:0}},_getPoints:function(a){if(a===undefined)return[];if(this._isObject(a[0]))return a;var b=[];for(var c=0;c1?g[1]:"";this.eventListeners[h]||(this.eventListeners[h]=[]),this.eventListeners[h].push({name:i,handler:b})}},off:function(a){var b=a.split(" ");for(var c=0;c1){var h=f[1];for(var i=0;i0&&f[0].getLevel()<=a&&e(f)}var a=this.getLevel(),b=this.getStage(),c=this,d=0;return c.nodeType!=="Stage"&&e(c.getStage().getChildren()),d},getLevel:function(){var a=0,b=this.parent;while(b)a++,b=b.parent;return a},setScale:function(){this.setAttrs({scale:arguments})},getScale:function(){return this.attrs.scale},setPosition:function(){var a=Kinetic.GlobalObject._getXY(arguments);this.setAttrs(a)},setX:function(a){this.setAttrs({x:a})},setY:function(a){this.setAttrs({y:a})},getX:function(){return this.attrs.x},getY:function(){return this.attrs.y},setDetectionType:function(a){this.setAttrs({detectionType:a})},getDetectionType:function(){return this.attrs.detectionType},getPosition:function(){return{x:this.attrs.x,y:this.attrs.y}},getAbsolutePosition:function(){return this.getAbsoluteTransform().getTranslation()},setAbsolutePosition:function(){var a=Kinetic.GlobalObject._getXY(arguments),b=this.attrs.rotation,c={x:this.attrs.scale.x,y:this.attrs.scale.y},d={x:this.attrs.offset.x,y:this.attrs.offset.y};this.attrs.rotation=0,this.attrs.scale={x:1,y:1};var e=this.getAbsoluteTransform();e.invert(),e.translate(a.x,a.y),a={x:this.attrs.x+e.getTranslation().x,y:this.attrs.y+e.getTranslation().y},this.setPosition(a.x,a.y),this.rotate(b),this.attrs.scale={x:c.x,y:c.y}},move:function(){var a=Kinetic.GlobalObject._getXY(arguments),b=this.getX(),c=this.getY();a.x!==undefined&&(b+=a.x),a.y!==undefined&&(c+=a.y),this.setAttrs({x:b,y:c})},setRotation:function(a){this.setAttrs({rotation:a})},setRotationDeg:function(a){this.setRotation(a*Math.PI/180)},getRotation:function(){return this.attrs.rotation},getRotationDeg:function(){return this.attrs.rotation*180/Math.PI},rotate:function(a){this.setAttrs({rotation:this.getRotation()+a})},rotateDeg:function(a){this.setAttrs({rotation:this.getRotation()+a*Math.PI/180})},listen:function(a){this.setAttrs({listen:a})},isListening:function(){return this.attrs.listen},moveToTop:function(){var a=this.index;this.parent.children.splice(a,1),this.parent.children.push(this),this.parent._setChildrenIndices()},moveUp:function(){var a=this.index;this.parent.children.splice(a,1),this.parent.children.splice(a+1,0,this),this.parent._setChildrenIndices()},moveDown:function(){var a=this.index;a>0&&(this.parent.children.splice(a,1),this.parent.children.splice(a-1,0,this),this.parent._setChildrenIndices())},moveToBottom:function(){var a=this.index;this.parent.children.splice(a,1),this.parent.children.unshift(this),this.parent._setChildrenIndices()},setZIndex:function(a){var b=this.index;this.parent.children.splice(b,1),this.parent.children.splice(a,0,this),this.parent._setChildrenIndices()},setAlpha:function(a){this.setAttrs({alpha:a})},getAlpha:function(){return this.attrs.alpha},getAbsoluteAlpha:function(){var a=1,b=this;while(b.nodeType!=="Stage")a*=b.attrs.alpha,b=b.parent;return a},draggable:function(a){this.setAttrs({draggable:a})},isDragging:function(){var a=Kinetic.GlobalObject;return a.drag.node!==undefined&&a.drag.node._id===this._id&&a.drag.moving},moveTo:function(a){var b=this.parent;b.children.splice(this.index,1),b._setChildrenIndices(),a.children.push(this),this.index=a.children.length-1,this.parent=a,a._setChildrenIndices()},getParent:function(){return this.parent},getLayer:function(){return this.nodeType==="Layer"?this:this.getParent().getLayer()},getStage:function(){return this.nodeType==="Stage"?this:this.getParent()===undefined?undefined:this.getParent().getStage()},getName:function(){return this.attrs.name},getId:function(){return this.attrs.id},simulate:function(a){this._handleEvent(a,{})},setOffset:function(){this.setAttrs({offset:arguments})},getOffset:function(){return this.attrs.offset},transitionTo:function(a){var b=Kinetic.GlobalObject;this.transAnim!==undefined&&(b._removeAnimation(this.transAnim),this.transAnim=undefined);var c=this.nodeType==="Stage"?this:this.getLayer(),d=this,e=new Kinetic.Transition(this,a),f={func:function(){e._onEnterFrame()},node:c};return this.transAnim=f,b._addAnimation(f),e.onFinished=function(){b._removeAnimation(f),d.transAnim=undefined,a.callback!==undefined&&a.callback(),f.node.draw()},e.start(),b._handleAnimation(),e},setDragConstraint:function(a){this.setAttrs({dragConstraint:a})},getDragConstraint:function(){return this.attrs.dragConstraint},setDragBounds:function(a){this.setAttrs({dragBounds:a})},getDragBounds:function(){return this.attrs.dragBounds},getAbsoluteTransform:function(){var a=new Kinetic.Transform,b=[],c=this.parent;b.unshift(this);while(c)b.unshift(c),c=c.parent;for(var d=0;d0)this.remove(this.children[0])},add:function(a){a._id=Kinetic.GlobalObject.idCounter++,a.index=this.children.length,a.parent=this,this.children.push(a);var b=a.getStage();if(b===undefined){var c=Kinetic.GlobalObject;c.tempNodes.push(a)}else{b._addId(a),b._addName(a);var c=Kinetic.GlobalObject;c._pullNodes(b)}return this._add!==undefined&&this._add(a),this},remove:function(a){if(a&&a.index!==undefined&&this.children[a.index]._id==a._id){var b=this.getStage();b!==undefined&&(b._removeId(a),b._removeName(a));var c=Kinetic.GlobalObject;for(var d=0;d=0;d--){var e=c[d];if(e.attrs.listen)if(e.nodeType==="Shape"){var f=this._detectEvent(e,b);if(f)return!0}else{var f=this._traverseChildren(e,b);if(f)return!0}}return!1},_handleStageEvent:function(a){var b=new Date,c=b.getTime();this.lastEventTime=c;var d=Kinetic.GlobalObject;a||(a=window.event),this._setMousePosition(a),this._setTouchPosition(a),this.pathLayer.clear(),this.targetFound=!1;var e=!1;for(var f=this.children.length-1;f>=0;f--){var g=this.children[f];if(g.isVisible()&&f>=0&&g.attrs.listen&&this._traverseChildren(g,a)){e=!0;break}}!e&&this.mouseoutShape&&(this.mouseoutShape._handleEvent("mouseout",a),this.mouseoutShape=undefined)},_bindContentEvents:function(){var a=Kinetic.GlobalObject,b=this;this.content.addEventListener("mousedown",function(a){b.mouseDown=!0,b.mouseUp=!1,b.mouseMove=!1,b._handleStageEvent(a),b.attrs.draggable&&b._initDrag()},!1),this.content.addEventListener("mousemove",function(a){var c=b.attrs.throttle,d=new Date,e=d.getTime(),f=e-b.lastEventTime,g=1e3/c;f>=g&&(b.mouseMove=!0,b._handleStageEvent(a))},!1),this.content.addEventListener("mouseup",function(a){b.mouseDown=!1,b.mouseUp=!0,b.mouseMove=!1,b._handleStageEvent(a),b.clickStart=!1},!1),this.content.addEventListener("mouseover",function(a){b._handleStageEvent(a)},!1),this.content.addEventListener("mouseout",function(a){var c=b.targetShape;c&&(c._handleEvent("mouseout",a),b.targetShape=undefined),b.mousePos=undefined},!1),this.content.addEventListener("touchstart",function(a){a.preventDefault(),b.touchStart=!0,b.touchEnd=!1,b.touchMove=!1,b._handleStageEvent(a),b.attrs.draggable&&b._initDrag()},!1),this.content.addEventListener("touchmove",function(a){var c=b.attrs.throttle,d=new Date,e=d.getTime(),f=e-b.lastEventTime,g=1e3/c;f>=g&&(a.preventDefault(),b.touchMove=!0,b._handleStageEvent(a))},!1),this.content.addEventListener("touchend",function(a){b.touchStart=!1,b.touchEnd=!0,b.touchMove=!1,b._handleStageEvent(a),b.tapStart=!1},!1)},_setMousePosition:function(a){var b=a.offsetX||a.clientX-this._getContentPosition().left+window.pageXOffset,c=a.offsetY||a.clientY-this._getContentPosition().top+window.pageYOffset;this.mousePos={x:b,y:c}},_setTouchPosition:function(a){if(a.touches!==undefined&&a.touches.length===1){var b=a.touches[0],c=b.clientX-this._getContentPosition().left+window.pageXOffset,d=b.clientY-this._getContentPosition().top+window.pageYOffset;this.touchPos={x:c,y:d}}},_getContentPosition:function(){var a=this.content,b=0,c=0;while(a&&a.tagName!=="BODY")b+=a.offsetTop-a.scrollTop,c+=a.offsetLeft-a.scrollLeft,a=a.offsetParent;return{top:b,left:c}},_modifyPathContext:function(a){a.stroke=function(){},a.fill=function(){},a.fillRect=function(b,c,d,e){a.rect(b,c,d,e)},a.strokeRect=function(b,c,d,e){a.rect(b,c,d,e)},a.drawImage=function(){},a.fillText=function(){},a.strokeText=function(){}},_endDrag:function(a){var b=Kinetic.GlobalObject;b.drag.node&&b.drag.moving&&(b.drag.moving=!1,b.drag.node._handleEvent("dragend",a)),b.drag.node=undefined},_prepareDrag:function(){var a=this;this._onContent("mousemove touchmove",function(b){var c=Kinetic.GlobalObject,d=c.drag.node;if(d){var e=a.getUserPosition(),f=d.attrs.dragConstraint,g=d.attrs.dragBounds,h={x:d.attrs.x,y:d.attrs.y},i={x:e.x-c.drag.offset.x,y:e.y-c.drag.offset.y};g.left!==undefined&&i.xg.right&&(i.x=g.right),g.top!==undefined&&i.yg.bottom&&(i.y=g.bottom),d.setAbsolutePosition(i),f==="horizontal"?d.attrs.y=h.y:f==="vertical"&&(d.attrs.x=h.x),c.drag.node.nodeType==="Stage"?c.drag.node.draw():c.drag.node.getLayer().draw(),c.drag.moving||(c.drag.moving=!0,c.drag.node._handleEvent("dragstart",b)),c.drag.node._handleEvent("dragmove",b)}},!1),this._onContent("mouseup touchend mouseout",function(b){a._endDrag(b)})},_buildDOM:function(){this.content=document.createElement("div"),this.content.style.position="relative",this.content.style.display="inline-block",this.content.className="kineticjs-content",this.attrs.container.appendChild(this.content),this.bufferLayer=new Kinetic.Layer({name:"bufferLayer"}),this.pathLayer=new Kinetic.Layer({name:"pathLayer"}),this.bufferLayer.parent=this,this.pathLayer.parent=this,this._modifyPathContext(this.pathLayer.context),this.bufferLayer.getCanvas().style.display="none",this.pathLayer.getCanvas().style.display="none",this.bufferLayer.canvas.className="kineticjs-buffer-layer",this.content.appendChild(this.bufferLayer.canvas),this.pathLayer.canvas.className="kineticjs-path-layer",this.content.appendChild(this.pathLayer.canvas),this.setSize(this.attrs.width,this.attrs.height),this._resizeDOM()},_addId:function(a){a.attrs.id!==undefined&&(this.ids[a.attrs.id]=a)},_removeId:function(a){a.attrs.id!==undefined&&(this.ids[a.attrs.id]=undefined)},_addName:function(a){var b=a.attrs.name;b!==undefined&&(this.names[b]===undefined&&(this.names[b]=[]),this.names[b].push(a))},_removeName:function(a){if(a.attrs.name!==undefined){var b=this.names[a.attrs.name];if(b!==undefined){for(var c=0;c=e)this._draw(),this.drawTimeout!==undefined&&(clearTimeout(this.drawTimeout),this.drawTimeout=undefined);else if(this.drawTimeout===undefined){var f=this;this.drawTimeout=setTimeout(function(){f.draw()},17)}},setThrottle:function(a){this.attrs.throttle=a},getThrottle:function(){return this.attrs.throttle},beforeDraw:function(a){this.beforeDrawFunc=a},afterDraw:function(a){this.afterDrawFunc=a},clear:function(){var a=this.getContext(),b=this.getCanvas();a.clearRect(0,0,b.width,b.height)},getCanvas:function(){return this.canvas},getContext:function(){return this.context},_draw:function(){var a=new Date,b=a.getTime();this.lastDrawTime=b,this.beforeDrawFunc!==undefined&&this.beforeDrawFunc.call(this),this.clear(),this.isVisible()&&(this.attrs.drawFunc!==undefined&&this.attrs.drawFunc.call(this),this._drawChildren()),this.afterDrawFunc!==undefined&&this.afterDrawFunc.call(this)}},Kinetic.GlobalObject.extend(Kinetic.Layer,Kinetic.Container),Kinetic.GlobalObject.extend(Kinetic.Layer,Kinetic.Node),Kinetic.Group=function(a){this.nodeType="Group",Kinetic.Container.apply(this,[]),Kinetic.Node.apply(this,[a])},Kinetic.Group.prototype={draw:function(){this.attrs.visible&&this._drawChildren()}},Kinetic.GlobalObject.extend(Kinetic.Group,Kinetic.Container),Kinetic.GlobalObject.extend(Kinetic.Group,Kinetic.Node),Kinetic.Shape=function(a){this.setDefaultAttrs({fill:undefined,stroke:undefined,strokeWidth:undefined,lineJoin:undefined,detectionType:"path",shadow:{blur:10,alpha:1,offset:{x:0,y:0}}}),this.data=[],this.nodeType="Shape",this.appliedShadow=!1,Kinetic.Node.apply(this,[a])},Kinetic.Shape.prototype={getContext:function(){return this.tempLayer===undefined?null:this.tempLayer.getContext()},getCanvas:function(){return this.tempLayer.getCanvas()},stroke:function(){var a=!1,b=this.getContext();b.save();if(!!this.attrs.stroke||!!this.attrs.strokeWidth){this.appliedShadow||(a=this._applyShadow());var c=this.attrs.stroke?this.attrs.stroke:"black",d=this.attrs.strokeWidth?this.attrs.strokeWidth:2;b.lineWidth=d,b.strokeStyle=c,b.stroke()}b.restore(),a&&this.stroke()},fill:function(){var a=!1,b=this.getContext();b.save();var c=this.attrs.fill;if(!!c){this.appliedShadow||(a=this._applyShadow());var d=c.start,e=c.end,f=null;if(typeof c=="string")f=this.attrs.fill,b.fillStyle=f,b.fill();else if(c.image!==undefined){var g=c.repeat===undefined?"repeat":c.repeat;f=b.createPattern(c.image,g),b.save(),c.offset!==undefined&&b.translate(c.offset.x,c.offset.y),b.fillStyle=f,b.fill(),b.restore()}else if(d.radius===undefined&&e.radius===undefined){var b=this.getContext(),h=b.createLinearGradient(d.x,d.y,e.x,e.y),i=c.colorStops;for(var j=0;j0){var f=this.attrs.points[c-1].x,g=this.attrs.points[c-1].y;this._dashedLine(f,g,d,e,this.attrs.dashArray)}else a.lineTo(d,e)}!this.attrs.lineCap||(a.lineCap=this.attrs.lineCap),this.stroke()},Kinetic.Shape.apply(this,[a])},Kinetic.Line.prototype={setPoints:function(a){this.setAttrs({points:a})},getPoints:function(){return this.attrs.points},setLineCap:function(a){this.setAttrs({lineCap:a})},getLineCap:function(){return this.attrs.lineCap},setDashArray:function(a){this.setAttrs({dashArray:a})},getDashArray:function(){return this.attrs.dashArray},_dashedLine:function(a,b,c,d,e){var f=this.getContext(),g=e.length,h=c-a,i=d-b,j=h>i,k=j?i/h:h/i;k>9999?k=9999:k<-9999&&(k=-9999);var l=Math.sqrt(h*h+i*i),m=0,n=!0;while(l>=.1&&m<1e4){var o=e[m++%g];o===0&&(o=.001),o>l&&(o=l);var p=Math.sqrt(o*o/(1+k*k));j?(a+=h<0&&i<0?p*-1:p,b+=h<0&&i<0?k*p*-1:k*p):(a+=h<0&&i<0?k*p*-1:k*p,b+=h<0&&i<0?p*-1:p),f[n?"lineTo":"moveTo"](a,b),l-=o,n=!n}f.moveTo(c,d)}},Kinetic.GlobalObject.extend(Kinetic.Line,Kinetic.Shape),Kinetic.Path=function(a){this.shapeType="Path",this.dataArray=[],a.drawFunc=function(){var a=this.getContext(),b=this.dataArray;a.beginPath();for(var c=0;ci?h:i,o=h>i?1:h/i,p=h>i?i/h:1;a.translate(f,g),a.rotate(l),a.scale(o,p),a.arc(0,0,n,j,j+k,1-m),a.scale(1/o,1/p),a.rotate(-l),a.translate(-f,-g);break;case"z":a.closePath()}}this.fill(),this.stroke()},Kinetic.Shape.apply(this,[a]),this.dataArray=this.getDataArray()},Kinetic.Path.prototype={getDataArray:function(){var a=this.attrs.data,b=["m","M","l","L","v","V","h","H","z","Z","c","C","q","Q","t","T","s","S","a","A"];a=a.replace(new RegExp(" ","g"),",");for(var c=0;c0&&j[0]===""&&j.shift();for(var k=0;k0){if(isNaN(j[0]))break;var l=undefined,m=[];switch(i){case"l":f+=j.shift(),g+=j.shift(),l="L",m.push(f,g);break;case"L":f=j.shift(),g=j.shift(),m.push(f,g);break;case"m":f+=j.shift(),g+=j.shift(),l="M",m.push(f,g),i="l";break;case"M":f=j.shift(),g=j.shift(),l="M",m.push(f,g),i="L";break;case"h":f+=j.shift(),l="L",m.push(f,g);break;case"H":f=j.shift(),l="L",m.push(f,g);break;case"v":g+=j.shift(),l="L",m.push(f,g);break;case"V":g=j.shift(),l="L",m.push(f,g);break;case"C":m.push(j.shift(),j.shift(),j.shift(),j.shift()),f=j.shift(),g=j.shift(),m.push(f,g);break;case"c":m.push(f+j.shift(),g+j.shift(),f+j.shift(),g+j.shift()),f+=j.shift(),g+=j.shift(),l="C",m.push(f,g);break;case"S":var n=f,o=g,p=e[e.length-1];p.command==="C"&&(n=f+(f-p.points[2]),o=g+(g-p.points[3])),m.push(n,o,j.shift(),j.shift()),f=j.shift(),g=j.shift(),l="C",m.push(f,g);break;case"s":var n=f,o=g,p=e[e.length-1];p.command==="C"&&(n=f+(f-p.points[2]),o=g+(g-p.points[3])),m.push(n,o,f+j.shift(),g+j.shift()),f+=j.shift(),g+=j.shift(),l="C",m.push(f,g);break;case"Q":m.push(j.shift(),j.shift()),f=j.shift(),g=j.shift(),m.push(f,g);break;case"q":m.push(f+j.shift(),g+j.shift()),f+=j.shift(),g+=j.shift(),l="Q",m.push(f,g);break;case"T":var n=f,o=g,p=e[e.length-1];p.command==="Q"&&(n=f+(f-p.points[0]),o=g+(g-p.points[1])),f=j.shift(),g=j.shift(),l="Q",m.push(n,o,f,g);break;case"t":var n=f,o=g,p=e[e.length-1];p.command==="Q"&&(n=f+(f-p.points[0]),o=g+(g-p.points[1])),f+=j.shift(),g+=j.shift(),l="Q",m.push(n,o,f,g);break;case"A":var q=j.shift(),r=j.shift(),s=j.shift(),t=j.shift(),u=j.shift(),v=f,w=g;f=j.shift(),g=j.shift(),l="A",m=this._convertEndpointToCenterParameterization(v,w,f,g,t,u,q,r,s);break;case"a":var q=j.shift(),r=j.shift(),s=j.shift(),t=j.shift(),u=j.shift(),v=f,w=g;f+=j.shift(),g+=j.shift(),l="A",m=this._convertEndpointToCenterParameterization(v,w,f,g,t,u,q,r,s)}e.push({command:l||i,points:m})}(i==="z"||i==="Z")&&e.push({command:"z",points:[]})}return e},getData:function(){return this.attrs.data},setData:function(a){this.setAttrs({data:a}),this.dataArray=this.getDataArray()},_convertEndpointToCenterParameterization:function(a,b,c,d,e,f,g,h,i){var j=i*(Math.PI/180),k=Math.cos(j)*(a-c)/2+Math.sin(j)*(b-d)/2,l=-1*Math.sin(j)*(a-c)/2+Math.cos(j)*(b-d)/2,m=k*k/(g*g)+l*l/(h*h);m>1&&(g*=Math.sqrt(m),h*=Math.sqrt(m));var n=Math.sqrt((g*g*h*h-g*g*l*l-h*h*k*k)/(g*g*l*l+h*h*k*k));e==f&&(n*=-1),isNaN(n)&&(n=0);var o=n*g*l/h,p=n*-h*k/g,q=(a+c)/2+Math.cos(j)*o-Math.sin(j)*p,r=(b+d)/2+Math.sin(j)*o+Math.cos(j)*p,s=function(a){return Math.sqrt(a[0]*a[0]+a[1]*a[1])},t=function(a,b){return(a[0]*b[0]+a[1]*b[1])/(s(a)*s(b))},u=function(a,b){return(a[0]*b[1]=1&&(y=0),f==0&&y>0&&(y-=2*Math.PI),f==1&&y<0&&(y+=2*Math.PI),[q,r,g,h,v,y,j,f]}},Kinetic.GlobalObject.extend(Kinetic.Path,Kinetic.Shape),Kinetic.Transform=function(){this.m=[1,0,0,1,0,0]},Kinetic.Transform.prototype={translate:function(a,b){this.m[4]+=this.m[0]*a+this.m[2]*b,this.m[5]+=this.m[1]*a+this.m[3]*b},scale:function(a,b){this.m[0]*=a,this.m[1]*=a,this.m[2]*=b,this.m[3]*=b},rotate:function(a){var b=Math.cos(a),c=Math.sin(a),d=this.m[0]*b+this.m[2]*c,e=this.m[1]*b+this.m[3]*c,f=this.m[0]*-c+this.m[2]*b,g=this.m[1]*-c+this.m[3]*b;this.m[0]=d,this.m[1]=e,this.m[2]=f,this.m[3]=g},getTranslation:function(){return{x:this.m[4],y:this.m[5]}},multiply:function(a){var b=this.m[0]*a.m[0]+this.m[2]*a.m[1],c=this.m[1]*a.m[0]+this.m[3]*a.m[1],d=this.m[0]*a.m[2]+this.m[2]*a.m[3],e=this.m[1]*a.m[2]+this.m[3]*a.m[3],f=this.m[0]*a.m[4]+this.m[2]*a.m[5]+this.m[4],g=this.m[1]*a.m[4]+this.m[3]*a.m[5]+this.m[5];this.m[0]=b,this.m[1]=c,this.m[2]=d,this.m[3]=e,this.m[4]=f,this.m[5]=g},invert:function(){var a=1/(this.m[0]*this.m[3]-this.m[1]*this.m[2]),b=this.m[3]*a,c=-this.m[1]*a,d=-this.m[2]*a,e=this.m[0]*a,f=a*(this.m[2]*this.m[5]-this.m[3]*this.m[4]),g=a*(this.m[1]*this.m[4]-this.m[0]*this.m[5]);this.m[0]=b,this.m[1]=c,this.m[2]=d,this.m[3]=e,this.m[4]=f,this.m[5]=g},getMatrix:function(){return this.m}},Kinetic.Transition=function(a,b){function d(a,b){for(var e in a)e!=="duration"&&e!=="easing"&&e!=="callback"&&(Kinetic.GlobalObject._isObject(a[e])?d(a[e],b[e]):c._add(c._getTween(b,e,a[e])))}this.node=a,this.config=b,this.tweens=[];var c=this;d(b,a.attrs);var e=0;for(var f=0;f=c.tweens.length&&c.onFinished()}}},Kinetic.Transition.prototype={start:function(){for(var a=0;athis.getDuration()?this.looping?(this.rewind(a-this._duration),this.update(),this.broadcastMessage("onLooped",{target:this,type:"onLooped"})):(this._time=this._duration,this.update(),this.stop(),this.broadcastMessage("onFinished",{target:this,type:"onFinished"})):a<0?(this.rewind(),this.update()):(this._time=a,this.update())},getTime:function(){return this._time},setDuration:function(a){this._duration=a===null||a<=0?1e5:a},getDuration:function(){return this._duration},setPosition:function(a){this.prevPos=this._pos,this.propFunc(a),this._pos=a,this.broadcastMessage("onChanged",{target:this,type:"onChanged"})},getPosition:function(a){return a===undefined&&(a=this._time),this.func(a,this.begin,this._change,this._duration)},setFinish:function(a){this._change=a-this.begin},getFinish:function(){return this.begin+this._change},start:function(){this.rewind(),this.startEnterFrame(),this.broadcastMessage("onStarted",{target:this,type:"onStarted"})},rewind:function(a){this.stop(),this._time=a===undefined?0:a,this.fixTime(),this.update()},fforward:function(){this._time=this._duration,this.fixTime(),this.update()},update:function(){this.setPosition(this.getPosition(this._time))},startEnterFrame:function(){this.stopEnterFrame(),this.isPlaying=!0,this.onEnterFrame()},onEnterFrame:function(){this.isPlaying&&this.nextFrame()},nextFrame:function(){this.setTime((this.getTimer()-this._startTime)/1e3)},stop:function(){this.stopEnterFrame(),this.broadcastMessage("onStopped",{target:this,type:"onStopped"})},stopEnterFrame:function(){this.isPlaying=!1},continueTo:function(a,b){this.begin=this._pos,this.setFinish(a),this._duration!==undefined&&this.setDuration(b),this.start()},resume:function(){this.fixTime(),this.startEnterFrame(),this.broadcastMessage("onResumed",{target:this,type:"onResumed"})},yoyo:function(){this.continueTo(this.begin,this._time)},addListener:function(a){return this.removeListener(a),this._listeners.push(a)},removeListener:function(a){var b=this._listeners,c=b.length;while(c--)if(b[c]==a)return b.splice(c,1),!0;return!1},broadcastMessage:function(){var a=[];for(var b=0;b ry) ? rx : ry; var scaleX = (rx > ry) ? 1 : rx / ry; var scaleY = (rx > ry) ? ry / rx : 1; @@ -47,8 +47,8 @@ Kinetic.Path = function(config) { context.scale(1 / scaleX, 1 / scaleY); context.rotate(-psi); context.translate(-cx, -cy); - - break; + + break; case 'z': context.closePath(); break; @@ -268,17 +268,13 @@ Kinetic.Path.prototype = { break; case 'A': var rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift(); - var x1 = cpx, y1 = cpy; - cpx = p.shift(), cpy = p.shift(); - + var x1 = cpx, y1 = cpy; cpx = p.shift(), cpy = p.shift(); cmd = 'A'; points = this._convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi); break; case 'a': var rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift(); - var x1 = cpx, y1 = cpy; - cpx += p.shift(), cpy += p.shift(); - + var x1 = cpx, y1 = cpy; cpx += p.shift(), cpy += p.shift(); cmd = 'A'; points = this._convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi); break; @@ -314,53 +310,66 @@ Kinetic.Path.prototype = { * @param {String} SVG path command string */ setData: function(data) { - this.attrs.data = data; + this.setAttrs({ + data: data + }); this.dataArray = this.getDataArray(); }, _convertEndpointToCenterParameterization: function(x1, y1, x2, y2, fa, fs, rx, ry, psiDeg) { - + // Derived from: http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes - + var psi = psiDeg * (Math.PI / 180.0); var xp = Math.cos(psi) * (x1 - x2) / 2.0 + Math.sin(psi) * (y1 - y2) / 2.0; var yp = -1 * Math.sin(psi) * (x1 - x2) / 2.0 + Math.cos(psi) * (y1 - y2) / 2.0; - var lambda = (xp*xp) / (rx*rx) + (yp*yp) / (ry*ry); - - if (lambda > 1) { + var lambda = (xp * xp) / (rx * rx) + (yp * yp) / (ry * ry); + + if(lambda > 1) { rx *= Math.sqrt(lambda); ry *= Math.sqrt(lambda); } - - var f = Math.sqrt((((rx*rx) * (ry*ry)) - ((rx*rx) * (yp*yp)) - ((ry*ry) * (xp*xp))) / ((rx*rx) * (yp*yp) + (ry*ry) * (xp*xp))); - - if (fa == fs) f *= -1; - if (isNaN(f)) f = 0; - + + var f = Math.sqrt((((rx * rx) * (ry * ry)) - ((rx * rx) * (yp * yp)) - ((ry * ry) * (xp * xp))) / ((rx * rx) * (yp * yp) + (ry * ry) * (xp * xp))); + + if(fa == fs) + f *= -1; + if(isNaN(f)) + f = 0; + var cxp = f * rx * yp / ry; var cyp = f * -ry * xp / rx; - + var cx = (x1 + x2) / 2.0 + Math.cos(psi) * cxp - Math.sin(psi) * cyp; var cy = (y1 + y2) / 2.0 + Math.sin(psi) * cxp + Math.cos(psi) * cyp; - - var vMag = function(v) { return Math.sqrt(v[0]*v[0] + v[1]*v[1]); } - var vRatio = function(u, v) { return (u[0]*v[0] + u[1]*v[1]) / (vMag(u) * vMag(v)) } - var vAngle = function(u, v) { return (u[0]*v[1] < u[1]*v[0] ? -1 : 1) * Math.acos(vRatio(u,v)); } - - var theta = vAngle([1,0], [(xp - cxp) / rx, (yp - cyp) / ry]); + + var vMag = function(v) { + return Math.sqrt(v[0] * v[0] + v[1] * v[1]); + } + var vRatio = function(u, v) { + return (u[0] * v[0] + u[1] * v[1]) / (vMag(u) * vMag(v)) + } + var vAngle = function(u, v) { + return (u[0] * v[1] < u[1] * v[0] ? -1 : 1) * Math.acos(vRatio(u, v)); + } + var theta = vAngle([1, 0], [(xp - cxp) / rx, (yp - cyp) / ry]); var u = [(xp - cxp) / rx, (yp - cyp) / ry]; var v = [(-1 * xp - cxp) / rx, (-1 * yp - cyp) / ry]; var dTheta = vAngle(u, v); - - if (vRatio(u,v) <= -1) dTheta = Math.PI; - if (vRatio(u,v) >= 1) dTheta = 0; - if (fs == 0 && dTheta > 0) dTheta = dTheta - 2 * Math.PI; - if (fs == 1 && dTheta < 0) dTheta = dTheta + 2 * Math.PI; - - return [cx, cy, rx, ry, theta, dTheta, psi, fs]; + if(vRatio(u, v) <= -1) + dTheta = Math.PI; + if(vRatio(u, v) >= 1) + dTheta = 0; + + if(fs == 0 && dTheta > 0) + dTheta = dTheta - 2 * Math.PI; + if(fs == 1 && dTheta < 0) + dTheta = dTheta + 2 * Math.PI; + + return [cx, cy, rx, ry, theta, dTheta, psi, fs]; } }; diff --git a/src/shapes/Rect.js b/src/shapes/Rect.js index 46884834..aea12946 100644 --- a/src/shapes/Rect.js +++ b/src/shapes/Rect.js @@ -36,7 +36,7 @@ Kinetic.Rect = function(config) { context.arc(this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI, Math.PI * 3 / 2, false); } context.closePath(); - + this.fill(); this.stroke(); }; @@ -52,7 +52,9 @@ Kinetic.Rect.prototype = { * @param {Number} width */ setWidth: function(width) { - this.attrs.width = width; + this.setAttrs({ + width: width + }); }, /** * get width @@ -65,7 +67,9 @@ Kinetic.Rect.prototype = { * @param {Number} height */ setHeight: function(height) { - this.attrs.height = height; + this.setAttrs({ + height: height + }); }, /** * get height @@ -94,14 +98,16 @@ Kinetic.Rect.prototype = { * @param {Number} radius */ setCornerRadius: function(radius) { - this.attrs.cornerRadius = radius; + this.setAttrs({ + cornerRadius: radius + }); }, /** * get corner radius */ getCornerRadius: function() { return this.attrs.cornerRadius; - }, + } }; // extend Shape diff --git a/src/shapes/RegularPolygon.js b/src/shapes/RegularPolygon.js index 870cbce4..2faf94da 100644 --- a/src/shapes/RegularPolygon.js +++ b/src/shapes/RegularPolygon.js @@ -40,7 +40,9 @@ Kinetic.RegularPolygon.prototype = { * @param {Number} radius */ setRadius: function(radius) { - this.attrs.radius = radius; + this.setAttrs({ + radius: radius + }); }, /** * get radius @@ -53,7 +55,9 @@ Kinetic.RegularPolygon.prototype = { * @param {int} sides */ setSides: function(sides) { - this.attrs.sides = sides; + this.setAttrs({ + sides: sides + }); }, /** * get number of sides diff --git a/src/shapes/Sprite.js b/src/shapes/Sprite.js index fc8d67d6..a9947e02 100644 --- a/src/shapes/Sprite.js +++ b/src/shapes/Sprite.js @@ -23,7 +23,7 @@ Kinetic.Sprite = function(config) { context.beginPath(); context.rect(0, 0, f.width, f.height); context.closePath(); - + this.drawImage(this.attrs.image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height); } }; @@ -68,14 +68,18 @@ Kinetic.Sprite.prototype = { * @param {String} anim animation key */ setAnimation: function(anim) { - this.attrs.animation = anim; + this.setAttrs({ + animation: anim + }); }, /** * set animations obect * @param {Object} animations */ setAnimations: function(animations) { - this.attrs.animations = animations; + this.setAttrs({ + animations: animations + }); }, /** * get animations object @@ -94,7 +98,9 @@ Kinetic.Sprite.prototype = { * @param {Integer} index frame index */ setIndex: function(index) { - this.attrs.index = index; + this.setAttrs({ + index: index + }); }, _updateIndex: function() { var i = this.attrs.index; diff --git a/src/shapes/Star.js b/src/shapes/Star.js index 6d74348d..219efd0b 100644 --- a/src/shapes/Star.js +++ b/src/shapes/Star.js @@ -27,7 +27,7 @@ Kinetic.Star = function(config) { context.lineTo(x, y); } context.closePath(); - + this.fill(); this.stroke(); }; @@ -43,7 +43,9 @@ Kinetic.Star.prototype = { * @param {Integer} points */ setNumPoints: function(numPoints) { - this.attrs.numPoints = numPoints; + this.setAttrs({ + numPoints: numPoints + }); }, /** * get number of points @@ -56,7 +58,9 @@ Kinetic.Star.prototype = { * @param {Number} radius */ setOuterRadius: function(radius) { - this.attrs.outerRadius = radius; + this.setAttrs({ + outerRadius: radius + }); }, /** * get outer radius @@ -69,7 +73,9 @@ Kinetic.Star.prototype = { * @param {Number} radius */ setInnerRadius: function(radius) { - this.attrs.innerRadius = radius; + this.setAttrs({ + innerRadius: radius + }); }, /** * get inner radius diff --git a/src/shapes/Text.js b/src/shapes/Text.js index 3f5cf40d..3110131c 100644 --- a/src/shapes/Text.js +++ b/src/shapes/Text.js @@ -92,7 +92,9 @@ Kinetic.Text.prototype = { * @param {String} fontFamily */ setFontFamily: function(fontFamily) { - this.attrs.fontFamily = fontFamily; + this.setAttrs({ + fontFamily: fontFamily + }); }, /** * get font family @@ -105,7 +107,9 @@ Kinetic.Text.prototype = { * @param {int} fontSize */ setFontSize: function(fontSize) { - this.attrs.fontSize = fontSize; + this.setAttrs({ + fontSize: fontSize + }); }, /** * get font size @@ -118,7 +122,9 @@ Kinetic.Text.prototype = { * @param {String} fontStyle */ setFontStyle: function(fontStyle) { - this.attrs.fontStyle = fontStyle; + this.setAttrs({ + fontStyle: fontStyle + }); }, /** * get font style @@ -131,7 +137,9 @@ Kinetic.Text.prototype = { * @param {String} textFill */ setTextFill: function(textFill) { - this.attrs.textFill = textFill; + this.setAttrs({ + textFill: textFill + }); }, /** * get text fill color @@ -144,7 +152,9 @@ Kinetic.Text.prototype = { * @param {String} textStroke */ setTextStroke: function(textStroke) { - this.attrs.textStroke = textStroke; + this.setAttrs({ + textStroke: textStroke + }); }, /** * get text stroke color @@ -157,7 +167,9 @@ Kinetic.Text.prototype = { * @param {int} textStrokeWidth */ setTextStrokeWidth: function(textStrokeWidth) { - this.attrs.textStrokeWidth = textStrokeWidth; + this.setAttrs({ + textStrokeWidth: textStrokeWidth + }); }, /** * get text stroke width @@ -170,7 +182,9 @@ Kinetic.Text.prototype = { * @param {int} padding */ setPadding: function(padding) { - this.attrs.padding = padding; + this.setAttrs({ + padding: padding + }); }, /** * get padding @@ -183,7 +197,9 @@ Kinetic.Text.prototype = { * @param {String} align align can be 'left', 'center', or 'right' */ setAlign: function(align) { - this.attrs.align = align; + this.setAttrs({ + align: align + }); }, /** * get horizontal align @@ -196,7 +212,9 @@ Kinetic.Text.prototype = { * @param {String} verticalAlign verticalAlign can be "top", "middle", or "bottom" */ setVerticalAlign: function(verticalAlign) { - this.attrs.verticalAlign = verticalAlign; + this.setAttrs({ + verticalAlign: verticalAlign + }); }, /** * get vertical align @@ -209,7 +227,9 @@ Kinetic.Text.prototype = { * @param {String} text */ setText: function(text) { - this.attrs.text = text; + this.setAttrs({ + text: text + }); }, /** * get text @@ -265,7 +285,9 @@ Kinetic.Text.prototype = { * @param {Number} width */ setWidth: function(width) { - this.attrs.width = width; + this.setAttrs({ + width: width + }); } }; // extend Shape