From 7d357322c9ad3747e396a4e33de5d9336630be56 Mon Sep 17 00:00:00 2001 From: hyperandroid Date: Sat, 21 Jan 2012 00:54:26 +0100 Subject: [PATCH] 01/20/2012 *0.1 Build 631* -------------------------- * Added methods initializeAsFontMap, drawString, stringWidth to CAAT.SpriteImage. Those methods allow to draw strings via textured fonts. Every character will be defined besides x,y,width,height in texture, by xoffset, yoffset, xadvance. * Removed unneeded actor initialization inverse matrices. --- build/caat-box2d-min.js | 6 +- build/caat-box2d.js | 6 +- build/caat-css-min.js | 80 +- build/caat-css.js | 95 +- build/caat-min.js | 85 +- build/caat.js | 95 +- changelog | 8 + .../src/_Users_ibon_js_CAAT_src_CAAT.js.html | 2 +- ...Users_ibon_js_CAAT_src_math_bezier.js.html | 813 +-- ..._Users_ibon_js_CAAT_src_math_point.js.html | 2 +- ...rs_ibon_js_CAAT_src_math_rectangle.js.html | 4 +- ...Users_ibon_js_CAAT_src_model_actor.js.html | 5456 +++++++++-------- .../_Users_ibon_js_CAAT_src_path_path.js.html | 2268 +++---- src/model/actor.js | 4 +- src/model/actorCSS.js | 4 +- src/model/conpoundimage.js | 85 +- 16 files changed, 4644 insertions(+), 4369 deletions(-) diff --git a/build/caat-box2d-min.js b/build/caat-box2d-min.js index e4b61619..a80ad27b 100644 --- a/build/caat-box2d-min.js +++ b/build/caat-box2d-min.js @@ -22,11 +22,11 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -Version: 0.1 build: 627 +Version: 0.1 build: 631 Created on: -DATE: 2012-01-20 -TIME: 02:01:58 +DATE: 2012-01-21 +TIME: 00:52:09 */ diff --git a/build/caat-box2d.js b/build/caat-box2d.js index 3dd4f3db..b18a7b35 100644 --- a/build/caat-box2d.js +++ b/build/caat-box2d.js @@ -21,11 +21,11 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -Version: 0.1 build: 628 +Version: 0.1 build: 632 Created on: -DATE: 2012-01-20 -TIME: 02:02:22 +DATE: 2012-01-21 +TIME: 00:52:32 */ diff --git a/build/caat-css-min.js b/build/caat-css-min.js index 4d94662d..dc99bb5e 100644 --- a/build/caat-css-min.js +++ b/build/caat-css-min.js @@ -22,15 +22,15 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -Version: 0.1 build: 627 +Version: 0.1 build: 631 Created on: -DATE: 2012-01-20 -TIME: 02:01:58 +DATE: 2012-01-21 +TIME: 00:52:09 */ -var CAAT=CAAT||{};Function.prototype.bind=Function.prototype.bind||function(){var a=this,b=Array.prototype.slice.call(arguments),c=b.shift();return function(){return a.apply(c,b.concat(Array.prototype.slice.call(arguments)))}};CAAT.__CSS__=1;CAAT.__CSS__=1;(function(){CAAT.BrowserDetect=function(){this.init();return this};CAAT.BrowserDetect.prototype={browser:"",version:0,OS:"",init:function(){this.browser=this.searchString(this.dataBrowser)||"An unknown browser";this.version=this.searchVersion(navigator.userAgent)||this.searchVersion(navigator.appVersion)||"an unknown version";this.OS=this.searchString(this.dataOS)||"an unknown OS"},searchString:function(a){for(var b=0;b>0)-0.5;b.moveTo(0.5,c);b.lineTo(this.width+0.5,c);b.stroke();b.strokeStyle="#aa2";b.beginPath();c=this.height-(30/this.SCALE* this.height>>0)-0.5;b.moveTo(0.5,c);b.lineTo(this.width+0.5,c);b.stroke();c=Math.min(this.height-this.framerate.fps/this.SCALE*this.height,59);if(-1===this.framerate.prevFps)this.framerate.prevFps=c|0;b.strokeStyle="#0ff";b.beginPath();b.moveTo(this.width,(c|0)-0.5);b.lineTo(this.width,this.framerate.prevFps-0.5);b.stroke();this.framerate.prevFps=c;a=(this.height-a/this.SCALE*this.height>>0)-0.5;b.strokeStyle="#ff0";b.beginPath();b.moveTo(this.width,a);b.lineTo(this.width,a);b.stroke()}}})();(function(){CAAT.Actor=function(){this.behaviorList=[];this.lifecycleListenerList=[];this.rotateAnchor=this.scaleAnchor=this.ANCHOR_CENTER;this.behaviorList=[];this.domElement=document.createElement("div");this.domElement.style.position="absolute";this.domElement.style["-webkit-transform"]="translate3d(0,0,0)";this.domElement.style["-webkit-transition"]="all 0s linear";this.style("display","none");this.setVisible(true);this.resetTransform();this.setScale(1,1);this.setRotation(0);this.modelViewMatrix= -new CAAT.Matrix;this.worldModelViewMatrix=new CAAT.Matrix;this.modelViewMatrixI=new CAAT.Matrix;this.worldModelViewMatrixI=new CAAT.Matrix;this.tmpMatrix=new CAAT.Matrix;return this};CAAT.Actor.prototype={tmpMatrix:null,lifecycleListenerList:null,behaviorList:null,x:0,y:0,width:0,height:0,start_time:0,duration:Number.MAX_VALUE,clip:false,scaleX:0,scaleY:0,scaleTX:0.5,scaleTY:0.5,scaleAnchor:0,rotationAngle:0,rotationY:0.5,alpha:1,rotationX:0.5,isGlobalAlpha:false,frameAlpha:1,expired:false,discardable:false, -domParent:null,domElement:null,visible:true,ANCHOR_CENTER:0,ANCHOR_TOP:1,ANCHOR_BOTTOM:2,ANCHOR_LEFT:3,ANCHOR_RIGHT:4,ANCHOR_TOP_LEFT:5,ANCHOR_TOP_RIGHT:6,ANCHOR_BOTTOM_LEFT:7,ANCHOR_BOTTOM_RIGHT:8,ANCHOR_CUSTOM:9,mouseEnabled:true,time:0,inFrame:false,backgroundImage:null,size_active:1,size_total:1,id:null,getId:function(){return this.id},setId:function(a){this.id=a;return this},setParent:function(a){this.parent&&this.domParent.removeChild(this.domElement);this.parent=a;null!=a?(this.parent.domElement.appendChild(this.domElement), -this.domParent=this.parent.domElement):this.domParent=null;this.dirty=true;return this},setBackgroundImage:function(a,b){if(a){if(a instanceof HTMLImageElement)a=(new CAAT.SpriteImage).initialize(a,1,1);else if(a instanceof HTMLCanvasElement)a.src=a.toDataURL(),a=(new CAAT.SpriteImage).initialize(a,1,1);else if(a instanceof CAAT.SpriteImage){if(a.image instanceof HTMLCanvasElement&&!a.image.src)a.image.src=a.image.toDataURL()}else throw"Invalid image object to set actor's background";a.setOwner(this); -this.backgroundImage=a;(typeof b==="undefined"||b)&&this.setSize(a.getWidth(),a.getHeight());this.style("background","url("+this.backgroundImage.image.src+") "+this.backgroundImage.getCurrentSpriteImageCSSPosition())}else this.backgroundImage=null,this.style("background","none");return this},setSpriteIndex:function(a){this.backgroundImage&&(this.backgroundImage.setSpriteIndex(a),this.style("background","url("+this.backgroundImage.image.src+") "+this.backgroundImage.getCurrentSpriteImageCSSPosition())); -return this},setBackgroundImageOffset:function(a,b){this.backgroundImage&&(this.backgroundImage.setOffset(a,b),this.style("background","url("+this.backgroundImage.image.src+") "+this.backgroundImage.getCurrentSpriteImageCSSPosition()));return this},setAnimationImageIndex:function(a){this.backgroundImage&&(this.backgroundImage.setAnimationImageIndex(a),this.style("background","url("+this.backgroundImage.image.src+") "+this.backgroundImage.getCurrentSpriteImageCSSPosition()));return this},setImageTransformation:function(a){this.transformation= -a;a===CAAT.SpriteImage.prototype.TR_FIXED_TO_SIZE&&this.style("background-size","100%");return this},centerOn:function(a,b){this.setLocation(a-this.width/2,b-this.height/2);return this},setVisible:function(a){this.visible=a;return this},style:function(a,b){this.domElement.style[a]=b},style3:function(){var a="";this.transformation===CAAT.SpriteImage.prototype.TR_FLIP_HORIZONTAL&&(a=" scale(-1,1) ");a="rotate("+this.rotationAngle+"rad) scale("+this.scaleX+","+this.scaleY+")"+a;this.domElement.style["-ms-transform"]= -a;this.domElement.style["-webkit-transform"]="translate3d(0,0,0) "+a;this.domElement.style.OTransform=a;this.domElement.style.MozTransform=a;this.domElement.style.transform=a;a=""+this.rotationX*100+"% "+this.rotationY*100+"% ";this.domElement.style["transform-origin"]=a;this.domElement.style["-webkit-transform-origin"]=a;this.domElement.style["-ms-transform-origin"]=a;this.domElement.style.OTransformOrigin=a;this.domElement.style.MozTransformOrigin=a;return this},styleAlpha:function(){this.domElement.style.filter= -"alpha(opacity="+(this.alpha*100>>0)+")";this.domElement.style.Oopacity=this.alpha;this.domElement.style.MozOpacity=this.alpha;this.domElement.style["-khtml-opacity"]=this.alpha;this.domElement.style.opacity=this.alpha;return this},setOutOfFrameTime:function(){this.setFrameTime(-1,0);this.style("display","none");return this},addListener:function(a){this.lifecycleListenerList.push(a)},removeListener:function(a){for(var b=this.lifecycleListenerList.length;b--;)if(this.lifecycleListenerList[b]===a){this.lifecycleListenerList.splice(b, -1);break}},setGlobalAlpha:function(a){this.isGlobalAlpha=a;return this},fireEvent:function(a,b){for(var c=0;c=this.start_time+this.duration?(this.expired|| -this.setExpired(a),false):this.start_time<=a&&a=0&&b>=0&&a>0)+")";this.domElement.style.Oopacity= +this.alpha;this.domElement.style.MozOpacity=this.alpha;this.domElement.style["-khtml-opacity"]=this.alpha;this.domElement.style.opacity=this.alpha;return this},setOutOfFrameTime:function(){this.setFrameTime(-1,0);this.style("display","none");return this},addListener:function(a){this.lifecycleListenerList.push(a)},removeListener:function(a){for(var b=this.lifecycleListenerList.length;b--;)if(this.lifecycleListenerList[b]===a){this.lifecycleListenerList.splice(b,1);break}},setGlobalAlpha:function(a){this.isGlobalAlpha= +a;return this},fireEvent:function(a,b){for(var c=0;c=this.start_time+this.duration?(this.expired||this.setExpired(a),false):this.start_time<=a&&a=0&&b>=0&&a>0)*d;var k=i+(a/g>>0)*e,m=f+d,n=k+e;f=(new CAAT.SpriteImageHelper).setGL(f/j.width,k/j.height,m/j.width,n/j.height);this.mapInfo[a]=f}}else for(a=0;a0&&(g-=e);var h=this.offsetY%f;h>0&&(h-=f);var e=((this.ownerActor.width-g)/e>>0)+1,f=((this.ownerActor.height-h)/f>>0)+1,i,j;for(i=0;i>0,d+h+i*b.height>>0,b.width,b.height)},paintInvertedH:function(a, -b,c,d){this.setSpriteIndexAtTime(b);b=this.mapInfo[this.spriteIndex];a=a.ctx;a.save();a.translate((c|0)+b.width,d|0);a.scale(-1,1);a.drawImage(this.image,b.x,b.y,b.width,b.height,this.offsetX>>0,this.offsetY>>0,b.width,b.height);a.restore();return this},paintInvertedV:function(a,b,c,d){this.setSpriteIndexAtTime(b);b=this.mapInfo[this.spriteIndex];a=a.ctx;a.save();a.translate(c|0,d+b.height|0);a.scale(1,-1);a.drawImage(this.image,b.x,b.y,b.width,b.height,this.offsetX>>0,this.offsetY>>0,b.width,b.height); -a.restore();return this},paintInvertedHV:function(a,b,c,d){this.setSpriteIndexAtTime(b);b=this.mapInfo[this.spriteIndex];a=a.ctx;a.save();a.translate(c|0,d+b.height|0);a.scale(1,-1);a.translate(b.width,0);a.scale(-1,1);a.drawImage(this.image,b.x,b.y,b.width,b.height,this.offsetX>>0,this.offsetY>>0,b.width,b.height);a.restore();return this},paintN:function(a,b,c,d){this.setSpriteIndexAtTime(b);b=this.mapInfo[this.spriteIndex];a.ctx.drawImage(this.image,b.x,b.y,b.width,b.height,this.offsetX+c>>0,this.offsetY+ -d>>0,b.width,b.height);return this},paintScaled:function(a,b,c,d){this.setSpriteIndexAtTime(b);b=this.mapInfo[this.spriteIndex];a.ctx.drawImage(this.image,b.x,b.y,b.width,b.height,this.offsetX+c>>0,this.offsetY+d>>0,this.ownerActor.width,this.ownerActor.height);return this},getCurrentSpriteImageCSSPosition:function(){var a=this.mapInfo[this.spriteIndex];return"-"+(a.x-this.offsetX)+"px -"+(a.y-this.offsetY)+"px "+(this.transformation===this.TR_TILE?"":"no-repeat")},getNumImages:function(){return this.rows* -this.columns},setUV:function(a,b){var c=this.image;if(c.__texturePage){var d=b,e=this.mapInfo[this.spriteIndex],f=e.u,g=e.v,h=e.u1,e=e.v1;if(this.offsetX||this.offsetY)f=c.__texturePage,g=-this.offsetY/f.height,h=(this.ownerActor.width-this.offsetX)/f.width,e=(this.ownerActor.height-this.offsetY)/f.height,f=-this.offsetX/f.width+c.__u,g+=c.__v,h+=c.__u,e+=c.__v;c.inverted?(a[d++]=h,a[d++]=g,a[d++]=h,a[d++]=e,a[d++]=f,a[d++]=e,a[d++]=f,a[d++]=g):(a[d++]=f,a[d++]=g,a[d++]=h,a[d++]=g,a[d++]=h,a[d++]= -e,a[d++]=f,a[d++]=e)}},setChangeFPS:function(a){this.changeFPS=a;return this},setSpriteTransformation:function(a){this.transformation=a;switch(a){case this.TR_FLIP_HORIZONTAL:this.paint=this.paintInvertedH;break;case this.TR_FLIP_VERTICAL:this.paint=this.paintInvertedV;break;case this.TR_FLIP_ALL:this.paint=this.paintInvertedHV;break;case this.TR_FIXED_TO_SIZE:this.paint=this.paintScaled;break;case this.TR_TILE:this.paint=this.paintTiled;break;default:this.paint=this.paintN}return this},setAnimationImageIndex:function(a){this.animationImageIndex= -a;this.spriteIndex=a[0];return this},setSpriteIndex:function(a){this.spriteIndex=a;return this},setSpriteIndexAtTime:function(a){if(this.animationImageIndex.length>1)this.prevAnimationTime===-1?(this.prevAnimationTime=a,this.spriteIndex=0):(a-=this.prevAnimationTime,a/=this.changeFPS,a%=this.animationImageIndex.length,this.spriteIndex=this.animationImageIndex[Math.floor(a)])},initializeFromMap:function(a,b){this.initialize(a,1,1);var c,d,e=0;for(c in b)d=b[c],d=new CAAT.SpriteImageHelper(d.x,d.y, -d.width,d.height),this.mapInfo[c]=d,e||this.setAnimationImageIndex([c]),e++;return this}}})();(function(){CAAT.ImagePreloader=function(){this.images=[];return this};CAAT.ImagePreloader.prototype={images:null,notificationCallback:null,imageCounter:0,loadImages:function(a,b){a||b&&b(0,[]);var c=this,d;this.notificationCallback=b;this.images=[];for(d=0;d=this.duration?(this.remove=true,this.callback_timeout&&this.callback_timeout(a,b,this)):this.callback_tick&&this.callback_tick(a, +a.scaleX=this.scaleX;a.scaleY=this.scaleY;return a},setOffsetX:function(a){this.offsetX=a;return this},setOffsetY:function(a){this.offsetY=a;return this},setOffset:function(a,b){this.offsetX=a;this.offsetY=b;return this},initialize:function(a,b,c){this.image=a;this.rows=b;this.columns=c;this.width=a.width;this.height=a.height;this.singleWidth=Math.floor(this.width/c);this.singleHeight=Math.floor(this.height/b);this.mapInfo={};var d,e,f,g;if(a.__texturePage){a.__du=this.singleWidth/a.__texturePage.width; +a.__dv=this.singleHeight/a.__texturePage.height;e=this.singleWidth;f=this.singleHeight;var h=this.columns;if(a.inverted)d=e,e=f,f=d,h=this.rows;var a=this.image.__tx,i=this.image.__ty,j=this.image.__texturePage;for(d=0;d>0)*e;var k=i+(d/h>>0)*f,m=g+e,n=k+f;g=(new CAAT.SpriteImageHelper(g,k,m-g,n-k,j.width,j.height)).setGL(g/j.width,k/j.height,m/j.width,n/j.height);this.mapInfo[d]=g}}else for(d=0;d0&&(g-=e);var h=this.offsetY%f;h>0&&(h-=f);var e=((this.ownerActor.width-g)/e>>0)+1,f=((this.ownerActor.height-h)/f>>0)+1,i,j;for(i=0;i>0,d+h+i* +b.height>>0,b.width,b.height)},paintInvertedH:function(a,b,c,d){this.setSpriteIndexAtTime(b);b=this.mapInfo[this.spriteIndex];a=a.ctx;a.save();a.translate((c|0)+b.width,d|0);a.scale(-1,1);a.drawImage(this.image,b.x,b.y,b.width,b.height,this.offsetX>>0,this.offsetY>>0,b.width,b.height);a.restore();return this},paintInvertedV:function(a,b,c,d){this.setSpriteIndexAtTime(b);b=this.mapInfo[this.spriteIndex];a=a.ctx;a.save();a.translate(c|0,d+b.height|0);a.scale(1,-1);a.drawImage(this.image,b.x,b.y,b.width, +b.height,this.offsetX>>0,this.offsetY>>0,b.width,b.height);a.restore();return this},paintInvertedHV:function(a,b,c,d){this.setSpriteIndexAtTime(b);b=this.mapInfo[this.spriteIndex];a=a.ctx;a.save();a.translate(c|0,d+b.height|0);a.scale(1,-1);a.translate(b.width,0);a.scale(-1,1);a.drawImage(this.image,b.x,b.y,b.width,b.height,this.offsetX>>0,this.offsetY>>0,b.width,b.height);a.restore();return this},paintN:function(a,b,c,d){this.setSpriteIndexAtTime(b);b=this.mapInfo[this.spriteIndex];a.ctx.drawImage(this.image, +b.x,b.y,b.width,b.height,this.offsetX+c>>0,this.offsetY+d>>0,b.width,b.height);return this},paintScaled:function(a,b,c,d){this.setSpriteIndexAtTime(b);b=this.mapInfo[this.spriteIndex];a.ctx.drawImage(this.image,b.x,b.y,b.width,b.height,this.offsetX+c>>0,this.offsetY+d>>0,this.ownerActor.width,this.ownerActor.height);return this},getCurrentSpriteImageCSSPosition:function(){var a=this.mapInfo[this.spriteIndex];return"-"+(a.x-this.offsetX)+"px -"+(a.y-this.offsetY)+"px "+(this.transformation===this.TR_TILE? +"":"no-repeat")},getNumImages:function(){return this.rows*this.columns},setUV:function(a,b){var c=this.image;if(c.__texturePage){var d=b,e=this.mapInfo[this.spriteIndex],f=e.u,g=e.v,h=e.u1,e=e.v1;if(this.offsetX||this.offsetY)f=c.__texturePage,g=-this.offsetY/f.height,h=(this.ownerActor.width-this.offsetX)/f.width,e=(this.ownerActor.height-this.offsetY)/f.height,f=-this.offsetX/f.width+c.__u,g+=c.__v,h+=c.__u,e+=c.__v;c.inverted?(a[d++]=h,a[d++]=g,a[d++]=h,a[d++]=e,a[d++]=f,a[d++]=e,a[d++]=f,a[d++]= +g):(a[d++]=f,a[d++]=g,a[d++]=h,a[d++]=g,a[d++]=h,a[d++]=e,a[d++]=f,a[d++]=e)}},setChangeFPS:function(a){this.changeFPS=a;return this},setSpriteTransformation:function(a){this.transformation=a;switch(a){case this.TR_FLIP_HORIZONTAL:this.paint=this.paintInvertedH;break;case this.TR_FLIP_VERTICAL:this.paint=this.paintInvertedV;break;case this.TR_FLIP_ALL:this.paint=this.paintInvertedHV;break;case this.TR_FIXED_TO_SIZE:this.paint=this.paintScaled;break;case this.TR_TILE:this.paint=this.paintTiled;break; +default:this.paint=this.paintN}return this},setAnimationImageIndex:function(a){this.animationImageIndex=a;this.spriteIndex=a[0];return this},setSpriteIndex:function(a){this.spriteIndex=a;return this},setSpriteIndexAtTime:function(a){if(this.animationImageIndex.length>1)this.prevAnimationTime===-1?(this.prevAnimationTime=a,this.spriteIndex=0):(a-=this.prevAnimationTime,a/=this.changeFPS,a%=this.animationImageIndex.length,this.spriteIndex=this.animationImageIndex[Math.floor(a)])},initializeFromMap:function(a, +b){this.initialize(a,1,1);var c,d,e=0;for(c in b)d=b[c],d=new CAAT.SpriteImageHelper(d.x,d.y,d.width,d.height,a.width,a.height),this.mapInfo[c]=d,e||this.setAnimationImageIndex([c]),e++;return this},initializeAsFontMap:function(a,b){this.initialize(a,1,1);var c,d,e=0;for(c in b){var f=b[c];d=new CAAT.SpriteImageHelper(f.x,f.y,f.width,f.height,a.width,a.height);d.xoffset=typeof f.xoffset==="undefined"?0:f.xoffset;d.yoffset=typeof f.yoffset==="undefined"?0:f.yoffset;d.xadvance=typeof f.xadvance==="undefined"? +f.width:f.xadvance;this.mapInfo[c]=d;e||this.setAnimationImageIndex([c]);e++}return this},stringWidth:function(a){var b,c,d=0,e;for(b=0,c=a.length;b=this.duration?(this.remove=true,this.callback_timeout&&this.callback_timeout(a,b,this)):this.callback_tick&&this.callback_tick(a, b,this);return this},reset:function(a){this.remove=false;this.startTime=a;this.scene.ensureTimerTask(this);return this},cancel:function(){this.remove=true;null!=this.callback_cancel&&this.callback_cancel(this.scene.time,this.scene.time-this.startTime,this);return this}}})();(function(){CAAT.Scene=function(){CAAT.Scene.superclass.constructor.call(this);this.timerList=[];this.style("overflow","hidden");return this};CAAT.Scene.prototype={easeContainerBehaviour:null,easeContainerBehaviourListener:null,easeIn:false,EASE_ROTATION:1,EASE_SCALE:2,EASE_TRANSLATE:3,timerList:null,timerSequence:0,paused:false,isPaused:function(){return this.paused},setPaused:function(a){this.paused=a},checkTimers:function(a){for(var b=this.timerList.length-1;b>=0;)this.timerList[b].remove||this.timerList[b].checkTask(a), b--},ensureTimerTask:function(a){this.hasTimer(a)||this.timerList.push(a);return this},hasTimer:function(a){for(var b=this.timerList.length-1;b>=0;){if(this.timerList[b]===a)return true;b--}return false},createTimer:function(a,b,c,d,e){a=(new CAAT.TimerTask).create(a,b,c,d,e);a.taskId=this.timerSequence++;a.sceneTime=this.time;a.scene=this;this.timerList.push(a);return a},removeExpiredTimers:function(){var a;for(a=0;athis.framerate.timeLastRefresh+this.framerate.refreshInterval)this.framerate.fps=this.framerate.frames*1E3/(CAAT.RAF-this.framerate.timeLastRefresh)|0,this.framerate.fpsMin=this.framerate.frames>0?Math.min(this.framerate.fpsMin, this.framerate.fps):this.framerate.fpsMin,this.framerate.fpsMax=Math.max(this.framerate.fpsMax,this.framerate.fps),this.textFPS.innerHTML=this.framerate.fps,a=(this.frameTimeAcc*100/this.framerate.frames|0)/100,this.frameTimeAcc=0,this.textDrawTime.innerHTML=a,a=(this.frameRAFAcc*100/this.framerate.frames|0)/100,this.frameRAFAcc=0,this.textRAFTime.innerHTML=a,this.framerate.timeLastRefresh=CAAT.RAF,this.framerate.frames=0,this.paint(a);this.textEntitiesTotal.innerHTML=this.statistics.size_total;this.textEntitiesActive.innerHTML= this.statistics.size_active;this.textDraws.innerHTML=this.statistics.draws},paint:function(a){var b=this.ctx,c=0;b.drawImage(this.canvas,1,0,this.width-1,this.height,0,0,this.width-1,this.height);b.strokeStyle="black";b.beginPath();b.moveTo(this.width-0.5,0);b.lineTo(this.width-0.5,this.height);b.stroke();b.strokeStyle="#a22";b.beginPath();c=this.height-(20/this.SCALE*this.height>>0)-0.5;b.moveTo(0.5,c);b.lineTo(this.width+0.5,c);b.stroke();b.strokeStyle="#aa2";b.beginPath();c=this.height-(30/this.SCALE* -this.height>>0)-0.5;b.moveTo(0.5,c);b.lineTo(this.width+0.5,c);b.stroke();c=Math.min(this.height-this.framerate.fps/this.SCALE*this.height,59);if(-1===this.framerate.prevFps)this.framerate.prevFps=c|0;b.strokeStyle="#0ff";b.beginPath();b.moveTo(this.width,(c|0)-0.5);b.lineTo(this.width,this.framerate.prevFps-0.5);b.stroke();this.framerate.prevFps=c;a=(this.height-a/this.SCALE*this.height>>0)-0.5;b.strokeStyle="#ff0";b.beginPath();b.moveTo(this.width,a);b.lineTo(this.width,a);b.stroke()}}})();(function(){CAAT.Actor=function(){this.behaviorList=[];this.lifecycleListenerList=[];this.AABB=new CAAT.Rectangle;this.viewVertices=[new CAAT.Point(0,0,0),new CAAT.Point(0,0,0),new CAAT.Point(0,0,0),new CAAT.Point(0,0,0)];this.rotateAnchor=this.scaleAnchor=this.ANCHOR_CENTER;this.modelViewMatrix=new CAAT.Matrix;this.worldModelViewMatrix=new CAAT.Matrix;this.modelViewMatrixI=new CAAT.Matrix;this.worldModelViewMatrixI=new CAAT.Matrix;this.tmpMatrix=new CAAT.Matrix;this.resetTransform();this.setScale(1, -1);this.setRotation(0);return this};CAAT.Actor.ANCHOR_CENTER=0;CAAT.Actor.ANCHOR_TOP=1;CAAT.Actor.ANCHOR_BOTTOM=2;CAAT.Actor.ANCHOR_LEFT=3;CAAT.Actor.ANCHOR_RIGHT=4;CAAT.Actor.ANCHOR_TOP_LEFT=5;CAAT.Actor.ANCHOR_TOP_RIGHT=6;CAAT.Actor.ANCHOR_BOTTOM_LEFT=7;CAAT.Actor.ANCHOR_BOTTOM_RIGHT=8;CAAT.Actor.ANCHOR_CUSTOM=9;CAAT.Actor.prototype={tmpMatrix:null,lifecycleListenerList:null,behaviorList:null,parent:null,x:0,y:0,width:0,height:0,start_time:0,duration:Number.MAX_VALUE,clip:false,clipPath:null,scaleX:0, -scaleY:0,scaleTX:0.5,scaleTY:0.5,scaleAnchor:0,rotationAngle:0,rotationY:0.5,alpha:1,rotationX:0.5,isGlobalAlpha:false,frameAlpha:1,expired:false,discardable:false,pointed:false,mouseEnabled:true,visible:true,ANCHOR_CENTER:0,ANCHOR_TOP:1,ANCHOR_BOTTOM:2,ANCHOR_LEFT:3,ANCHOR_RIGHT:4,ANCHOR_TOP_LEFT:5,ANCHOR_TOP_RIGHT:6,ANCHOR_BOTTOM_LEFT:7,ANCHOR_BOTTOM_RIGHT:8,ANCHOR_CUSTOM:9,fillStyle:null,strokeStyle:null,time:0,AABB:null,viewVertices:null,inFrame:false,dirty:true,wdirty:true,oldX:-1,oldY:-1,modelViewMatrix:null, -worldModelViewMatrix:null,modelViewMatrixI:null,worldModelViewMatrixI:null,glEnabled:false,backgroundImage:null,id:null,size_active:1,size_total:1,__next:null,__d_ax:-1,__d_ay:-1,gestureEnabled:false,setGestureEnabled:function(a){this.gestureEnabled=!!a},isGestureEnabled:function(){return this.gestureEnabled},getId:function(){return this.id},setId:function(a){this.id=a;return this},setParent:function(a){this.parent=a;return this},setBackgroundImage:function(a,b){if(a){a instanceof CAAT.SpriteImage|| -(a=(new CAAT.SpriteImage).initialize(a,1,1));a.setOwner(this);this.backgroundImage=a;if(typeof b==="undefined"||b)this.width=a.getWidth(),this.height=a.getHeight();this.glEnabled=true}else this.backgroundImage=null;return this},setSpriteIndex:function(a){this.backgroundImage&&this.backgroundImage.setSpriteIndex(a);return this},setBackgroundImageOffset:function(a,b){this.backgroundImage&&this.backgroundImage.setOffset(a,b);return this},setAnimationImageIndex:function(a){this.backgroundImage&&this.backgroundImage.setAnimationImageIndex(a); -return this},setChangeFPS:function(a){this.backgroundImage&&this.backgroundImage.setChangeFPS(a);return this},setImageTransformation:function(a){this.backgroundImage&&this.backgroundImage.setSpriteTransformation(a);return this},centerOn:function(a,b){this.setLocation(a-this.width/2,b-this.height/2);return this},centerAt:function(a,b){return this.centerOn(a,b)},getTextureGLPage:function(){return this.backgroundImage.image.__texturePage},setVisible:function(a){this.visible=a;return this},setOutOfFrameTime:function(){this.setFrameTime(-1, -0);return this},addListener:function(a){this.lifecycleListenerList.push(a);return this},removeListener:function(a){for(var b=this.lifecycleListenerList.length;b--;)if(this.lifecycleListenerList[b]===a){this.lifecycleListenerList.splice(b,1);break}},setGlobalAlpha:function(a){this.isGlobalAlpha=a;return this},fireEvent:function(a,b){for(var c=0;cb)b=this.viewVertices[e].x;if(this.viewVertices[e].yd)d=this.viewVertices[e].y}this.AABB.x=a;this.AABB.y= -c;this.AABB.width=b-a;this.AABB.height=d-c;return this},setExpired:function(a){this.expired=true;this.fireEvent("expired",a);return this},enableEvents:function(a){this.mouseEnabled=a;return this},emptyBehaviorList:function(){this.behaviorList=[];return this},setFillStyle:function(a){this.fillStyle=a;return this},setStrokeStyle:function(a){this.strokeStyle=a;return this},setPaint:function(a){return this.setFillStyle(a)},setAlpha:function(a){this.alpha=a;return this},resetTransform:function(){this.rotateAnchor= -this.rotationAngle=0;this.rotationY=this.rotationX=0.5;this.scaleY=this.scaleX=1;this.scaleTY=this.scaleTX=0.5;this.scaleAnchor=0;this.oldY=this.oldX=-1;this.dirty=true;return this},setFrameTime:function(a,b){this.start_time=a;this.duration=b;this.expired=false;this.dirty=true;return this},paint:function(a,b){if(this.backgroundImage)this.backgroundImage.paint(a,b,0,0);else if(this.fillStyle){var c=a.crc;c.fillStyle=this.fillStyle;c.fillRect(0,0,this.width,this.height)}},setScale:function(a,b){this.setScaleAnchored(a, -b,0.5,0.5);this.dirty=true;return this},getAnchorPercent:function(a){var b=[0.5,0.5,0.5,0,0.5,1,0,0.5,1,0.5,0,0,1,0,0,1,1,1];return{x:b[a*2],y:b[a*2+1]}},getAnchor:function(a){var b=0,c=0;switch(a){case this.ANCHOR_CENTER:c=b=0.5;break;case this.ANCHOR_TOP:b=0.5;c=0;break;case this.ANCHOR_BOTTOM:b=0.5;c=1;break;case this.ANCHOR_LEFT:b=0;c=0.5;break;case this.ANCHOR_RIGHT:b=1;c=0.5;break;case this.ANCHOR_TOP_RIGHT:b=1;c=0;break;case this.ANCHOR_BOTTOM_LEFT:b=0;c=1;break;case this.ANCHOR_BOTTOM_RIGHT:c= -b=1;break;case this.ANCHOR_TOP_LEFT:c=b=0}return{x:b,y:c}},setScaleAnchored:function(a,b,c,d){this.scaleTX=c;this.scaleTY=d;this.scaleX=a;this.scaleY=b;this.dirty=true;return this},setRotation:function(a){this.setRotationAnchored(a,0.5,0.5);return this},setRotationAnchored:function(a,b,c){this.rotationAngle=a;this.rotationX=b?b:0;this.rotationY=c?c:0;this.dirty=true;return this},setSize:function(a,b){this.width=a|0;this.height=b|0;this.dirty=true;return this},setBounds:function(a,b,c,d){this.x=a; -this.y=b;this.width=c;this.height=d;this.dirty=true;return this},setLocation:function(a,b){this.x=a;this.y=b;this.oldX=a;this.oldY=b;this.dirty=true;return this},isInAnimationFrame:function(a){if(this.expired)return false;if(this.duration===Number.MAX_VALUE)return this.start_time<=a;return a>=this.start_time+this.duration?(this.expired||this.setExpired(a),false):this.start_time<=a&&a=0&&b>=0&&a>0)-0.5;b.moveTo(0.5,c);b.lineTo(this.width+0.5,c);b.stroke();c=Math.min(this.height-this.framerate.fps/this.SCALE*this.height,59);if(-1===this.framerate.prevFps)this.framerate.prevFps=c|0;b.strokeStyle="#0ff";b.beginPath();b.moveTo(this.width,(c|0)-0.5);b.lineTo(this.width,this.framerate.prevFps-0.5);b.stroke();this.framerate.prevFps=c;a=(this.height-a/this.SCALE*this.height>>0)-0.5;b.strokeStyle="#ff0";b.beginPath();b.moveTo(this.width,a);b.lineTo(this.width,a);b.stroke()}}})();(function(){CAAT.Actor=function(){this.behaviorList=[];this.lifecycleListenerList=[];this.AABB=new CAAT.Rectangle;this.viewVertices=[new CAAT.Point(0,0,0),new CAAT.Point(0,0,0),new CAAT.Point(0,0,0),new CAAT.Point(0,0,0)];this.rotateAnchor=this.scaleAnchor=this.ANCHOR_CENTER;this.modelViewMatrix=new CAAT.Matrix;this.worldModelViewMatrix=new CAAT.Matrix;this.resetTransform();this.setScale(1,1);this.setRotation(0);return this};CAAT.Actor.ANCHOR_CENTER=0;CAAT.Actor.ANCHOR_TOP=1;CAAT.Actor.ANCHOR_BOTTOM= +2;CAAT.Actor.ANCHOR_LEFT=3;CAAT.Actor.ANCHOR_RIGHT=4;CAAT.Actor.ANCHOR_TOP_LEFT=5;CAAT.Actor.ANCHOR_TOP_RIGHT=6;CAAT.Actor.ANCHOR_BOTTOM_LEFT=7;CAAT.Actor.ANCHOR_BOTTOM_RIGHT=8;CAAT.Actor.ANCHOR_CUSTOM=9;CAAT.Actor.prototype={lifecycleListenerList:null,behaviorList:null,parent:null,x:0,y:0,width:0,height:0,start_time:0,duration:Number.MAX_VALUE,clip:false,clipPath:null,scaleX:0,scaleY:0,scaleTX:0.5,scaleTY:0.5,scaleAnchor:0,rotationAngle:0,rotationY:0.5,alpha:1,rotationX:0.5,isGlobalAlpha:false,frameAlpha:1, +expired:false,discardable:false,pointed:false,mouseEnabled:true,visible:true,ANCHOR_CENTER:0,ANCHOR_TOP:1,ANCHOR_BOTTOM:2,ANCHOR_LEFT:3,ANCHOR_RIGHT:4,ANCHOR_TOP_LEFT:5,ANCHOR_TOP_RIGHT:6,ANCHOR_BOTTOM_LEFT:7,ANCHOR_BOTTOM_RIGHT:8,ANCHOR_CUSTOM:9,fillStyle:null,strokeStyle:null,time:0,AABB:null,viewVertices:null,inFrame:false,dirty:true,wdirty:true,oldX:-1,oldY:-1,modelViewMatrix:null,worldModelViewMatrix:null,modelViewMatrixI:null,worldModelViewMatrixI:null,glEnabled:false,backgroundImage:null,id:null, +size_active:1,size_total:1,__next:null,__d_ax:-1,__d_ay:-1,gestureEnabled:false,setGestureEnabled:function(a){this.gestureEnabled=!!a},isGestureEnabled:function(){return this.gestureEnabled},getId:function(){return this.id},setId:function(a){this.id=a;return this},setParent:function(a){this.parent=a;return this},setBackgroundImage:function(a,b){if(a){a instanceof CAAT.SpriteImage||(a=(new CAAT.SpriteImage).initialize(a,1,1));a.setOwner(this);this.backgroundImage=a;if(typeof b==="undefined"||b)this.width= +a.getWidth(),this.height=a.getHeight();this.glEnabled=true}else this.backgroundImage=null;return this},setSpriteIndex:function(a){this.backgroundImage&&this.backgroundImage.setSpriteIndex(a);return this},setBackgroundImageOffset:function(a,b){this.backgroundImage&&this.backgroundImage.setOffset(a,b);return this},setAnimationImageIndex:function(a){this.backgroundImage&&this.backgroundImage.setAnimationImageIndex(a);return this},setChangeFPS:function(a){this.backgroundImage&&this.backgroundImage.setChangeFPS(a); +return this},setImageTransformation:function(a){this.backgroundImage&&this.backgroundImage.setSpriteTransformation(a);return this},centerOn:function(a,b){this.setLocation(a-this.width/2,b-this.height/2);return this},centerAt:function(a,b){return this.centerOn(a,b)},getTextureGLPage:function(){return this.backgroundImage.image.__texturePage},setVisible:function(a){this.visible=a;return this},setOutOfFrameTime:function(){this.setFrameTime(-1,0);return this},addListener:function(a){this.lifecycleListenerList.push(a); +return this},removeListener:function(a){for(var b=this.lifecycleListenerList.length;b--;)if(this.lifecycleListenerList[b]===a){this.lifecycleListenerList.splice(b,1);break}},setGlobalAlpha:function(a){this.isGlobalAlpha=a;return this},fireEvent:function(a,b){for(var c=0;cb)b=this.viewVertices[e].x;if(this.viewVertices[e].yd)d=this.viewVertices[e].y}this.AABB.x=a;this.AABB.y=c;this.AABB.width=b-a;this.AABB.height=d-c;return this},setExpired:function(a){this.expired= +true;this.fireEvent("expired",a);return this},enableEvents:function(a){this.mouseEnabled=a;return this},emptyBehaviorList:function(){this.behaviorList=[];return this},setFillStyle:function(a){this.fillStyle=a;return this},setStrokeStyle:function(a){this.strokeStyle=a;return this},setPaint:function(a){return this.setFillStyle(a)},setAlpha:function(a){this.alpha=a;return this},resetTransform:function(){this.rotateAnchor=this.rotationAngle=0;this.rotationY=this.rotationX=0.5;this.scaleY=this.scaleX= +1;this.scaleTY=this.scaleTX=0.5;this.scaleAnchor=0;this.oldY=this.oldX=-1;this.dirty=true;return this},setFrameTime:function(a,b){this.start_time=a;this.duration=b;this.expired=false;this.dirty=true;return this},paint:function(a,b){if(this.backgroundImage)this.backgroundImage.paint(a,b,0,0);else if(this.fillStyle){var c=a.crc;c.fillStyle=this.fillStyle;c.fillRect(0,0,this.width,this.height)}},setScale:function(a,b){this.setScaleAnchored(a,b,0.5,0.5);this.dirty=true;return this},getAnchorPercent:function(a){var b= +[0.5,0.5,0.5,0,0.5,1,0,0.5,1,0.5,0,0,1,0,0,1,1,1];return{x:b[a*2],y:b[a*2+1]}},getAnchor:function(a){var b=0,c=0;switch(a){case this.ANCHOR_CENTER:c=b=0.5;break;case this.ANCHOR_TOP:b=0.5;c=0;break;case this.ANCHOR_BOTTOM:b=0.5;c=1;break;case this.ANCHOR_LEFT:b=0;c=0.5;break;case this.ANCHOR_RIGHT:b=1;c=0.5;break;case this.ANCHOR_TOP_RIGHT:b=1;c=0;break;case this.ANCHOR_BOTTOM_LEFT:b=0;c=1;break;case this.ANCHOR_BOTTOM_RIGHT:c=b=1;break;case this.ANCHOR_TOP_LEFT:c=b=0}return{x:b,y:c}},setScaleAnchored:function(a, +b,c,d){this.scaleTX=c;this.scaleTY=d;this.scaleX=a;this.scaleY=b;this.dirty=true;return this},setRotation:function(a){this.setRotationAnchored(a,0.5,0.5);return this},setRotationAnchored:function(a,b,c){this.rotationAngle=a;this.rotationX=b?b:0;this.rotationY=c?c:0;this.dirty=true;return this},setSize:function(a,b){this.width=a|0;this.height=b|0;this.dirty=true;return this},setBounds:function(a,b,c,d){this.x=a;this.y=b;this.width=c;this.height=d;this.dirty=true;return this},setLocation:function(a, +b){this.x=a;this.y=b;this.oldX=a;this.oldY=b;this.dirty=true;return this},isInAnimationFrame:function(a){if(this.expired)return false;if(this.duration===Number.MAX_VALUE)return this.start_time<=a;return a>=this.start_time+this.duration?(this.expired||this.setExpired(a),false):this.start_time<=a&&a=0&&b>=0&&a>0)*d;var k=i+(a/g>>0)*e,m=f+d,n=k+e;f=(new CAAT.SpriteImageHelper).setGL(f/j.width,k/j.height,m/j.width,n/j.height);this.mapInfo[a]=f}}else for(a=0;a0&&(g-=e);var h=this.offsetY%f;h>0&&(h-=f);var e=((this.ownerActor.width-g)/e>>0)+1,f=((this.ownerActor.height-h)/f>>0)+1,i,j;for(i=0;i>0,d+h+i*b.height>>0,b.width,b.height)},paintInvertedH:function(a, -b,c,d){this.setSpriteIndexAtTime(b);b=this.mapInfo[this.spriteIndex];a=a.ctx;a.save();a.translate((c|0)+b.width,d|0);a.scale(-1,1);a.drawImage(this.image,b.x,b.y,b.width,b.height,this.offsetX>>0,this.offsetY>>0,b.width,b.height);a.restore();return this},paintInvertedV:function(a,b,c,d){this.setSpriteIndexAtTime(b);b=this.mapInfo[this.spriteIndex];a=a.ctx;a.save();a.translate(c|0,d+b.height|0);a.scale(1,-1);a.drawImage(this.image,b.x,b.y,b.width,b.height,this.offsetX>>0,this.offsetY>>0,b.width,b.height); -a.restore();return this},paintInvertedHV:function(a,b,c,d){this.setSpriteIndexAtTime(b);b=this.mapInfo[this.spriteIndex];a=a.ctx;a.save();a.translate(c|0,d+b.height|0);a.scale(1,-1);a.translate(b.width,0);a.scale(-1,1);a.drawImage(this.image,b.x,b.y,b.width,b.height,this.offsetX>>0,this.offsetY>>0,b.width,b.height);a.restore();return this},paintN:function(a,b,c,d){this.setSpriteIndexAtTime(b);b=this.mapInfo[this.spriteIndex];a.ctx.drawImage(this.image,b.x,b.y,b.width,b.height,this.offsetX+c>>0,this.offsetY+ -d>>0,b.width,b.height);return this},paintScaled:function(a,b,c,d){this.setSpriteIndexAtTime(b);b=this.mapInfo[this.spriteIndex];a.ctx.drawImage(this.image,b.x,b.y,b.width,b.height,this.offsetX+c>>0,this.offsetY+d>>0,this.ownerActor.width,this.ownerActor.height);return this},getCurrentSpriteImageCSSPosition:function(){var a=this.mapInfo[this.spriteIndex];return"-"+(a.x-this.offsetX)+"px -"+(a.y-this.offsetY)+"px "+(this.transformation===this.TR_TILE?"":"no-repeat")},getNumImages:function(){return this.rows* -this.columns},setUV:function(a,b){var c=this.image;if(c.__texturePage){var d=b,e=this.mapInfo[this.spriteIndex],f=e.u,g=e.v,h=e.u1,e=e.v1;if(this.offsetX||this.offsetY)f=c.__texturePage,g=-this.offsetY/f.height,h=(this.ownerActor.width-this.offsetX)/f.width,e=(this.ownerActor.height-this.offsetY)/f.height,f=-this.offsetX/f.width+c.__u,g+=c.__v,h+=c.__u,e+=c.__v;c.inverted?(a[d++]=h,a[d++]=g,a[d++]=h,a[d++]=e,a[d++]=f,a[d++]=e,a[d++]=f,a[d++]=g):(a[d++]=f,a[d++]=g,a[d++]=h,a[d++]=g,a[d++]=h,a[d++]= -e,a[d++]=f,a[d++]=e)}},setChangeFPS:function(a){this.changeFPS=a;return this},setSpriteTransformation:function(a){this.transformation=a;switch(a){case this.TR_FLIP_HORIZONTAL:this.paint=this.paintInvertedH;break;case this.TR_FLIP_VERTICAL:this.paint=this.paintInvertedV;break;case this.TR_FLIP_ALL:this.paint=this.paintInvertedHV;break;case this.TR_FIXED_TO_SIZE:this.paint=this.paintScaled;break;case this.TR_TILE:this.paint=this.paintTiled;break;default:this.paint=this.paintN}return this},setAnimationImageIndex:function(a){this.animationImageIndex= -a;this.spriteIndex=a[0];return this},setSpriteIndex:function(a){this.spriteIndex=a;return this},setSpriteIndexAtTime:function(a){if(this.animationImageIndex.length>1)this.prevAnimationTime===-1?(this.prevAnimationTime=a,this.spriteIndex=0):(a-=this.prevAnimationTime,a/=this.changeFPS,a%=this.animationImageIndex.length,this.spriteIndex=this.animationImageIndex[Math.floor(a)])},initializeFromMap:function(a,b){this.initialize(a,1,1);var c,d,e=0;for(c in b)d=b[c],d=new CAAT.SpriteImageHelper(d.x,d.y, -d.width,d.height),this.mapInfo[c]=d,e||this.setAnimationImageIndex([c]),e++;return this}}})();(function(){CAAT.ImagePreloader=function(){this.images=[];return this};CAAT.ImagePreloader.prototype={images:null,notificationCallback:null,imageCounter:0,loadImages:function(a,b){a||b&&b(0,[]);var c=this,d;this.notificationCallback=b;this.images=[];for(d=0;d=this.duration?(this.remove=true,this.callback_timeout&&this.callback_timeout(a,b,this)):this.callback_tick&&this.callback_tick(a, +a.scaleX=this.scaleX;a.scaleY=this.scaleY;return a},setOffsetX:function(a){this.offsetX=a;return this},setOffsetY:function(a){this.offsetY=a;return this},setOffset:function(a,b){this.offsetX=a;this.offsetY=b;return this},initialize:function(a,b,c){this.image=a;this.rows=b;this.columns=c;this.width=a.width;this.height=a.height;this.singleWidth=Math.floor(this.width/c);this.singleHeight=Math.floor(this.height/b);this.mapInfo={};var d,e,f,g;if(a.__texturePage){a.__du=this.singleWidth/a.__texturePage.width; +a.__dv=this.singleHeight/a.__texturePage.height;e=this.singleWidth;f=this.singleHeight;var h=this.columns;if(a.inverted)d=e,e=f,f=d,h=this.rows;var a=this.image.__tx,i=this.image.__ty,j=this.image.__texturePage;for(d=0;d>0)*e;var k=i+(d/h>>0)*f,m=g+e,n=k+f;g=(new CAAT.SpriteImageHelper(g,k,m-g,n-k,j.width,j.height)).setGL(g/j.width,k/j.height,m/j.width,n/j.height);this.mapInfo[d]=g}}else for(d=0;d0&&(g-=e);var h=this.offsetY%f;h>0&&(h-=f);var e=((this.ownerActor.width-g)/e>>0)+1,f=((this.ownerActor.height-h)/f>>0)+1,i,j;for(i=0;i>0,d+h+i* +b.height>>0,b.width,b.height)},paintInvertedH:function(a,b,c,d){this.setSpriteIndexAtTime(b);b=this.mapInfo[this.spriteIndex];a=a.ctx;a.save();a.translate((c|0)+b.width,d|0);a.scale(-1,1);a.drawImage(this.image,b.x,b.y,b.width,b.height,this.offsetX>>0,this.offsetY>>0,b.width,b.height);a.restore();return this},paintInvertedV:function(a,b,c,d){this.setSpriteIndexAtTime(b);b=this.mapInfo[this.spriteIndex];a=a.ctx;a.save();a.translate(c|0,d+b.height|0);a.scale(1,-1);a.drawImage(this.image,b.x,b.y,b.width, +b.height,this.offsetX>>0,this.offsetY>>0,b.width,b.height);a.restore();return this},paintInvertedHV:function(a,b,c,d){this.setSpriteIndexAtTime(b);b=this.mapInfo[this.spriteIndex];a=a.ctx;a.save();a.translate(c|0,d+b.height|0);a.scale(1,-1);a.translate(b.width,0);a.scale(-1,1);a.drawImage(this.image,b.x,b.y,b.width,b.height,this.offsetX>>0,this.offsetY>>0,b.width,b.height);a.restore();return this},paintN:function(a,b,c,d){this.setSpriteIndexAtTime(b);b=this.mapInfo[this.spriteIndex];a.ctx.drawImage(this.image, +b.x,b.y,b.width,b.height,this.offsetX+c>>0,this.offsetY+d>>0,b.width,b.height);return this},paintScaled:function(a,b,c,d){this.setSpriteIndexAtTime(b);b=this.mapInfo[this.spriteIndex];a.ctx.drawImage(this.image,b.x,b.y,b.width,b.height,this.offsetX+c>>0,this.offsetY+d>>0,this.ownerActor.width,this.ownerActor.height);return this},getCurrentSpriteImageCSSPosition:function(){var a=this.mapInfo[this.spriteIndex];return"-"+(a.x-this.offsetX)+"px -"+(a.y-this.offsetY)+"px "+(this.transformation===this.TR_TILE? +"":"no-repeat")},getNumImages:function(){return this.rows*this.columns},setUV:function(a,b){var c=this.image;if(c.__texturePage){var d=b,e=this.mapInfo[this.spriteIndex],f=e.u,g=e.v,h=e.u1,e=e.v1;if(this.offsetX||this.offsetY)f=c.__texturePage,g=-this.offsetY/f.height,h=(this.ownerActor.width-this.offsetX)/f.width,e=(this.ownerActor.height-this.offsetY)/f.height,f=-this.offsetX/f.width+c.__u,g+=c.__v,h+=c.__u,e+=c.__v;c.inverted?(a[d++]=h,a[d++]=g,a[d++]=h,a[d++]=e,a[d++]=f,a[d++]=e,a[d++]=f,a[d++]= +g):(a[d++]=f,a[d++]=g,a[d++]=h,a[d++]=g,a[d++]=h,a[d++]=e,a[d++]=f,a[d++]=e)}},setChangeFPS:function(a){this.changeFPS=a;return this},setSpriteTransformation:function(a){this.transformation=a;switch(a){case this.TR_FLIP_HORIZONTAL:this.paint=this.paintInvertedH;break;case this.TR_FLIP_VERTICAL:this.paint=this.paintInvertedV;break;case this.TR_FLIP_ALL:this.paint=this.paintInvertedHV;break;case this.TR_FIXED_TO_SIZE:this.paint=this.paintScaled;break;case this.TR_TILE:this.paint=this.paintTiled;break; +default:this.paint=this.paintN}return this},setAnimationImageIndex:function(a){this.animationImageIndex=a;this.spriteIndex=a[0];return this},setSpriteIndex:function(a){this.spriteIndex=a;return this},setSpriteIndexAtTime:function(a){if(this.animationImageIndex.length>1)this.prevAnimationTime===-1?(this.prevAnimationTime=a,this.spriteIndex=0):(a-=this.prevAnimationTime,a/=this.changeFPS,a%=this.animationImageIndex.length,this.spriteIndex=this.animationImageIndex[Math.floor(a)])},initializeFromMap:function(a, +b){this.initialize(a,1,1);var c,d,e=0;for(c in b)d=b[c],d=new CAAT.SpriteImageHelper(d.x,d.y,d.width,d.height,a.width,a.height),this.mapInfo[c]=d,e||this.setAnimationImageIndex([c]),e++;return this},initializeAsFontMap:function(a,b){this.initialize(a,1,1);var c,d,e=0;for(c in b){var f=b[c];d=new CAAT.SpriteImageHelper(f.x,f.y,f.width,f.height,a.width,a.height);d.xoffset=typeof f.xoffset==="undefined"?0:f.xoffset;d.yoffset=typeof f.yoffset==="undefined"?0:f.yoffset;d.xadvance=typeof f.xadvance==="undefined"? +f.width:f.xadvance;this.mapInfo[c]=d;e||this.setAnimationImageIndex([c]);e++}return this},stringWidth:function(a){var b,c,d=0,e;for(b=0,c=a.length;b=this.duration?(this.remove=true,this.callback_timeout&&this.callback_timeout(a,b,this)):this.callback_tick&&this.callback_tick(a, b,this);return this},reset:function(a){this.remove=false;this.startTime=a;this.scene.ensureTimerTask(this);return this},cancel:function(){this.remove=true;null!=this.callback_cancel&&this.callback_cancel(this.scene.time,this.scene.time-this.startTime,this);return this}}})();(function(){CAAT.Scene=function(){CAAT.Scene.superclass.constructor.call(this);this.timerList=[];this.fillStyle=null;return this};CAAT.Scene.prototype={easeContainerBehaviour:null,easeContainerBehaviourListener:null,easeIn:false,EASE_ROTATION:1,EASE_SCALE:2,EASE_TRANSLATE:3,timerList:null,timerSequence:0,paused:false,isPaused:function(){return this.paused},setPaused:function(a){this.paused=a},checkTimers:function(a){for(var b=this.timerList,c=b.length-1;c>=0;)b[c].remove||b[c].checkTask(a),c--},ensureTimerTask:function(a){this.hasTimer(a)|| this.timerList.push(a);return this},hasTimer:function(a){for(var b=this.timerList,c=b.length-1;c>=0;){if(b[c]===a)return true;c--}return false},createTimer:function(a,b,c,d,e){a=(new CAAT.TimerTask).create(a,b,c,d,e);a.taskId=this.timerSequence++;a.sceneTime=this.time;a.scene=this;this.timerList.push(a);return a},removeExpiredTimers:function(){var a,b=this.timerList;for(a=0;a 14 * Common bind function. Allows to set an object's function as callback. Set for every function in the 15 * javascript context. 16 */ - 17 Function.prototype.bind= function() { + 17 Function.prototype.bind= Function.prototype.bind || function() { 18 var fn= this; // the function 19 var args= Array.prototype.slice.call(arguments); // copy the arguments. 20 var obj= args.shift(); // first parameter will be context 'this' diff --git a/documentation/jsdoc/symbols/src/_Users_ibon_js_CAAT_src_math_bezier.js.html b/documentation/jsdoc/symbols/src/_Users_ibon_js_CAAT_src_math_bezier.js.html index 9d4d0198..aecd563b 100644 --- a/documentation/jsdoc/symbols/src/_Users_ibon_js_CAAT_src_math_bezier.js.html +++ b/documentation/jsdoc/symbols/src/_Users_ibon_js_CAAT_src_math_bezier.js.html @@ -118,410 +118,411 @@ 111 } 112 113 // thanks yodesoft.com for spotting the first point is out of the BB -114 rectangle.union( this.coordlist[0].x, this.coordlist[0].y ); -115 -116 var pt= new CAAT.Point(); -117 for(var t=this.k;t<=1+this.k;t+=this.k){ -118 this.solve(pt,t); -119 rectangle.union( pt.x, pt.y ); -120 } -121 -122 return rectangle; -123 }, -124 /** -125 * Calculate the curve length by incrementally solving the curve every substep=CAAT.Curve.k. This value defaults -126 * to .05 so at least 20 iterations will be performed. -127 * -128 * @return {number} the approximate curve length. -129 */ -130 calcLength : function() { -131 var x1,x2,y1,y2; -132 x1 = this.coordlist[0].x; -133 y1 = this.coordlist[0].y; -134 var llength=0; -135 var pt= new CAAT.Point(); -136 for(var t=this.k;t<=1+this.k;t+=this.k){ -137 this.solve(pt,t); -138 llength+= Math.sqrt( (pt.x-x1)*(pt.x-x1) + (pt.y-y1)*(pt.y-y1) ); -139 x1=pt.x; -140 y1=pt.y; -141 } -142 -143 this.length= llength; -144 return llength; -145 }, -146 /** -147 * Return the cached curve length. -148 * @return {number} the cached curve length. -149 */ -150 getLength : function() { -151 return this.length; -152 }, -153 /** -154 * Return the first curve control point. -155 * @param point {CAAT.Point} -156 * @return {CAAT.Point} -157 */ -158 endCurvePosition : function(point) { -159 return this.coordlist[ this.coordlist.length-1 ]; -160 }, -161 /** -162 * Return the last curve control point. -163 * @param point {CAAT.Point} -164 * @return {CAAT.Point} -165 */ -166 startCurvePosition : function(point) { -167 return this.coordlist[ 0 ]; -168 }, -169 -170 setPoints : function( points ) { -171 }, -172 -173 setPoint : function( point, index ) { -174 if ( index>=0 && index<this.coordlist.length ) { -175 this.coordlist[index]= point; -176 } -177 }, -178 applyAsPath : function( ctx ) { -179 } -180 }; -181 })(); -182 +114 rectangle.setEmpty(); +115 rectangle.union( this.coordlist[0].x, this.coordlist[0].y ); +116 +117 var pt= new CAAT.Point(); +118 for(var t=this.k;t<=1+this.k;t+=this.k){ +119 this.solve(pt,t); +120 rectangle.union( pt.x, pt.y ); +121 } +122 +123 return rectangle; +124 }, +125 /** +126 * Calculate the curve length by incrementally solving the curve every substep=CAAT.Curve.k. This value defaults +127 * to .05 so at least 20 iterations will be performed. +128 * +129 * @return {number} the approximate curve length. +130 */ +131 calcLength : function() { +132 var x1,x2,y1,y2; +133 x1 = this.coordlist[0].x; +134 y1 = this.coordlist[0].y; +135 var llength=0; +136 var pt= new CAAT.Point(); +137 for(var t=this.k;t<=1+this.k;t+=this.k){ +138 this.solve(pt,t); +139 llength+= Math.sqrt( (pt.x-x1)*(pt.x-x1) + (pt.y-y1)*(pt.y-y1) ); +140 x1=pt.x; +141 y1=pt.y; +142 } +143 +144 this.length= llength; +145 return llength; +146 }, +147 /** +148 * Return the cached curve length. +149 * @return {number} the cached curve length. +150 */ +151 getLength : function() { +152 return this.length; +153 }, +154 /** +155 * Return the first curve control point. +156 * @param point {CAAT.Point} +157 * @return {CAAT.Point} +158 */ +159 endCurvePosition : function(point) { +160 return this.coordlist[ this.coordlist.length-1 ]; +161 }, +162 /** +163 * Return the last curve control point. +164 * @param point {CAAT.Point} +165 * @return {CAAT.Point} +166 */ +167 startCurvePosition : function(point) { +168 return this.coordlist[ 0 ]; +169 }, +170 +171 setPoints : function( points ) { +172 }, +173 +174 setPoint : function( point, index ) { +175 if ( index>=0 && index<this.coordlist.length ) { +176 this.coordlist[index]= point; +177 } +178 }, +179 applyAsPath : function( ctx ) { +180 } +181 }; +182 })(); 183 -184 (function() { -185 -186 /** -187 * Bezier quadric and cubic curves implementation. -188 * -189 * @constructor -190 * @extends CAAT.Curve -191 */ -192 CAAT.Bezier= function() { -193 CAAT.Bezier.superclass.constructor.call(this); -194 return this; -195 }; -196 -197 CAAT.Bezier.prototype= { -198 -199 cubic: false, -200 -201 applyAsPath : function( ctx ) { -202 -203 var cc= this.coordlist; -204 -205 if ( this.cubic ) { -206 ctx.bezierCurveTo( -207 cc[1].x, -208 cc[1].y, -209 cc[2].x, -210 cc[2].y, -211 cc[3].x, -212 cc[3].y -213 ); -214 } else { -215 ctx.quadraticCurveTo( -216 cc[1].x, -217 cc[1].y, -218 cc[2].x, -219 cc[2].y -220 ); -221 } -222 return this; -223 }, -224 isQuadric : function() { -225 return !this.cubic; -226 }, -227 isCubic : function() { -228 return this.cubic; -229 }, -230 /** -231 * Set this curve as a cubic bezier defined by the given four control points. -232 * @param cp0x {number} -233 * @param cp0y {number} -234 * @param cp1x {number} -235 * @param cp1y {number} -236 * @param cp2x {number} -237 * @param cp2y {number} -238 * @param cp3x {number} -239 * @param cp3y {number} -240 */ -241 setCubic : function( cp0x,cp0y, cp1x,cp1y, cp2x,cp2y, cp3x,cp3y ) { -242 -243 this.coordlist= []; -244 -245 this.coordlist.push( new CAAT.Point().set(cp0x, cp0y ) ); -246 this.coordlist.push( new CAAT.Point().set(cp1x, cp1y ) ); -247 this.coordlist.push( new CAAT.Point().set(cp2x, cp2y ) ); -248 this.coordlist.push( new CAAT.Point().set(cp3x, cp3y ) ); -249 -250 this.cubic= true; -251 this.update(); -252 -253 return this; -254 }, -255 /** -256 * Set this curve as a quadric bezier defined by the three control points. -257 * @param cp0x {number} -258 * @param cp0y {number} -259 * @param cp1x {number} -260 * @param cp1y {number} -261 * @param cp2x {number} -262 * @param cp2y {number} -263 */ -264 setQuadric : function(cp0x,cp0y, cp1x,cp1y, cp2x,cp2y ) { -265 -266 this.coordlist= []; -267 -268 this.coordlist.push( new CAAT.Point().set(cp0x, cp0y ) ); -269 this.coordlist.push( new CAAT.Point().set(cp1x, cp1y ) ); -270 this.coordlist.push( new CAAT.Point().set(cp2x, cp2y ) ); -271 -272 this.cubic= false; -273 this.update(); -274 -275 return this; -276 }, -277 setPoints : function( points ) { -278 if ( points.length===3 ) { -279 this.coordlist= points; -280 this.cubic= false; -281 this.update(); -282 } else if (points.length===4 ) { -283 this.coordlist= points; -284 this.cubic= true; -285 this.update(); -286 } else { -287 throw 'points must be an array of 3 or 4 CAAT.Point instances.' -288 } -289 -290 return this; -291 }, -292 /** -293 * Paint this curve. -294 * @param director {CAAT.Director} -295 */ -296 paint : function( director ) { -297 if ( this.cubic ) { -298 this.paintCubic(director); -299 } else { -300 this.paintCuadric( director ); -301 } -302 -303 CAAT.Bezier.superclass.paint.call(this,director); -304 -305 }, -306 /** -307 * Paint this quadric Bezier curve. Each time the curve is drawn it will be solved again from 0 to 1 with -308 * CAAT.Bezier.k increments. -309 * -310 * @param director {CAAT.Director} -311 * @private -312 */ -313 paintCuadric : function( director ) { -314 var x1,y1; -315 x1 = this.coordlist[0].x; -316 y1 = this.coordlist[0].y; -317 -318 var ctx= director.ctx; -319 -320 ctx.save(); -321 ctx.beginPath(); -322 ctx.moveTo(x1,y1); -323 -324 var point= new CAAT.Point(); -325 for(var t=this.k;t<=1+this.k;t+=this.k){ -326 this.solve(point,t); -327 ctx.lineTo(point.x, point.y ); -328 } -329 -330 ctx.stroke(); -331 ctx.restore(); -332 -333 }, -334 /** -335 * Paint this cubic Bezier curve. Each time the curve is drawn it will be solved again from 0 to 1 with -336 * CAAT.Bezier.k increments. -337 * -338 * @param director {CAAT.Director} -339 * @private -340 */ -341 paintCubic : function( director ) { -342 -343 var x1,y1; -344 x1 = this.coordlist[0].x; -345 y1 = this.coordlist[0].y; -346 -347 var ctx= director.ctx; -348 -349 ctx.save(); -350 ctx.beginPath(); -351 ctx.moveTo(x1,y1); -352 -353 var point= new CAAT.Point(); -354 for(var t=this.k;t<=1+this.k;t+=this.k){ -355 this.solve(point,t); -356 ctx.lineTo(point.x, point.y ); -357 } -358 -359 ctx.stroke(); -360 ctx.restore(); -361 }, -362 /** -363 * Solves the curve for any given parameter t. -364 * @param point {CAAT.Point} the point to store the solved value on the curve. -365 * @param t {number} a number in the range 0..1 -366 */ -367 solve : function(point,t) { -368 if ( this.cubic ) { -369 return this.solveCubic(point,t); -370 } else { -371 return this.solveQuadric(point,t); -372 } -373 }, -374 /** -375 * Solves a cubic Bezier. -376 * @param point {CAAT.Point} the point to store the solved value on the curve. -377 * @param t {number} the value to solve the curve for. -378 */ -379 solveCubic : function(point,t) { -380 -381 var t2= t*t; -382 var t3= t*t2; -383 -384 var cl= this.coordlist; -385 var cl0= cl[0]; -386 var cl1= cl[1]; -387 var cl2= cl[2]; -388 var cl3= cl[3]; -389 -390 point.x=( -391 cl0.x + t * (-cl0.x * 3 + t * (3 * cl0.x- -392 cl0.x*t)))+t*(3*cl1.x+t*(-6*cl1.x+ -393 cl1.x*3*t))+t2*(cl2.x*3-cl2.x*3*t)+ -394 cl3.x * t3; -395 -396 point.y=( -397 cl0.y+t*(-cl0.y*3+t*(3*cl0.y- -398 cl0.y*t)))+t*(3*cl1.y+t*(-6*cl1.y+ -399 cl1.y*3*t))+t2*(cl2.y*3-cl2.y*3*t)+ -400 cl3.y * t3; -401 -402 return point; -403 }, -404 /** -405 * Solves a quadric Bezier. -406 * @param point {CAAT.Point} the point to store the solved value on the curve. -407 * @param t {number} the value to solve the curve for. -408 */ -409 solveQuadric : function(point,t) { -410 var cl= this.coordlist; -411 var cl0= cl[0]; -412 var cl1= cl[1]; -413 var cl2= cl[2]; -414 var t1= 1-t; -415 -416 point.x= t1*t1*cl0.x + 2*t1*t*cl1.x + t*t*cl2.x; -417 point.y= t1*t1*cl0.y + 2*t1*t*cl1.y + t*t*cl2.y; -418 -419 return point; -420 } -421 }; -422 -423 extend(CAAT.Bezier, CAAT.Curve, null); -424 -425 })(); -426 -427 (function() { -428 -429 /** -430 * CatmullRom curves solver implementation. -431 * <p> -432 * <strong>Incomplete class, do not use.</strong> -433 * -434 * @constructor -435 * @extends CAAT.Curve -436 */ -437 CAAT.CatmullRom = function() { -438 CAAT.CatmullRom.superclass.constructor.call(this); -439 return this; -440 }; -441 -442 CAAT.CatmullRom.prototype= { -443 -444 /** -445 * Set curve control points. -446 * @param cp0x {number} -447 * @param cp0y {number} -448 * @param cp1x {number} -449 * @param cp1y {number} -450 * @param cp2x {number} -451 * @param cp2y {number} -452 * @param cp3x {number} -453 * @param cp3y {number} -454 */ -455 setCurve : function( cp0x,cp0y, cp1x,cp1y, cp2x,cp2y, cp3x,cp3y ) { -456 -457 this.coordlist= []; -458 -459 this.coordlist.push( new CAAT.Point().set(cp0x, cp0y ) ); -460 this.coordlist.push( new CAAT.Point().set(cp1x, cp1y ) ); -461 this.coordlist.push( new CAAT.Point().set(cp2x, cp2y ) ); -462 this.coordlist.push( new CAAT.Point().set(cp3x, cp3y ) ); -463 -464 this.cubic= true; -465 this.update(); -466 }, -467 /** -468 * Paint the contour by solving again the entire curve. -469 * @param director {CAAT.Director} -470 */ -471 paint: function(director) { -472 -473 var x1,x2,y1,y2; -474 x1 = this.coordlist[0].x; -475 y1 = this.coordlist[0].y; -476 -477 var ctx= director.ctx; -478 -479 ctx.save(); -480 ctx.beginPath(); -481 ctx.moveTo(x1,y1); -482 -483 var point= new CAAT.Point(); -484 -485 for(var t=this.k;t<=1+this.k;t+=this.k){ -486 this.solve(point,t); -487 ctx.lineTo(point.x,point.y); -488 } -489 -490 ctx.stroke(); -491 ctx.restore(); -492 -493 CAAT.CatmullRom.superclass.paint.call(this,director); -494 }, -495 /** -496 * Solves the curve for any given parameter t. -497 * @param point {CAAT.Point} the point to store the solved value on the curve. -498 * @param t {number} a number in the range 0..1 -499 */ -500 solve: function(point,t) { -501 var t2= t*t; -502 var t3= t*t2; -503 -504 var c= this.coordlist; -505 -506 // q(t) = 0.5 *( (2 * P1) + -507 // (-P0 + P2) * t + -508 // (2*P0 - 5*P1 + 4*P2 - P3) * t2 + -509 // (-P0 + 3*P1- 3*P2 + P3) * t3) -510 -511 point.x= 0.5*( (2*c[1].x) + (-c[0].x+c[2].x)*t + (2*c[0].x - 5*c[1].x + 4*c[2].x - c[3].x)*t2 + (-c[0].x + 3*c[1].x - 3*c[2].x + c[3].x)*t3 ); -512 point.y= 0.5*( (2*c[1].y) + (-c[0].y+c[2].y)*t + (2*c[0].y - 5*c[1].y + 4*c[2].y - c[3].y)*t2 + (-c[0].y + 3*c[1].y - 3*c[2].y + c[3].y)*t3 ); -513 -514 return point; -515 -516 } -517 }; -518 -519 extend(CAAT.CatmullRom, CAAT.Curve, null); -520 })(); \ No newline at end of file +184 +185 (function() { +186 +187 /** +188 * Bezier quadric and cubic curves implementation. +189 * +190 * @constructor +191 * @extends CAAT.Curve +192 */ +193 CAAT.Bezier= function() { +194 CAAT.Bezier.superclass.constructor.call(this); +195 return this; +196 }; +197 +198 CAAT.Bezier.prototype= { +199 +200 cubic: false, +201 +202 applyAsPath : function( ctx ) { +203 +204 var cc= this.coordlist; +205 +206 if ( this.cubic ) { +207 ctx.bezierCurveTo( +208 cc[1].x, +209 cc[1].y, +210 cc[2].x, +211 cc[2].y, +212 cc[3].x, +213 cc[3].y +214 ); +215 } else { +216 ctx.quadraticCurveTo( +217 cc[1].x, +218 cc[1].y, +219 cc[2].x, +220 cc[2].y +221 ); +222 } +223 return this; +224 }, +225 isQuadric : function() { +226 return !this.cubic; +227 }, +228 isCubic : function() { +229 return this.cubic; +230 }, +231 /** +232 * Set this curve as a cubic bezier defined by the given four control points. +233 * @param cp0x {number} +234 * @param cp0y {number} +235 * @param cp1x {number} +236 * @param cp1y {number} +237 * @param cp2x {number} +238 * @param cp2y {number} +239 * @param cp3x {number} +240 * @param cp3y {number} +241 */ +242 setCubic : function( cp0x,cp0y, cp1x,cp1y, cp2x,cp2y, cp3x,cp3y ) { +243 +244 this.coordlist= []; +245 +246 this.coordlist.push( new CAAT.Point().set(cp0x, cp0y ) ); +247 this.coordlist.push( new CAAT.Point().set(cp1x, cp1y ) ); +248 this.coordlist.push( new CAAT.Point().set(cp2x, cp2y ) ); +249 this.coordlist.push( new CAAT.Point().set(cp3x, cp3y ) ); +250 +251 this.cubic= true; +252 this.update(); +253 +254 return this; +255 }, +256 /** +257 * Set this curve as a quadric bezier defined by the three control points. +258 * @param cp0x {number} +259 * @param cp0y {number} +260 * @param cp1x {number} +261 * @param cp1y {number} +262 * @param cp2x {number} +263 * @param cp2y {number} +264 */ +265 setQuadric : function(cp0x,cp0y, cp1x,cp1y, cp2x,cp2y ) { +266 +267 this.coordlist= []; +268 +269 this.coordlist.push( new CAAT.Point().set(cp0x, cp0y ) ); +270 this.coordlist.push( new CAAT.Point().set(cp1x, cp1y ) ); +271 this.coordlist.push( new CAAT.Point().set(cp2x, cp2y ) ); +272 +273 this.cubic= false; +274 this.update(); +275 +276 return this; +277 }, +278 setPoints : function( points ) { +279 if ( points.length===3 ) { +280 this.coordlist= points; +281 this.cubic= false; +282 this.update(); +283 } else if (points.length===4 ) { +284 this.coordlist= points; +285 this.cubic= true; +286 this.update(); +287 } else { +288 throw 'points must be an array of 3 or 4 CAAT.Point instances.' +289 } +290 +291 return this; +292 }, +293 /** +294 * Paint this curve. +295 * @param director {CAAT.Director} +296 */ +297 paint : function( director ) { +298 if ( this.cubic ) { +299 this.paintCubic(director); +300 } else { +301 this.paintCuadric( director ); +302 } +303 +304 CAAT.Bezier.superclass.paint.call(this,director); +305 +306 }, +307 /** +308 * Paint this quadric Bezier curve. Each time the curve is drawn it will be solved again from 0 to 1 with +309 * CAAT.Bezier.k increments. +310 * +311 * @param director {CAAT.Director} +312 * @private +313 */ +314 paintCuadric : function( director ) { +315 var x1,y1; +316 x1 = this.coordlist[0].x; +317 y1 = this.coordlist[0].y; +318 +319 var ctx= director.ctx; +320 +321 ctx.save(); +322 ctx.beginPath(); +323 ctx.moveTo(x1,y1); +324 +325 var point= new CAAT.Point(); +326 for(var t=this.k;t<=1+this.k;t+=this.k){ +327 this.solve(point,t); +328 ctx.lineTo(point.x, point.y ); +329 } +330 +331 ctx.stroke(); +332 ctx.restore(); +333 +334 }, +335 /** +336 * Paint this cubic Bezier curve. Each time the curve is drawn it will be solved again from 0 to 1 with +337 * CAAT.Bezier.k increments. +338 * +339 * @param director {CAAT.Director} +340 * @private +341 */ +342 paintCubic : function( director ) { +343 +344 var x1,y1; +345 x1 = this.coordlist[0].x; +346 y1 = this.coordlist[0].y; +347 +348 var ctx= director.ctx; +349 +350 ctx.save(); +351 ctx.beginPath(); +352 ctx.moveTo(x1,y1); +353 +354 var point= new CAAT.Point(); +355 for(var t=this.k;t<=1+this.k;t+=this.k){ +356 this.solve(point,t); +357 ctx.lineTo(point.x, point.y ); +358 } +359 +360 ctx.stroke(); +361 ctx.restore(); +362 }, +363 /** +364 * Solves the curve for any given parameter t. +365 * @param point {CAAT.Point} the point to store the solved value on the curve. +366 * @param t {number} a number in the range 0..1 +367 */ +368 solve : function(point,t) { +369 if ( this.cubic ) { +370 return this.solveCubic(point,t); +371 } else { +372 return this.solveQuadric(point,t); +373 } +374 }, +375 /** +376 * Solves a cubic Bezier. +377 * @param point {CAAT.Point} the point to store the solved value on the curve. +378 * @param t {number} the value to solve the curve for. +379 */ +380 solveCubic : function(point,t) { +381 +382 var t2= t*t; +383 var t3= t*t2; +384 +385 var cl= this.coordlist; +386 var cl0= cl[0]; +387 var cl1= cl[1]; +388 var cl2= cl[2]; +389 var cl3= cl[3]; +390 +391 point.x=( +392 cl0.x + t * (-cl0.x * 3 + t * (3 * cl0.x- +393 cl0.x*t)))+t*(3*cl1.x+t*(-6*cl1.x+ +394 cl1.x*3*t))+t2*(cl2.x*3-cl2.x*3*t)+ +395 cl3.x * t3; +396 +397 point.y=( +398 cl0.y+t*(-cl0.y*3+t*(3*cl0.y- +399 cl0.y*t)))+t*(3*cl1.y+t*(-6*cl1.y+ +400 cl1.y*3*t))+t2*(cl2.y*3-cl2.y*3*t)+ +401 cl3.y * t3; +402 +403 return point; +404 }, +405 /** +406 * Solves a quadric Bezier. +407 * @param point {CAAT.Point} the point to store the solved value on the curve. +408 * @param t {number} the value to solve the curve for. +409 */ +410 solveQuadric : function(point,t) { +411 var cl= this.coordlist; +412 var cl0= cl[0]; +413 var cl1= cl[1]; +414 var cl2= cl[2]; +415 var t1= 1-t; +416 +417 point.x= t1*t1*cl0.x + 2*t1*t*cl1.x + t*t*cl2.x; +418 point.y= t1*t1*cl0.y + 2*t1*t*cl1.y + t*t*cl2.y; +419 +420 return point; +421 } +422 }; +423 +424 extend(CAAT.Bezier, CAAT.Curve, null); +425 +426 })(); +427 +428 (function() { +429 +430 /** +431 * CatmullRom curves solver implementation. +432 * <p> +433 * <strong>Incomplete class, do not use.</strong> +434 * +435 * @constructor +436 * @extends CAAT.Curve +437 */ +438 CAAT.CatmullRom = function() { +439 CAAT.CatmullRom.superclass.constructor.call(this); +440 return this; +441 }; +442 +443 CAAT.CatmullRom.prototype= { +444 +445 /** +446 * Set curve control points. +447 * @param cp0x {number} +448 * @param cp0y {number} +449 * @param cp1x {number} +450 * @param cp1y {number} +451 * @param cp2x {number} +452 * @param cp2y {number} +453 * @param cp3x {number} +454 * @param cp3y {number} +455 */ +456 setCurve : function( cp0x,cp0y, cp1x,cp1y, cp2x,cp2y, cp3x,cp3y ) { +457 +458 this.coordlist= []; +459 +460 this.coordlist.push( new CAAT.Point().set(cp0x, cp0y ) ); +461 this.coordlist.push( new CAAT.Point().set(cp1x, cp1y ) ); +462 this.coordlist.push( new CAAT.Point().set(cp2x, cp2y ) ); +463 this.coordlist.push( new CAAT.Point().set(cp3x, cp3y ) ); +464 +465 this.cubic= true; +466 this.update(); +467 }, +468 /** +469 * Paint the contour by solving again the entire curve. +470 * @param director {CAAT.Director} +471 */ +472 paint: function(director) { +473 +474 var x1,x2,y1,y2; +475 x1 = this.coordlist[0].x; +476 y1 = this.coordlist[0].y; +477 +478 var ctx= director.ctx; +479 +480 ctx.save(); +481 ctx.beginPath(); +482 ctx.moveTo(x1,y1); +483 +484 var point= new CAAT.Point(); +485 +486 for(var t=this.k;t<=1+this.k;t+=this.k){ +487 this.solve(point,t); +488 ctx.lineTo(point.x,point.y); +489 } +490 +491 ctx.stroke(); +492 ctx.restore(); +493 +494 CAAT.CatmullRom.superclass.paint.call(this,director); +495 }, +496 /** +497 * Solves the curve for any given parameter t. +498 * @param point {CAAT.Point} the point to store the solved value on the curve. +499 * @param t {number} a number in the range 0..1 +500 */ +501 solve: function(point,t) { +502 var t2= t*t; +503 var t3= t*t2; +504 +505 var c= this.coordlist; +506 +507 // q(t) = 0.5 *( (2 * P1) + +508 // (-P0 + P2) * t + +509 // (2*P0 - 5*P1 + 4*P2 - P3) * t2 + +510 // (-P0 + 3*P1- 3*P2 + P3) * t3) +511 +512 point.x= 0.5*( (2*c[1].x) + (-c[0].x+c[2].x)*t + (2*c[0].x - 5*c[1].x + 4*c[2].x - c[3].x)*t2 + (-c[0].x + 3*c[1].x - 3*c[2].x + c[3].x)*t3 ); +513 point.y= 0.5*( (2*c[1].y) + (-c[0].y+c[2].y)*t + (2*c[0].y - 5*c[1].y + 4*c[2].y - c[3].y)*t2 + (-c[0].y + 3*c[1].y - 3*c[2].y + c[3].y)*t3 ); +514 +515 return point; +516 +517 } +518 }; +519 +520 extend(CAAT.CatmullRom, CAAT.Curve, null); +521 })(); \ No newline at end of file diff --git a/documentation/jsdoc/symbols/src/_Users_ibon_js_CAAT_src_math_point.js.html b/documentation/jsdoc/symbols/src/_Users_ibon_js_CAAT_src_math_point.js.html index 446d1909..f3d3601d 100644 --- a/documentation/jsdoc/symbols/src/_Users_ibon_js_CAAT_src_math_point.js.html +++ b/documentation/jsdoc/symbols/src/_Users_ibon_js_CAAT_src_math_point.js.html @@ -66,7 +66,7 @@ 59 translate : function(x,y,z) { 60 this.x+= x; 61 this.y+= y; - 62 this.z+= z||0; + 62 this.z+= z; 63 64 return this; 65 }, diff --git a/documentation/jsdoc/symbols/src/_Users_ibon_js_CAAT_src_math_rectangle.js.html b/documentation/jsdoc/symbols/src/_Users_ibon_js_CAAT_src_math_rectangle.js.html index 63c0ab3e..8462b3c3 100644 --- a/documentation/jsdoc/symbols/src/_Users_ibon_js_CAAT_src_math_rectangle.js.html +++ b/documentation/jsdoc/symbols/src/_Users_ibon_js_CAAT_src_math_rectangle.js.html @@ -38,8 +38,8 @@ 31 this.height= -1; 32 this.x= 0; 33 this.y= 0; - 34 this.width= 0; - 35 this.height= 0; + 34 this.x1= 0; + 35 this.y1= 0; 36 return this; 37 }, 38 /** diff --git a/documentation/jsdoc/symbols/src/_Users_ibon_js_CAAT_src_model_actor.js.html b/documentation/jsdoc/symbols/src/_Users_ibon_js_CAAT_src_model_actor.js.html index 825e9f3e..479c743f 100644 --- a/documentation/jsdoc/symbols/src/_Users_ibon_js_CAAT_src_model_actor.js.html +++ b/documentation/jsdoc/symbols/src/_Users_ibon_js_CAAT_src_model_actor.js.html @@ -52,2803 +52,2805 @@ 45 46 this.modelViewMatrix= new CAAT.Matrix(); 47 this.worldModelViewMatrix= new CAAT.Matrix(); - 48 this.modelViewMatrixI= new CAAT.Matrix(); - 49 this.worldModelViewMatrixI= new CAAT.Matrix(); - 50 this.tmpMatrix= new CAAT.Matrix(); - 51 - 52 this.resetTransform(); - 53 this.setScale(1,1); - 54 this.setRotation(0); - 55 - 56 return this; - 57 }; - 58 - 59 CAAT.Actor.ANCHOR_CENTER= 0; // constant values to determine different affine transform - 60 CAAT.Actor.ANCHOR_TOP= 1; // anchors. - 61 CAAT.Actor.ANCHOR_BOTTOM= 2; - 62 CAAT.Actor.ANCHOR_LEFT= 3; - 63 CAAT.Actor.ANCHOR_RIGHT= 4; - 64 CAAT.Actor.ANCHOR_TOP_LEFT= 5; - 65 CAAT.Actor.ANCHOR_TOP_RIGHT= 6; - 66 CAAT.Actor.ANCHOR_BOTTOM_LEFT= 7; - 67 CAAT.Actor.ANCHOR_BOTTOM_RIGHT= 8; - 68 CAAT.Actor.ANCHOR_CUSTOM= 9; - 69 - 70 CAAT.Actor.prototype= { + 48 /* + 49 this.modelViewMatrixI= new CAAT.Matrix(); + 50 this.worldModelViewMatrixI= new CAAT.Matrix(); + 51 this.tmpMatrix= new CAAT.Matrix(); + 52 */ + 53 + 54 this.resetTransform(); + 55 this.setScale(1,1); + 56 this.setRotation(0); + 57 + 58 return this; + 59 }; + 60 + 61 CAAT.Actor.ANCHOR_CENTER= 0; // constant values to determine different affine transform + 62 CAAT.Actor.ANCHOR_TOP= 1; // anchors. + 63 CAAT.Actor.ANCHOR_BOTTOM= 2; + 64 CAAT.Actor.ANCHOR_LEFT= 3; + 65 CAAT.Actor.ANCHOR_RIGHT= 4; + 66 CAAT.Actor.ANCHOR_TOP_LEFT= 5; + 67 CAAT.Actor.ANCHOR_TOP_RIGHT= 6; + 68 CAAT.Actor.ANCHOR_BOTTOM_LEFT= 7; + 69 CAAT.Actor.ANCHOR_BOTTOM_RIGHT= 8; + 70 CAAT.Actor.ANCHOR_CUSTOM= 9; 71 - 72 tmpMatrix : null, + 72 CAAT.Actor.prototype= { 73 - 74 lifecycleListenerList: null, // Array of life cycle listener + 74 // tmpMatrix : null, 75 - 76 behaviorList: null, // Array of behaviors to apply to the Actor - 77 parent: null, // Parent of this Actor. May be Scene. - 78 x: 0, // x position on parent. In parent's local coord. system. - 79 y: 0, // y position on parent. In parent's local coord. system. - 80 width: 0, // Actor's width. In parent's local coord. system. - 81 height: 0, // Actor's height. In parent's local coord. system. - 82 start_time: 0, // Start time in Scene time. - 83 duration: Number.MAX_VALUE, // Actor duration in Scene time - 84 clip: false, // should clip the Actor's content against its contour. - 85 clipPath: null, - 86 - 87 scaleX: 0, // transformation. width scale parameter - 88 scaleY: 0, // transformation. height scale parameter - 89 scaleTX: .50, // transformation. scale anchor x position - 90 scaleTY: .50, // transformation. scale anchor y position - 91 scaleAnchor: 0, // transformation. scale anchor - 92 rotationAngle: 0, // transformation. rotation angle in radians - 93 rotationY: .50, // transformation. rotation center y - 94 alpha: 1, // alpha transparency value - 95 rotationX: .50, // transformation. rotation center x - 96 isGlobalAlpha: false, // is this a global alpha - 97 frameAlpha: 1, // hierarchically calculated alpha for this Actor. - 98 expired: false, // set when the actor has been expired - 99 discardable: false, // set when you want this actor to be removed if expired -100 pointed: false, // is the mouse pointer inside this actor -101 mouseEnabled: true, // events enabled ? -102 -103 visible: true, + 76 lifecycleListenerList: null, // Array of life cycle listener + 77 + 78 behaviorList: null, // Array of behaviors to apply to the Actor + 79 parent: null, // Parent of this Actor. May be Scene. + 80 x: 0, // x position on parent. In parent's local coord. system. + 81 y: 0, // y position on parent. In parent's local coord. system. + 82 width: 0, // Actor's width. In parent's local coord. system. + 83 height: 0, // Actor's height. In parent's local coord. system. + 84 start_time: 0, // Start time in Scene time. + 85 duration: Number.MAX_VALUE, // Actor duration in Scene time + 86 clip: false, // should clip the Actor's content against its contour. + 87 clipPath: null, + 88 + 89 scaleX: 0, // transformation. width scale parameter + 90 scaleY: 0, // transformation. height scale parameter + 91 scaleTX: .50, // transformation. scale anchor x position + 92 scaleTY: .50, // transformation. scale anchor y position + 93 scaleAnchor: 0, // transformation. scale anchor + 94 rotationAngle: 0, // transformation. rotation angle in radians + 95 rotationY: .50, // transformation. rotation center y + 96 alpha: 1, // alpha transparency value + 97 rotationX: .50, // transformation. rotation center x + 98 isGlobalAlpha: false, // is this a global alpha + 99 frameAlpha: 1, // hierarchically calculated alpha for this Actor. +100 expired: false, // set when the actor has been expired +101 discardable: false, // set when you want this actor to be removed if expired +102 pointed: false, // is the mouse pointer inside this actor +103 mouseEnabled: true, // events enabled ? 104 -105 ANCHOR_CENTER: 0, // constant values to determine different affine transform -106 ANCHOR_TOP: 1, // anchors. -107 ANCHOR_BOTTOM: 2, -108 ANCHOR_LEFT: 3, -109 ANCHOR_RIGHT: 4, -110 ANCHOR_TOP_LEFT: 5, -111 ANCHOR_TOP_RIGHT: 6, -112 ANCHOR_BOTTOM_LEFT: 7, -113 ANCHOR_BOTTOM_RIGHT: 8, -114 ANCHOR_CUSTOM: 9, -115 -116 fillStyle: null, // any canvas rendering valid fill style. -117 strokeStyle: null, // any canvas rendering valid stroke style. -118 time: 0, // Cache Scene time. -119 AABB: null, // CAAT.Rectangle -120 viewVertices: null, // model to view transformed vertices. -121 inFrame: false, // boolean indicating whether this Actor was present on last frame. -122 -123 dirty: true, // model view is dirty ? -124 wdirty: true, // world model view is dirty ? -125 oldX: -1, -126 oldY: -1, -127 -128 modelViewMatrix: null, // model view matrix. -129 worldModelViewMatrix: null, // world model view matrix. -130 modelViewMatrixI: null, // model view matrix. -131 worldModelViewMatrixI: null, // world model view matrix. -132 -133 glEnabled: false, +105 visible: true, +106 +107 ANCHOR_CENTER: 0, // constant values to determine different affine transform +108 ANCHOR_TOP: 1, // anchors. +109 ANCHOR_BOTTOM: 2, +110 ANCHOR_LEFT: 3, +111 ANCHOR_RIGHT: 4, +112 ANCHOR_TOP_LEFT: 5, +113 ANCHOR_TOP_RIGHT: 6, +114 ANCHOR_BOTTOM_LEFT: 7, +115 ANCHOR_BOTTOM_RIGHT: 8, +116 ANCHOR_CUSTOM: 9, +117 +118 fillStyle: null, // any canvas rendering valid fill style. +119 strokeStyle: null, // any canvas rendering valid stroke style. +120 time: 0, // Cache Scene time. +121 AABB: null, // CAAT.Rectangle +122 viewVertices: null, // model to view transformed vertices. +123 inFrame: false, // boolean indicating whether this Actor was present on last frame. +124 +125 dirty: true, // model view is dirty ? +126 wdirty: true, // world model view is dirty ? +127 oldX: -1, +128 oldY: -1, +129 +130 modelViewMatrix: null, // model view matrix. +131 worldModelViewMatrix: null, // world model view matrix. +132 modelViewMatrixI: null, // model view matrix. +133 worldModelViewMatrixI: null, // world model view matrix. 134 -135 backgroundImage: null, -136 id: null, -137 -138 size_active: 1, // number of animated children -139 size_total: 1, -140 -141 __next: null, +135 glEnabled: false, +136 +137 backgroundImage: null, +138 id: null, +139 +140 size_active: 1, // number of animated children +141 size_total: 1, 142 -143 __d_ax: -1, // for drag-enabled actors. -144 __d_ay: -1, -145 gestureEnabled: false, -146 -147 setGestureEnabled : function( enable ) { -148 this.gestureEnabled= !!enable; -149 }, -150 isGestureEnabled : function() { -151 return this.gestureEnabled; -152 }, -153 getId : function() { -154 return this.id; -155 }, -156 setId : function(id) { -157 this.id= id; -158 return this; -159 }, -160 /** -161 * Set this actor's parent. -162 * @param parent {CAAT.ActorContainer} -163 * @return this -164 */ -165 setParent : function(parent) { -166 this.parent= parent; -167 return this; -168 }, -169 /** -170 * Set this actor's background image. -171 * The need of a background image is to kept compatibility with the new CSSDirector class. -172 * The image parameter can be either an Image/Canvas or a CAAT.SpriteImage instance. If an image -173 * is supplied, it will be wrapped into a CAAT.SriteImage instance of 1 row by 1 column. -174 * If the actor has set an image in the background, the paint method will draw the image, otherwise -175 * and if set, will fill its background with a solid color. -176 * If adjust_size_to_image is true, the host actor will be redimensioned to the size of one -177 * single image from the SpriteImage (either supplied or generated because of passing an Image or -178 * Canvas to the function). That means the size will be set to [width:SpriteImage.singleWidth, -179 * height:singleHeight]. -180 * -181 * WARN: if using a CSS renderer, the image supplied MUST be a HTMLImageElement instance. +143 __next: null, +144 +145 __d_ax: -1, // for drag-enabled actors. +146 __d_ay: -1, +147 gestureEnabled: false, +148 +149 setGestureEnabled : function( enable ) { +150 this.gestureEnabled= !!enable; +151 }, +152 isGestureEnabled : function() { +153 return this.gestureEnabled; +154 }, +155 getId : function() { +156 return this.id; +157 }, +158 setId : function(id) { +159 this.id= id; +160 return this; +161 }, +162 /** +163 * Set this actor's parent. +164 * @param parent {CAAT.ActorContainer} +165 * @return this +166 */ +167 setParent : function(parent) { +168 this.parent= parent; +169 return this; +170 }, +171 /** +172 * Set this actor's background image. +173 * The need of a background image is to kept compatibility with the new CSSDirector class. +174 * The image parameter can be either an Image/Canvas or a CAAT.SpriteImage instance. If an image +175 * is supplied, it will be wrapped into a CAAT.SriteImage instance of 1 row by 1 column. +176 * If the actor has set an image in the background, the paint method will draw the image, otherwise +177 * and if set, will fill its background with a solid color. +178 * If adjust_size_to_image is true, the host actor will be redimensioned to the size of one +179 * single image from the SpriteImage (either supplied or generated because of passing an Image or +180 * Canvas to the function). That means the size will be set to [width:SpriteImage.singleWidth, +181 * height:singleHeight]. 182 * -183 * @see CAAT.SpriteImage +183 * WARN: if using a CSS renderer, the image supplied MUST be a HTMLImageElement instance. 184 * -185 * @param image {Image|HTMLCanvasElement|CAAT.SpriteImage} -186 * @param adjust_size_to_image {boolean} whether to set this actor's size based on image parameter. -187 * -188 * @return this -189 */ -190 setBackgroundImage : function(image, adjust_size_to_image ) { -191 if ( image ) { -192 if ( !(image instanceof CAAT.SpriteImage) ) { -193 image= new CAAT.SpriteImage().initialize(image,1,1); -194 } -195 -196 image.setOwner(this); -197 this.backgroundImage= image; -198 if ( typeof adjust_size_to_image==='undefined' || adjust_size_to_image ) { -199 this.width= image.getWidth(); -200 this.height= image.getHeight(); -201 } -202 -203 this.glEnabled= true; -204 } else { -205 this.backgroundImage= null; -206 } -207 -208 return this; -209 }, -210 /** -211 * Set the actor's SpriteImage index from animation sheet. -212 * @see CAAT.SpriteImage -213 * @param index {number} -214 * -215 * @return this -216 */ -217 setSpriteIndex: function(index) { -218 if ( this.backgroundImage ) { -219 this.backgroundImage.setSpriteIndex(index); -220 } -221 -222 return this; +185 * @see CAAT.SpriteImage +186 * +187 * @param image {Image|HTMLCanvasElement|CAAT.SpriteImage} +188 * @param adjust_size_to_image {boolean} whether to set this actor's size based on image parameter. +189 * +190 * @return this +191 */ +192 setBackgroundImage : function(image, adjust_size_to_image ) { +193 if ( image ) { +194 if ( !(image instanceof CAAT.SpriteImage) ) { +195 image= new CAAT.SpriteImage().initialize(image,1,1); +196 } +197 +198 image.setOwner(this); +199 this.backgroundImage= image; +200 if ( typeof adjust_size_to_image==='undefined' || adjust_size_to_image ) { +201 this.width= image.getWidth(); +202 this.height= image.getHeight(); +203 } +204 +205 this.glEnabled= true; +206 } else { +207 this.backgroundImage= null; +208 } +209 +210 return this; +211 }, +212 /** +213 * Set the actor's SpriteImage index from animation sheet. +214 * @see CAAT.SpriteImage +215 * @param index {number} +216 * +217 * @return this +218 */ +219 setSpriteIndex: function(index) { +220 if ( this.backgroundImage ) { +221 this.backgroundImage.setSpriteIndex(index); +222 } 223 -224 }, -225 /** -226 * Set this actor's background SpriteImage offset displacement. -227 * The values can be either positive or negative meaning the texture space of this background -228 * image does not start at (0,0) but at the desired position. -229 * @see CAAT.SpriteImage -230 * @param ox {number} horizontal offset -231 * @param oy {number} vertical offset -232 * -233 * @return this -234 */ -235 setBackgroundImageOffset : function( ox, oy ) { -236 if ( this.backgroundImage ) { -237 this.backgroundImage.setOffset(ox,oy); -238 } -239 -240 return this; -241 }, -242 /** -243 * Set this actor's background SpriteImage its animation sequence. -244 * In its simplet's form a SpriteImage treats a given image as an array of rows by columns -245 * subimages. If you define d Sprite Image of 2x2, you'll be able to draw any of the 4 subimages. -246 * This method defines the animation sequence so that it could be set [0,2,1,3,2,1] as the -247 * animation sequence -248 * @param ii {Array<number>} an array of integers. -249 */ -250 setAnimationImageIndex : function( ii ) { -251 if ( this.backgroundImage ) { -252 this.backgroundImage.setAnimationImageIndex(ii); -253 } -254 return this; -255 }, -256 setChangeFPS : function(time) { -257 if ( this.backgroundImage ) { -258 this.backgroundImage.setChangeFPS(time); -259 } -260 return this; -261 -262 }, -263 /** -264 * Set this background image transformation. -265 * If GL is enabled, this parameter has no effect. -266 * @param it any value from CAAT.SpriteImage.TR_* -267 * @return this -268 */ -269 setImageTransformation : function( it ) { -270 if ( this.backgroundImage ) { -271 this.backgroundImage.setSpriteTransformation(it); -272 } -273 return this; -274 }, -275 /** -276 * Center this actor at position (x,y). -277 * @param x {number} x position -278 * @param y {number} y position -279 * -280 * @return this -281 * @deprecated -282 */ -283 centerOn : function( x,y ) { -284 this.setLocation( x-this.width/2, y-this.height/2 ); -285 return this; -286 }, -287 /** -288 * Center this actor at position (x,y). -289 * @param x {number} x position -290 * @param y {number} y position -291 * -292 * @return this -293 */ -294 centerAt : function(x,y) { -295 return this.centerOn(x,y); -296 }, -297 /** -298 * If GL is enables, get this background image's texture page, otherwise it will fail. -299 * @return {CAAT.GLTexturePage} -300 */ -301 getTextureGLPage : function() { -302 return this.backgroundImage.image.__texturePage; -303 }, -304 /** -305 * Set this actor invisible. -306 * The actor is animated but not visible. -307 * A container won't show any of its children if set visible to false. -308 * -309 * @param visible {boolean} set this actor visible or not. -310 * @return this -311 */ -312 setVisible : function(visible) { -313 this.visible= visible; -314 return this; -315 }, -316 /** -317 * Puts an Actor out of time line, that is, won't be transformed nor rendered. -318 * @return this -319 */ -320 setOutOfFrameTime : function() { -321 this.setFrameTime(-1,0); -322 return this; -323 }, -324 /** -325 * Adds an Actor's life cycle listener. -326 * The developer must ensure the actorListener is not already a listener, otherwise -327 * it will notified more than once. -328 * @param actorListener {object} an object with at least a method of the form: -329 * <code>actorLyfeCycleEvent( actor, string_event_type, long_time )</code> -330 */ -331 addListener : function( actorListener ) { -332 this.lifecycleListenerList.push(actorListener); -333 return this; -334 }, -335 /** -336 * Removes an Actor's life cycle listener. -337 * It will only remove the first occurrence of the given actorListener. -338 * @param actorListener {object} an Actor's life cycle listener. -339 */ -340 removeListener : function( actorListener ) { -341 var n= this.lifecycleListenerList.length; -342 while(n--) { -343 if ( this.lifecycleListenerList[n]===actorListener ) { -344 // remove the nth element. -345 this.lifecycleListenerList.splice(n,1); -346 return; -347 } -348 } -349 }, -350 /** -351 * Set alpha composition scope. global will mean this alpha value will be its children maximum. -352 * If set to false, only this actor will have this alpha value. -353 * @param global {boolean} whether the alpha value should be propagated to children. -354 */ -355 setGlobalAlpha : function( global ) { -356 this.isGlobalAlpha= global; -357 return this; -358 }, -359 /** -360 * Notifies the registered Actor's life cycle listener about some event. -361 * @param sEventType an string indicating the type of event being notified. -362 * @param time an integer indicating the time related to Scene's timeline when the event -363 * is being notified. -364 */ -365 fireEvent : function(sEventType, time) { -366 for( var i=0; i<this.lifecycleListenerList.length; i++ ) { -367 this.lifecycleListenerList[i].actorLifeCycleEvent(this, sEventType, time); -368 } -369 }, -370 /** -371 * Calculates the 2D bounding box in canvas coordinates of the Actor. -372 * This bounding box takes into account the transformations applied hierarchically for -373 * each Scene Actor. -374 * -375 * @private +224 return this; +225 +226 }, +227 /** +228 * Set this actor's background SpriteImage offset displacement. +229 * The values can be either positive or negative meaning the texture space of this background +230 * image does not start at (0,0) but at the desired position. +231 * @see CAAT.SpriteImage +232 * @param ox {number} horizontal offset +233 * @param oy {number} vertical offset +234 * +235 * @return this +236 */ +237 setBackgroundImageOffset : function( ox, oy ) { +238 if ( this.backgroundImage ) { +239 this.backgroundImage.setOffset(ox,oy); +240 } +241 +242 return this; +243 }, +244 /** +245 * Set this actor's background SpriteImage its animation sequence. +246 * In its simplet's form a SpriteImage treats a given image as an array of rows by columns +247 * subimages. If you define d Sprite Image of 2x2, you'll be able to draw any of the 4 subimages. +248 * This method defines the animation sequence so that it could be set [0,2,1,3,2,1] as the +249 * animation sequence +250 * @param ii {Array<number>} an array of integers. +251 */ +252 setAnimationImageIndex : function( ii ) { +253 if ( this.backgroundImage ) { +254 this.backgroundImage.setAnimationImageIndex(ii); +255 } +256 return this; +257 }, +258 setChangeFPS : function(time) { +259 if ( this.backgroundImage ) { +260 this.backgroundImage.setChangeFPS(time); +261 } +262 return this; +263 +264 }, +265 /** +266 * Set this background image transformation. +267 * If GL is enabled, this parameter has no effect. +268 * @param it any value from CAAT.SpriteImage.TR_* +269 * @return this +270 */ +271 setImageTransformation : function( it ) { +272 if ( this.backgroundImage ) { +273 this.backgroundImage.setSpriteTransformation(it); +274 } +275 return this; +276 }, +277 /** +278 * Center this actor at position (x,y). +279 * @param x {number} x position +280 * @param y {number} y position +281 * +282 * @return this +283 * @deprecated +284 */ +285 centerOn : function( x,y ) { +286 this.setLocation( x-this.width/2, y-this.height/2 ); +287 return this; +288 }, +289 /** +290 * Center this actor at position (x,y). +291 * @param x {number} x position +292 * @param y {number} y position +293 * +294 * @return this +295 */ +296 centerAt : function(x,y) { +297 return this.centerOn(x,y); +298 }, +299 /** +300 * If GL is enables, get this background image's texture page, otherwise it will fail. +301 * @return {CAAT.GLTexturePage} +302 */ +303 getTextureGLPage : function() { +304 return this.backgroundImage.image.__texturePage; +305 }, +306 /** +307 * Set this actor invisible. +308 * The actor is animated but not visible. +309 * A container won't show any of its children if set visible to false. +310 * +311 * @param visible {boolean} set this actor visible or not. +312 * @return this +313 */ +314 setVisible : function(visible) { +315 this.visible= visible; +316 return this; +317 }, +318 /** +319 * Puts an Actor out of time line, that is, won't be transformed nor rendered. +320 * @return this +321 */ +322 setOutOfFrameTime : function() { +323 this.setFrameTime(-1,0); +324 return this; +325 }, +326 /** +327 * Adds an Actor's life cycle listener. +328 * The developer must ensure the actorListener is not already a listener, otherwise +329 * it will notified more than once. +330 * @param actorListener {object} an object with at least a method of the form: +331 * <code>actorLyfeCycleEvent( actor, string_event_type, long_time )</code> +332 */ +333 addListener : function( actorListener ) { +334 this.lifecycleListenerList.push(actorListener); +335 return this; +336 }, +337 /** +338 * Removes an Actor's life cycle listener. +339 * It will only remove the first occurrence of the given actorListener. +340 * @param actorListener {object} an Actor's life cycle listener. +341 */ +342 removeListener : function( actorListener ) { +343 var n= this.lifecycleListenerList.length; +344 while(n--) { +345 if ( this.lifecycleListenerList[n]===actorListener ) { +346 // remove the nth element. +347 this.lifecycleListenerList.splice(n,1); +348 return; +349 } +350 } +351 }, +352 /** +353 * Set alpha composition scope. global will mean this alpha value will be its children maximum. +354 * If set to false, only this actor will have this alpha value. +355 * @param global {boolean} whether the alpha value should be propagated to children. +356 */ +357 setGlobalAlpha : function( global ) { +358 this.isGlobalAlpha= global; +359 return this; +360 }, +361 /** +362 * Notifies the registered Actor's life cycle listener about some event. +363 * @param sEventType an string indicating the type of event being notified. +364 * @param time an integer indicating the time related to Scene's timeline when the event +365 * is being notified. +366 */ +367 fireEvent : function(sEventType, time) { +368 for( var i=0; i<this.lifecycleListenerList.length; i++ ) { +369 this.lifecycleListenerList[i].actorLifeCycleEvent(this, sEventType, time); +370 } +371 }, +372 /** +373 * Calculates the 2D bounding box in canvas coordinates of the Actor. +374 * This bounding box takes into account the transformations applied hierarchically for +375 * each Scene Actor. 376 * -377 */ -378 setScreenBounds : function() { -379 -380 this.viewVertices[0].set(0, 0); -381 this.viewVertices[1].set(this.width, 0); -382 this.viewVertices[2].set(this.width, this.height); -383 this.viewVertices[3].set(0, this.height); -384 -385 this.modelToView( this.viewVertices ); +377 * @private +378 * +379 */ +380 setScreenBounds : function() { +381 +382 this.viewVertices[0].set(0, 0); +383 this.viewVertices[1].set(this.width, 0); +384 this.viewVertices[2].set(this.width, this.height); +385 this.viewVertices[3].set(0, this.height); 386 -387 var xmin= Number.MAX_VALUE, xmax=Number.MIN_VALUE; -388 var ymin= Number.MAX_VALUE, ymax=Number.MIN_VALUE; -389 -390 for( var i=0; i<4; i++ ) { -391 if ( this.viewVertices[i].x < xmin ) { -392 xmin=this.viewVertices[i].x; -393 } -394 if ( this.viewVertices[i].x > xmax ) { -395 xmax=this.viewVertices[i].x; -396 } -397 if ( this.viewVertices[i].y < ymin ) { -398 ymin=this.viewVertices[i].y; -399 } -400 if ( this.viewVertices[i].y > ymax ) { -401 ymax=this.viewVertices[i].y; -402 } -403 } -404 -405 this.AABB.x= xmin; -406 this.AABB.y= ymin; -407 this.AABB.width= (xmax-xmin); -408 this.AABB.height= (ymax-ymin); -409 -410 return this; -411 }, -412 /** -413 * Sets this Actor as Expired. -414 * If this is a Container, all the contained Actors won't be nor drawn nor will receive -415 * any event. That is, expiring an Actor means totally taking it out the Scene's timeline. -416 * @param time {number} an integer indicating the time the Actor was expired at. -417 * @return this. -418 */ -419 setExpired : function(time) { -420 this.expired= true; -421 this.fireEvent('expired',time); -422 return this; -423 }, -424 /** -425 * Enable or disable the event bubbling for this Actor. -426 * @param enable {boolean} a boolean indicating whether the event bubbling is enabled. -427 * @return this -428 */ -429 enableEvents : function( enable ) { -430 this.mouseEnabled= enable; -431 return this; -432 }, -433 /** -434 * Removes all behaviors from an Actor. -435 * @return this -436 * -437 * @deprecated -438 */ -439 emptyBehaviorList : function() { -440 this.behaviorList=[]; -441 return this; -442 }, -443 /* -444 emptyKeyframesList : function() { -445 this.keyframesList= []; -446 }, -447 */ -448 /** -449 * Caches a fillStyle in the Actor. -450 * @param style a valid Canvas rendering context fillStyle. -451 * @return this -452 */ -453 setFillStyle : function( style ) { -454 this.fillStyle= style; -455 return this; -456 }, -457 /** -458 * Caches a stroke style in the Actor. -459 * @param style a valid canvas rendering context stroke style. -460 * @return this -461 */ -462 setStrokeStyle : function( style ) { -463 this.strokeStyle= style; -464 return this; -465 }, -466 /** -467 * @deprecated -468 * @param paint -469 */ -470 setPaint : function( paint ) { -471 return this.setFillStyle(paint); -472 }, -473 /** -474 * Stablishes the Alpha transparency for the Actor. -475 * If it globalAlpha enabled, this alpha will the maximum alpha for every contained actors. -476 * The alpha must be between 0 and 1. -477 * @param alpha a float indicating the alpha value. -478 * @return this -479 */ -480 setAlpha : function( alpha ) { -481 this.alpha= alpha; -482 return this; -483 }, -484 /** -485 * Remove all transformation values for the Actor. -486 * @return this -487 */ -488 resetTransform : function () { -489 this.rotationAngle=0; -490 this.rotateAnchor=0; -491 this.rotationX=.5; -492 this.rotationY=.5; -493 this.scaleX=1; -494 this.scaleY=1; -495 this.scaleTX=.5; -496 this.scaleTY=.5; -497 this.scaleAnchor=0; -498 this.oldX=-1; -499 this.oldY=-1; -500 this.dirty= true; -501 -502 return this; -503 }, -504 /** -505 * Sets the time life cycle for an Actor. -506 * These values are related to Scene time. -507 * @param startTime an integer indicating the time until which the Actor won't be visible on the Scene. -508 * @param duration an integer indicating how much the Actor will last once visible. -509 * @return this -510 */ -511 setFrameTime : function( startTime, duration ) { -512 this.start_time= startTime; -513 this.duration= duration; -514 this.expired= false; -515 this.dirty= true; -516 -517 return this; -518 }, -519 /** -520 * This method should me overriden by every custom Actor. -521 * It will be the drawing routine called by the Director to show every Actor. -522 * @param director the CAAT.Director instance that contains the Scene the Actor is in. -523 * @param time an integer indicating the Scene time in which the drawing is performed. -524 */ -525 paint : function(director, time) { -526 if ( this.backgroundImage ) { -527 this.backgroundImage.paint(director,time,0,0); -528 } else if ( this.fillStyle ) { -529 var ctx= director.crc; -530 ctx.fillStyle= this.fillStyle; -531 ctx.fillRect(0,0,this.width,this.height ); -532 } -533 -534 }, -535 /** -536 * A helper method to setScaleAnchored with an anchor of ANCHOR_CENTER -537 * -538 * @see setScaleAnchored +387 this.modelToView( this.viewVertices ); +388 +389 var xmin= Number.MAX_VALUE, xmax=Number.MIN_VALUE; +390 var ymin= Number.MAX_VALUE, ymax=Number.MIN_VALUE; +391 +392 for( var i=0; i<4; i++ ) { +393 if ( this.viewVertices[i].x < xmin ) { +394 xmin=this.viewVertices[i].x; +395 } +396 if ( this.viewVertices[i].x > xmax ) { +397 xmax=this.viewVertices[i].x; +398 } +399 if ( this.viewVertices[i].y < ymin ) { +400 ymin=this.viewVertices[i].y; +401 } +402 if ( this.viewVertices[i].y > ymax ) { +403 ymax=this.viewVertices[i].y; +404 } +405 } +406 +407 this.AABB.x= xmin; +408 this.AABB.y= ymin; +409 this.AABB.width= (xmax-xmin); +410 this.AABB.height= (ymax-ymin); +411 +412 return this; +413 }, +414 /** +415 * Sets this Actor as Expired. +416 * If this is a Container, all the contained Actors won't be nor drawn nor will receive +417 * any event. That is, expiring an Actor means totally taking it out the Scene's timeline. +418 * @param time {number} an integer indicating the time the Actor was expired at. +419 * @return this. +420 */ +421 setExpired : function(time) { +422 this.expired= true; +423 this.fireEvent('expired',time); +424 return this; +425 }, +426 /** +427 * Enable or disable the event bubbling for this Actor. +428 * @param enable {boolean} a boolean indicating whether the event bubbling is enabled. +429 * @return this +430 */ +431 enableEvents : function( enable ) { +432 this.mouseEnabled= enable; +433 return this; +434 }, +435 /** +436 * Removes all behaviors from an Actor. +437 * @return this +438 * +439 * @deprecated +440 */ +441 emptyBehaviorList : function() { +442 this.behaviorList=[]; +443 return this; +444 }, +445 /* +446 emptyKeyframesList : function() { +447 this.keyframesList= []; +448 }, +449 */ +450 /** +451 * Caches a fillStyle in the Actor. +452 * @param style a valid Canvas rendering context fillStyle. +453 * @return this +454 */ +455 setFillStyle : function( style ) { +456 this.fillStyle= style; +457 return this; +458 }, +459 /** +460 * Caches a stroke style in the Actor. +461 * @param style a valid canvas rendering context stroke style. +462 * @return this +463 */ +464 setStrokeStyle : function( style ) { +465 this.strokeStyle= style; +466 return this; +467 }, +468 /** +469 * @deprecated +470 * @param paint +471 */ +472 setPaint : function( paint ) { +473 return this.setFillStyle(paint); +474 }, +475 /** +476 * Stablishes the Alpha transparency for the Actor. +477 * If it globalAlpha enabled, this alpha will the maximum alpha for every contained actors. +478 * The alpha must be between 0 and 1. +479 * @param alpha a float indicating the alpha value. +480 * @return this +481 */ +482 setAlpha : function( alpha ) { +483 this.alpha= alpha; +484 return this; +485 }, +486 /** +487 * Remove all transformation values for the Actor. +488 * @return this +489 */ +490 resetTransform : function () { +491 this.rotationAngle=0; +492 this.rotateAnchor=0; +493 this.rotationX=.5; +494 this.rotationY=.5; +495 this.scaleX=1; +496 this.scaleY=1; +497 this.scaleTX=.5; +498 this.scaleTY=.5; +499 this.scaleAnchor=0; +500 this.oldX=-1; +501 this.oldY=-1; +502 this.dirty= true; +503 +504 return this; +505 }, +506 /** +507 * Sets the time life cycle for an Actor. +508 * These values are related to Scene time. +509 * @param startTime an integer indicating the time until which the Actor won't be visible on the Scene. +510 * @param duration an integer indicating how much the Actor will last once visible. +511 * @return this +512 */ +513 setFrameTime : function( startTime, duration ) { +514 this.start_time= startTime; +515 this.duration= duration; +516 this.expired= false; +517 this.dirty= true; +518 +519 return this; +520 }, +521 /** +522 * This method should me overriden by every custom Actor. +523 * It will be the drawing routine called by the Director to show every Actor. +524 * @param director the CAAT.Director instance that contains the Scene the Actor is in. +525 * @param time an integer indicating the Scene time in which the drawing is performed. +526 */ +527 paint : function(director, time) { +528 if ( this.backgroundImage ) { +529 this.backgroundImage.paint(director,time,0,0); +530 } else if ( this.fillStyle ) { +531 var ctx= director.crc; +532 ctx.fillStyle= this.fillStyle; +533 ctx.fillRect(0,0,this.width,this.height ); +534 } +535 +536 }, +537 /** +538 * A helper method to setScaleAnchored with an anchor of ANCHOR_CENTER 539 * -540 * @param sx a float indicating a width size multiplier. -541 * @param sy a float indicating a height size multiplier. -542 * @return this -543 */ -544 setScale : function( sx, sy ) { -545 //this.setScaleAnchored( sx, sy, this.width/2, this.height/2 ); -546 this.setScaleAnchored( sx, sy, .5, .5 ); -547 this.dirty= true; -548 return this; -549 }, -550 getAnchorPercent : function( anchor ) { -551 -552 var anchors=[ -553 .50,.50, .50,0, .50,1.00, -554 0,.50, 1.00,.50, 0,0, -555 1.00,0, 0,1.00, 1.00,1.00 -556 ]; -557 -558 return { x: anchors[anchor*2], y: anchors[anchor*2+1] }; -559 }, -560 /** -561 * Private. -562 * Gets a given anchor position referred to the Actor. -563 * @param anchor -564 * @return an object of the form { x: float, y: float } -565 */ -566 getAnchor : function( anchor ) { -567 var tx=0, ty=0; -568 -569 switch( anchor ) { -570 case this.ANCHOR_CENTER: -571 tx= .5; -572 ty= .5; -573 break; -574 case this.ANCHOR_TOP: -575 tx= .5; -576 ty= 0; -577 break; -578 case this.ANCHOR_BOTTOM: -579 tx= .5; -580 ty= 1; -581 break; -582 case this.ANCHOR_LEFT: -583 tx= 0; -584 ty= .5; -585 break; -586 case this.ANCHOR_RIGHT: -587 tx= 1; -588 ty= .5; -589 break; -590 case this.ANCHOR_TOP_RIGHT: -591 tx= 1; -592 ty= 0; -593 break; -594 case this.ANCHOR_BOTTOM_LEFT: -595 tx= 0; -596 ty= 1; -597 break; -598 case this.ANCHOR_BOTTOM_RIGHT: -599 tx= 1; -600 ty= 1; -601 break; -602 case this.ANCHOR_TOP_LEFT: -603 tx= 0; -604 ty= 0; -605 break; -606 } -607 -608 return {x: tx, y: ty}; -609 }, -610 /** -611 * Modify the dimensions on an Actor. -612 * The dimension will not affect the local coordinates system in opposition -613 * to setSize or setBounds. -614 * -615 * @param sx {number} width scale. -616 * @param sy {number} height scale. -617 * @param anchorx {number} x anchor to perform the Scale operation. -618 * @param anchory {number} y anchor to perform the Scale operation. -619 * -620 * @return this; -621 */ -622 setScaleAnchored : function( sx, sy, anchorx, anchory ) { -623 this.scaleTX= anchorx; -624 this.scaleTY= anchory; -625 -626 this.scaleX=sx; -627 this.scaleY=sy; -628 -629 this.dirty= true; +540 * @see setScaleAnchored +541 * +542 * @param sx a float indicating a width size multiplier. +543 * @param sy a float indicating a height size multiplier. +544 * @return this +545 */ +546 setScale : function( sx, sy ) { +547 //this.setScaleAnchored( sx, sy, this.width/2, this.height/2 ); +548 this.setScaleAnchored( sx, sy, .5, .5 ); +549 this.dirty= true; +550 return this; +551 }, +552 getAnchorPercent : function( anchor ) { +553 +554 var anchors=[ +555 .50,.50, .50,0, .50,1.00, +556 0,.50, 1.00,.50, 0,0, +557 1.00,0, 0,1.00, 1.00,1.00 +558 ]; +559 +560 return { x: anchors[anchor*2], y: anchors[anchor*2+1] }; +561 }, +562 /** +563 * Private. +564 * Gets a given anchor position referred to the Actor. +565 * @param anchor +566 * @return an object of the form { x: float, y: float } +567 */ +568 getAnchor : function( anchor ) { +569 var tx=0, ty=0; +570 +571 switch( anchor ) { +572 case this.ANCHOR_CENTER: +573 tx= .5; +574 ty= .5; +575 break; +576 case this.ANCHOR_TOP: +577 tx= .5; +578 ty= 0; +579 break; +580 case this.ANCHOR_BOTTOM: +581 tx= .5; +582 ty= 1; +583 break; +584 case this.ANCHOR_LEFT: +585 tx= 0; +586 ty= .5; +587 break; +588 case this.ANCHOR_RIGHT: +589 tx= 1; +590 ty= .5; +591 break; +592 case this.ANCHOR_TOP_RIGHT: +593 tx= 1; +594 ty= 0; +595 break; +596 case this.ANCHOR_BOTTOM_LEFT: +597 tx= 0; +598 ty= 1; +599 break; +600 case this.ANCHOR_BOTTOM_RIGHT: +601 tx= 1; +602 ty= 1; +603 break; +604 case this.ANCHOR_TOP_LEFT: +605 tx= 0; +606 ty= 0; +607 break; +608 } +609 +610 return {x: tx, y: ty}; +611 }, +612 /** +613 * Modify the dimensions on an Actor. +614 * The dimension will not affect the local coordinates system in opposition +615 * to setSize or setBounds. +616 * +617 * @param sx {number} width scale. +618 * @param sy {number} height scale. +619 * @param anchorx {number} x anchor to perform the Scale operation. +620 * @param anchory {number} y anchor to perform the Scale operation. +621 * +622 * @return this; +623 */ +624 setScaleAnchored : function( sx, sy, anchorx, anchory ) { +625 this.scaleTX= anchorx; +626 this.scaleTY= anchory; +627 +628 this.scaleX=sx; +629 this.scaleY=sy; 630 -631 return this; -632 }, -633 /** -634 * A helper method for setRotationAnchored. This methods stablishes the center -635 * of rotation to be the center of the Actor. -636 * -637 * @param angle a float indicating the angle in radians to rotate the Actor. -638 * @return this -639 */ -640 setRotation : function( angle ) { -641 this.setRotationAnchored( angle, .5, .5 ); //this.width/2, this.height/2 ); -642 return this; -643 }, -644 /** -645 * This method sets Actor rotation around a given position. -646 * @param angle {number} indicating the angle in radians to rotate the Actor. -647 * @param rx {number} value in the range 0..1 -648 * @param ry {number} value in the range 0..1 -649 * @return this; -650 */ -651 setRotationAnchored : function( angle, rx, ry ) { -652 this.rotationAngle= angle; -653 this.rotationX= rx?rx:0; -654 this.rotationY= ry?ry:0; -655 this.dirty= true; -656 return this; -657 }, -658 /** -659 * Sets an Actor's dimension -660 * @param w a float indicating Actor's width. -661 * @param h a float indicating Actor's height. -662 * @return this -663 */ -664 setSize : function( w, h ) { -665 this.width= w|0; -666 this.height= h|0; -667 this.dirty= true; -668 -669 return this; -670 }, -671 /** -672 * Set location and dimension of an Actor at once. -673 * -674 * @param x{number} a float indicating Actor's x position. -675 * @param y{number} a float indicating Actor's y position -676 * @param w{number} a float indicating Actor's width -677 * @param h{number} a float indicating Actor's height -678 * @return this -679 */ -680 setBounds : function(x, y, w, h) { -681 /* -682 this.x= x|0; -683 this.y= y|0; -684 this.width= w|0; -685 this.height= h|0; -686 */ -687 this.x= x; -688 this.y= y; -689 this.width= w; -690 this.height= h; -691 -692 this.dirty= true; +631 this.dirty= true; +632 +633 return this; +634 }, +635 /** +636 * A helper method for setRotationAnchored. This methods stablishes the center +637 * of rotation to be the center of the Actor. +638 * +639 * @param angle a float indicating the angle in radians to rotate the Actor. +640 * @return this +641 */ +642 setRotation : function( angle ) { +643 this.setRotationAnchored( angle, .5, .5 ); //this.width/2, this.height/2 ); +644 return this; +645 }, +646 /** +647 * This method sets Actor rotation around a given position. +648 * @param angle {number} indicating the angle in radians to rotate the Actor. +649 * @param rx {number} value in the range 0..1 +650 * @param ry {number} value in the range 0..1 +651 * @return this; +652 */ +653 setRotationAnchored : function( angle, rx, ry ) { +654 this.rotationAngle= angle; +655 this.rotationX= rx?rx:0; +656 this.rotationY= ry?ry:0; +657 this.dirty= true; +658 return this; +659 }, +660 /** +661 * Sets an Actor's dimension +662 * @param w a float indicating Actor's width. +663 * @param h a float indicating Actor's height. +664 * @return this +665 */ +666 setSize : function( w, h ) { +667 this.width= w|0; +668 this.height= h|0; +669 this.dirty= true; +670 +671 return this; +672 }, +673 /** +674 * Set location and dimension of an Actor at once. +675 * +676 * @param x{number} a float indicating Actor's x position. +677 * @param y{number} a float indicating Actor's y position +678 * @param w{number} a float indicating Actor's width +679 * @param h{number} a float indicating Actor's height +680 * @return this +681 */ +682 setBounds : function(x, y, w, h) { +683 /* +684 this.x= x|0; +685 this.y= y|0; +686 this.width= w|0; +687 this.height= h|0; +688 */ +689 this.x= x; +690 this.y= y; +691 this.width= w; +692 this.height= h; 693 -694 return this; -695 }, -696 /** -697 * This method sets the position of an Actor inside its parent. -698 * -699 * @param x{number} a float indicating Actor's x position -700 * @param y{number} a float indicating Actor's y position -701 * @return this -702 */ -703 setLocation : function( x, y ) { -704 /* -705 this.x= x|0; -706 this.y= y|0; -707 -708 this.oldX= x|0; -709 this.oldY= y|0; -710 */ -711 this.x= x; -712 this.y= y; -713 this.oldX= x; -714 this.oldY= y; -715 -716 this.dirty= true; +694 this.dirty= true; +695 +696 return this; +697 }, +698 /** +699 * This method sets the position of an Actor inside its parent. +700 * +701 * @param x{number} a float indicating Actor's x position +702 * @param y{number} a float indicating Actor's y position +703 * @return this +704 */ +705 setLocation : function( x, y ) { +706 /* +707 this.x= x|0; +708 this.y= y|0; +709 +710 this.oldX= x|0; +711 this.oldY= y|0; +712 */ +713 this.x= x; +714 this.y= y; +715 this.oldX= x; +716 this.oldY= y; 717 -718 return this; -719 }, -720 /** -721 * This method is called by the Director to know whether the actor is on Scene time. -722 * In case it was necessary, this method will notify any life cycle behaviors about -723 * an Actor expiration. -724 * @param time {number} time indicating the Scene time. -725 * -726 * @private +718 this.dirty= true; +719 +720 return this; +721 }, +722 /** +723 * This method is called by the Director to know whether the actor is on Scene time. +724 * In case it was necessary, this method will notify any life cycle behaviors about +725 * an Actor expiration. +726 * @param time {number} time indicating the Scene time. 727 * -728 */ -729 isInAnimationFrame : function(time) { -730 if ( this.expired ) { -731 return false; -732 } -733 -734 if ( this.duration===Number.MAX_VALUE ) { -735 return this.start_time<=time; -736 } -737 -738 if ( time>=this.start_time+this.duration ) { -739 if ( !this.expired ) { -740 this.setExpired(time); -741 } -742 -743 return false; -744 } -745 -746 return this.start_time<=time && time<this.start_time+this.duration; -747 }, -748 /** -749 * Checks whether a coordinate is inside the Actor's bounding box. -750 * @param x {number} a float -751 * @param y {number} a float -752 * -753 * @return boolean indicating whether it is inside. -754 */ -755 contains : function(x, y) { -756 return x>=0 && y>=0 && x<this.width && y<this.height; -757 }, -758 /** -759 * This method must be called explicitly by every CAAT Actor. -760 * Making the life cycle explicitly initiated has always been a good idea. -761 * -762 * @return this -763 * @deprecated no longer needed. -764 */ -765 create : function() { -766 return this; -767 }, -768 -769 /** -770 * Add a Behavior to the Actor. -771 * An Actor accepts an undefined number of Behaviors. -772 * -773 * @param behavior {CAAT.Behavior} a CAAT.Behavior instance -774 * @return this -775 * -776 * @deprecated -777 */ -778 addBehavior : function( behavior ) { -779 this.behaviorList.push(behavior); -780 return this; -781 }, -782 -783 /** -784 * Remove a Behavior from the Actor. -785 * If the Behavior is not present at the actor behavior collection nothing happends. -786 * -787 * @param behavior {CAAT.Behavior} a CAAT.Behavior instance. -788 */ -789 removeBehaviour : function( behavior ) { -790 var c= this.behaviorList; -791 var n= c.length-1; -792 while(n) { -793 if ( c[n]===behavior ) { -794 c.splice(n,1); -795 return this; -796 } -797 } -798 return this; -799 }, -800 /** -801 * Remove a Behavior with id param as behavior identifier from this actor. -802 * This function will remove ALL behavior instances with the given id. -803 * -804 * @param id {number} an integer. -805 * return this; -806 */ -807 removeBehaviorById : function( id ) { -808 var c= this.behaviorList; -809 for( var n=0; n<c.length; n++ ) { -810 if ( c[n].id===id) { -811 c.splice(n,1); -812 } -813 } -814 -815 return this; +728 * @private +729 * +730 */ +731 isInAnimationFrame : function(time) { +732 if ( this.expired ) { +733 return false; +734 } +735 +736 if ( this.duration===Number.MAX_VALUE ) { +737 return this.start_time<=time; +738 } +739 +740 if ( time>=this.start_time+this.duration ) { +741 if ( !this.expired ) { +742 this.setExpired(time); +743 } +744 +745 return false; +746 } +747 +748 return this.start_time<=time && time<this.start_time+this.duration; +749 }, +750 /** +751 * Checks whether a coordinate is inside the Actor's bounding box. +752 * @param x {number} a float +753 * @param y {number} a float +754 * +755 * @return boolean indicating whether it is inside. +756 */ +757 contains : function(x, y) { +758 return x>=0 && y>=0 && x<this.width && y<this.height; +759 }, +760 /** +761 * This method must be called explicitly by every CAAT Actor. +762 * Making the life cycle explicitly initiated has always been a good idea. +763 * +764 * @return this +765 * @deprecated no longer needed. +766 */ +767 create : function() { +768 return this; +769 }, +770 +771 /** +772 * Add a Behavior to the Actor. +773 * An Actor accepts an undefined number of Behaviors. +774 * +775 * @param behavior {CAAT.Behavior} a CAAT.Behavior instance +776 * @return this +777 * +778 * @deprecated +779 */ +780 addBehavior : function( behavior ) { +781 this.behaviorList.push(behavior); +782 return this; +783 }, +784 +785 /** +786 * Remove a Behavior from the Actor. +787 * If the Behavior is not present at the actor behavior collection nothing happends. +788 * +789 * @param behavior {CAAT.Behavior} a CAAT.Behavior instance. +790 */ +791 removeBehaviour : function( behavior ) { +792 var c= this.behaviorList; +793 var n= c.length-1; +794 while(n) { +795 if ( c[n]===behavior ) { +796 c.splice(n,1); +797 return this; +798 } +799 } +800 return this; +801 }, +802 /** +803 * Remove a Behavior with id param as behavior identifier from this actor. +804 * This function will remove ALL behavior instances with the given id. +805 * +806 * @param id {number} an integer. +807 * return this; +808 */ +809 removeBehaviorById : function( id ) { +810 var c= this.behaviorList; +811 for( var n=0; n<c.length; n++ ) { +812 if ( c[n].id===id) { +813 c.splice(n,1); +814 } +815 } 816 -817 }, -818 getBehavior : function(id) { -819 var c= this.behaviorList; -820 for( var n=0; n<c.length; n++ ) { -821 var cc= c[n]; -822 if ( cc.id===id) { -823 return cc; -824 } -825 } -826 return null; -827 }, -828 /** -829 * Set discardable property. If an actor is discardable, upon expiration will be removed from -830 * scene graph and hence deleted. -831 * @param discardable {boolean} a boolean indicating whether the Actor is discardable. -832 * @return this -833 */ -834 setDiscardable : function( discardable ) { -835 this.discardable= discardable; -836 return this; -837 }, -838 /** -839 * This method will be called internally by CAAT when an Actor is expired, and at the -840 * same time, is flagged as discardable. -841 * It notifies the Actor life cycle listeners about the destruction event. -842 * -843 * @param time an integer indicating the time at wich the Actor has been destroyed. +817 return this; +818 +819 }, +820 getBehavior : function(id) { +821 var c= this.behaviorList; +822 for( var n=0; n<c.length; n++ ) { +823 var cc= c[n]; +824 if ( cc.id===id) { +825 return cc; +826 } +827 } +828 return null; +829 }, +830 /** +831 * Set discardable property. If an actor is discardable, upon expiration will be removed from +832 * scene graph and hence deleted. +833 * @param discardable {boolean} a boolean indicating whether the Actor is discardable. +834 * @return this +835 */ +836 setDiscardable : function( discardable ) { +837 this.discardable= discardable; +838 return this; +839 }, +840 /** +841 * This method will be called internally by CAAT when an Actor is expired, and at the +842 * same time, is flagged as discardable. +843 * It notifies the Actor life cycle listeners about the destruction event. 844 * -845 * @private +845 * @param time an integer indicating the time at wich the Actor has been destroyed. 846 * -847 */ -848 destroy : function(time) { -849 if ( this.parent ) { -850 this.parent.removeChild(this); -851 } -852 -853 this.fireEvent('destroyed',time); -854 }, -855 /** -856 * Transform a point or array of points in model space to view space. -857 * -858 * @param point {CAAT.Point|Array} an object of the form {x : float, y: float} +847 * @private +848 * +849 */ +850 destroy : function(time) { +851 if ( this.parent ) { +852 this.parent.removeChild(this); +853 } +854 +855 this.fireEvent('destroyed',time); +856 }, +857 /** +858 * Transform a point or array of points in model space to view space. 859 * -860 * @return the source transformed elements. +860 * @param point {CAAT.Point|Array} an object of the form {x : float, y: float} 861 * -862 * @private +862 * @return the source transformed elements. 863 * -864 */ -865 modelToView : function(point) { -866 if ( point instanceof Array ) { -867 for( var i=0; i<point.length; i++ ) { -868 this.worldModelViewMatrix.transformCoord(point[i]); -869 } -870 } -871 else { -872 this.worldModelViewMatrix.transformCoord(point); -873 } -874 -875 return point; -876 }, -877 /** -878 * Transform a local coordinate point on this Actor's coordinate system into -879 * another point in otherActor's coordinate system. -880 * @param point {CAAT.Point} -881 * @param otherActor {CAAT.Actor} -882 */ -883 modelToModel : function( point, otherActor ) { -884 return otherActor.viewToModel( this.modelToView( point ) ); -885 }, -886 /** -887 * Transform a point from model to view space. -888 * <p> -889 * WARNING: every call to this method calculates -890 * actor's world model view matrix. -891 * -892 * @param point {CAAT.Point} a point in screen space to be transformed to model space. +864 * @private +865 * +866 */ +867 modelToView : function(point) { +868 if ( point instanceof Array ) { +869 for( var i=0; i<point.length; i++ ) { +870 this.worldModelViewMatrix.transformCoord(point[i]); +871 } +872 } +873 else { +874 this.worldModelViewMatrix.transformCoord(point); +875 } +876 +877 return point; +878 }, +879 /** +880 * Transform a local coordinate point on this Actor's coordinate system into +881 * another point in otherActor's coordinate system. +882 * @param point {CAAT.Point} +883 * @param otherActor {CAAT.Actor} +884 */ +885 modelToModel : function( point, otherActor ) { +886 return otherActor.viewToModel( this.modelToView( point ) ); +887 }, +888 /** +889 * Transform a point from model to view space. +890 * <p> +891 * WARNING: every call to this method calculates +892 * actor's world model view matrix. 893 * -894 * @return the source point object +894 * @param point {CAAT.Point} a point in screen space to be transformed to model space. 895 * -896 * -897 */ -898 viewToModel : function(point) { -899 this.worldModelViewMatrixI= this.worldModelViewMatrix.getInverse(); -900 this.worldModelViewMatrixI.transformCoord(point); -901 return point; -902 }, -903 /** -904 * Private -905 * This method does the needed point transformations across an Actor hierarchy to devise -906 * whether the parameter point coordinate lies inside the Actor. -907 * @param point {CAAT.Point} -908 * -909 * @return null if the point is not inside the Actor. The Actor otherwise. -910 */ -911 findActorAtPosition : function(point) { -912 if ( !this.mouseEnabled || !this.isInAnimationFrame(this.time) ) { -913 return null; -914 } -915 -916 this.modelViewMatrixI= this.modelViewMatrix.getInverse(); -917 this.modelViewMatrixI.transformCoord(point); -918 return this.contains(point.x, point.y) ? this :null; -919 }, -920 /** -921 * Enables a default dragging routine for the Actor. -922 * This default dragging routine allows to: -923 * <li>scale the Actor by pressing shift+drag -924 * <li>rotate the Actor by pressing control+drag -925 * <li>scale non uniformly by pressing alt+shift+drag -926 * -927 * @return this -928 */ -929 enableDrag : function() { -930 -931 var me= this; +896 * @return the source point object +897 * +898 * +899 */ +900 viewToModel : function(point) { +901 this.worldModelViewMatrixI= this.worldModelViewMatrix.getInverse(); +902 this.worldModelViewMatrixI.transformCoord(point); +903 return point; +904 }, +905 /** +906 * Private +907 * This method does the needed point transformations across an Actor hierarchy to devise +908 * whether the parameter point coordinate lies inside the Actor. +909 * @param point {CAAT.Point} +910 * +911 * @return null if the point is not inside the Actor. The Actor otherwise. +912 */ +913 findActorAtPosition : function(point) { +914 if ( !this.mouseEnabled || !this.isInAnimationFrame(this.time) ) { +915 return null; +916 } +917 +918 this.modelViewMatrixI= this.modelViewMatrix.getInverse(); +919 this.modelViewMatrixI.transformCoord(point); +920 return this.contains(point.x, point.y) ? this :null; +921 }, +922 /** +923 * Enables a default dragging routine for the Actor. +924 * This default dragging routine allows to: +925 * <li>scale the Actor by pressing shift+drag +926 * <li>rotate the Actor by pressing control+drag +927 * <li>scale non uniformly by pressing alt+shift+drag +928 * +929 * @return this +930 */ +931 enableDrag : function() { 932 -933 this.ax= 0; -934 this.ay= 0; -935 this.mx= 0; -936 this.my= 0; -937 this.asx=1; -938 this.asy=1; -939 this.ara=0; -940 this.screenx=0; -941 this.screeny=0; -942 -943 /** -944 * Mouse enter handler for default drag behavior. -945 * @param mouseEvent {CAAT.MouseEvent} -946 * -947 * @ignore -948 */ -949 this.mouseEnter= function(mouseEvent) { -950 this.__d_ax= -1; -951 this.__d_ay= -1; -952 this.pointed= true; -953 CAAT.setCursor('move'); -954 }; -955 -956 /** -957 * Mouse exit handler for default drag behavior. -958 * @param mouseEvent {CAAT.MouseEvent} -959 * -960 * @ignore -961 */ -962 this.mouseExit = function(mouseEvent) { -963 this.__d_ax = -1; -964 this.__d_ay = -1; -965 this.pointed = false; -966 CAAT.setCursor('default'); -967 }; -968 -969 /** -970 * Mouse move handler for default drag behavior. -971 * @param mouseEvent {CAAT.MouseEvent} -972 * -973 * @ignore -974 */ -975 this.mouseMove = function(mouseEvent) { -976 }; -977 -978 /** -979 * Mouse up handler for default drag behavior. -980 * @param mouseEvent {CAAT.MouseEvent} -981 * -982 * @ignore -983 */ -984 this.mouseUp = function(mouseEvent) { -985 this.__d_ax = -1; -986 this.__d_ay = -1; -987 }; -988 -989 /** -990 * Mouse drag handler for default drag behavior. -991 * @param mouseEvent {CAAT.MouseEvent} -992 * -993 * @ignore -994 */ -995 this.mouseDrag = function(mouseEvent) { -996 -997 var pt; +933 var me= this; +934 +935 this.ax= 0; +936 this.ay= 0; +937 this.mx= 0; +938 this.my= 0; +939 this.asx=1; +940 this.asy=1; +941 this.ara=0; +942 this.screenx=0; +943 this.screeny=0; +944 +945 /** +946 * Mouse enter handler for default drag behavior. +947 * @param mouseEvent {CAAT.MouseEvent} +948 * +949 * @ignore +950 */ +951 this.mouseEnter= function(mouseEvent) { +952 this.__d_ax= -1; +953 this.__d_ay= -1; +954 this.pointed= true; +955 CAAT.setCursor('move'); +956 }; +957 +958 /** +959 * Mouse exit handler for default drag behavior. +960 * @param mouseEvent {CAAT.MouseEvent} +961 * +962 * @ignore +963 */ +964 this.mouseExit = function(mouseEvent) { +965 this.__d_ax = -1; +966 this.__d_ay = -1; +967 this.pointed = false; +968 CAAT.setCursor('default'); +969 }; +970 +971 /** +972 * Mouse move handler for default drag behavior. +973 * @param mouseEvent {CAAT.MouseEvent} +974 * +975 * @ignore +976 */ +977 this.mouseMove = function(mouseEvent) { +978 }; +979 +980 /** +981 * Mouse up handler for default drag behavior. +982 * @param mouseEvent {CAAT.MouseEvent} +983 * +984 * @ignore +985 */ +986 this.mouseUp = function(mouseEvent) { +987 this.__d_ax = -1; +988 this.__d_ay = -1; +989 }; +990 +991 /** +992 * Mouse drag handler for default drag behavior. +993 * @param mouseEvent {CAAT.MouseEvent} +994 * +995 * @ignore +996 */ +997 this.mouseDrag = function(mouseEvent) { 998 -999 pt= this.modelToView( new CAAT.Point(mouseEvent.x, mouseEvent.y ) ); -1000 this.parent.viewToModel( pt ); -1001 -1002 if (this.__d_ax === -1 || this.__d_ay === -1) { -1003 this.__d_ax = pt.x; -1004 this.__d_ay = pt.y; -1005 this.__d_asx = this.scaleX; -1006 this.__d_asy = this.scaleY; -1007 this.__d_ara = this.rotationAngle; -1008 this.__d_screenx = mouseEvent.screenPoint.x; -1009 this.__d_screeny = mouseEvent.screenPoint.y; -1010 } -1011 -1012 if (mouseEvent.isShiftDown()) { -1013 var scx = (mouseEvent.screenPoint.x - this.__d_screenx) / 100; -1014 var scy = (mouseEvent.screenPoint.y - this.__d_screeny) / 100; -1015 if (!mouseEvent.isAltDown()) { -1016 var sc = Math.max(scx, scy); -1017 scx = sc; -1018 scy = sc; -1019 } -1020 this.setScale(scx + this.__d_asx, scy + this.__d_asy); -1021 -1022 } else if (mouseEvent.isControlDown()) { -1023 var vx = mouseEvent.screenPoint.x - this.__d_screenx; -1024 var vy = mouseEvent.screenPoint.y - this.__d_screeny; -1025 this.setRotation(-Math.atan2(vx, vy) + this.__d_ara); -1026 } else { -1027 this.x += pt.x-this.__d_ax; -1028 this.y += pt.y-this.__d_ay; -1029 } -1030 -1031 this.__d_ax= pt.x; -1032 this.__d_ay= pt.y; -1033 }; -1034 -1035 return this; -1036 }, -1037 /** -1038 * Default mouseClick handler. -1039 * Mouse click events are received after a call to mouseUp method if no dragging was in progress. -1040 * -1041 * @param mouseEvent {CAAT.MouseEvent} -1042 */ -1043 mouseClick : function(mouseEvent) { -1044 }, -1045 /** -1046 * Default double click handler -1047 * -1048 * @param mouseEvent {CAAT.MouseEvent} -1049 */ -1050 mouseDblClick : function(mouseEvent) { -1051 }, -1052 /** -1053 * Default mouse enter on Actor handler. -1054 * @param mouseEvent {CAAT.MouseEvent} -1055 */ -1056 mouseEnter : function(mouseEvent) { -1057 this.pointed= true; -1058 }, -1059 /** -1060 * Default mouse exit on Actor handler. -1061 * -1062 * @param mouseEvent {CAAT.MouseEvent} -1063 */ -1064 mouseExit : function(mouseEvent) { -1065 this.pointed= false; -1066 }, -1067 /** -1068 * Default mouse move inside Actor handler. -1069 * -1070 * @param mouseEvent {CAAT.MouseEvent} -1071 */ -1072 mouseMove : function(mouseEvent) { -1073 }, -1074 /** -1075 * default mouse press in Actor handler. -1076 * -1077 * @param mouseEvent {CAAT.MouseEvent} -1078 */ -1079 mouseDown : function(mouseEvent) { -1080 }, -1081 /** -1082 * default mouse release in Actor handler. -1083 * -1084 * @param mouseEvent {CAAT.MouseEvent} -1085 */ -1086 mouseUp : function(mouseEvent) { -1087 }, -1088 mouseOut : function(mouseEvent) { -1089 }, -1090 mouseOver : function(mouseEvent) { +999 var pt; +1000 +1001 pt= this.modelToView( new CAAT.Point(mouseEvent.x, mouseEvent.y ) ); +1002 this.parent.viewToModel( pt ); +1003 +1004 if (this.__d_ax === -1 || this.__d_ay === -1) { +1005 this.__d_ax = pt.x; +1006 this.__d_ay = pt.y; +1007 this.__d_asx = this.scaleX; +1008 this.__d_asy = this.scaleY; +1009 this.__d_ara = this.rotationAngle; +1010 this.__d_screenx = mouseEvent.screenPoint.x; +1011 this.__d_screeny = mouseEvent.screenPoint.y; +1012 } +1013 +1014 if (mouseEvent.isShiftDown()) { +1015 var scx = (mouseEvent.screenPoint.x - this.__d_screenx) / 100; +1016 var scy = (mouseEvent.screenPoint.y - this.__d_screeny) / 100; +1017 if (!mouseEvent.isAltDown()) { +1018 var sc = Math.max(scx, scy); +1019 scx = sc; +1020 scy = sc; +1021 } +1022 this.setScale(scx + this.__d_asx, scy + this.__d_asy); +1023 +1024 } else if (mouseEvent.isControlDown()) { +1025 var vx = mouseEvent.screenPoint.x - this.__d_screenx; +1026 var vy = mouseEvent.screenPoint.y - this.__d_screeny; +1027 this.setRotation(-Math.atan2(vx, vy) + this.__d_ara); +1028 } else { +1029 this.x += pt.x-this.__d_ax; +1030 this.y += pt.y-this.__d_ay; +1031 } +1032 +1033 this.__d_ax= pt.x; +1034 this.__d_ay= pt.y; +1035 }; +1036 +1037 return this; +1038 }, +1039 /** +1040 * Default mouseClick handler. +1041 * Mouse click events are received after a call to mouseUp method if no dragging was in progress. +1042 * +1043 * @param mouseEvent {CAAT.MouseEvent} +1044 */ +1045 mouseClick : function(mouseEvent) { +1046 }, +1047 /** +1048 * Default double click handler +1049 * +1050 * @param mouseEvent {CAAT.MouseEvent} +1051 */ +1052 mouseDblClick : function(mouseEvent) { +1053 }, +1054 /** +1055 * Default mouse enter on Actor handler. +1056 * @param mouseEvent {CAAT.MouseEvent} +1057 */ +1058 mouseEnter : function(mouseEvent) { +1059 this.pointed= true; +1060 }, +1061 /** +1062 * Default mouse exit on Actor handler. +1063 * +1064 * @param mouseEvent {CAAT.MouseEvent} +1065 */ +1066 mouseExit : function(mouseEvent) { +1067 this.pointed= false; +1068 }, +1069 /** +1070 * Default mouse move inside Actor handler. +1071 * +1072 * @param mouseEvent {CAAT.MouseEvent} +1073 */ +1074 mouseMove : function(mouseEvent) { +1075 }, +1076 /** +1077 * default mouse press in Actor handler. +1078 * +1079 * @param mouseEvent {CAAT.MouseEvent} +1080 */ +1081 mouseDown : function(mouseEvent) { +1082 }, +1083 /** +1084 * default mouse release in Actor handler. +1085 * +1086 * @param mouseEvent {CAAT.MouseEvent} +1087 */ +1088 mouseUp : function(mouseEvent) { +1089 }, +1090 mouseOut : function(mouseEvent) { 1091 }, -1092 /** -1093 * default Actor mouse drag handler. -1094 * -1095 * @param mouseEvent {CAAT.MouseEvent} -1096 */ -1097 mouseDrag : function(mouseEvent) { -1098 }, -1099 /** -1100 * Draw a bounding box with on-screen coordinates regardless of the transformations -1101 * applied to the Actor. -1102 * -1103 * @param director {CAAT.Director} object instance that contains the Scene the Actor is in. -1104 * @param time {number} integer indicating the Scene time when the bounding box is to be drawn. -1105 */ -1106 drawScreenBoundingBox : function( director, time ) { -1107 if ( null!==this.AABB && this.inFrame ) { -1108 var s= this.AABB; -1109 var ctx= director.ctx; -1110 ctx.strokeStyle= CAAT.DEBUGAABBCOLOR; -1111 ctx.strokeRect( .5+(s.x|0), .5+(s.y|0), s.width|0, s.height|0 ); -1112 if ( CAAT.DEBUGBB ) { -1113 var vv= this.viewVertices; -1114 ctx.beginPath( ); -1115 ctx.lineTo( vv[0].x, vv[0].y ); -1116 ctx.lineTo( vv[1].x, vv[1].y ); -1117 ctx.lineTo( vv[2].x, vv[2].y ); -1118 ctx.lineTo( vv[3].x, vv[3].y ); -1119 ctx.closePath(); -1120 ctx.strokeStyle= CAAT.DEBUGBBCOLOR; -1121 ctx.stroke(); -1122 } -1123 } -1124 }, -1125 /** -1126 * Private -1127 * This method is called by the Director instance. -1128 * It applies the list of behaviors the Actor has registered. -1129 * -1130 * @param director the CAAT.Director object instance that contains the Scene the Actor is in. -1131 * @param time an integer indicating the Scene time when the bounding box is to be drawn. -1132 */ -1133 animate : function(director, time) { -1134 -1135 var i; +1092 mouseOver : function(mouseEvent) { +1093 }, +1094 /** +1095 * default Actor mouse drag handler. +1096 * +1097 * @param mouseEvent {CAAT.MouseEvent} +1098 */ +1099 mouseDrag : function(mouseEvent) { +1100 }, +1101 /** +1102 * Draw a bounding box with on-screen coordinates regardless of the transformations +1103 * applied to the Actor. +1104 * +1105 * @param director {CAAT.Director} object instance that contains the Scene the Actor is in. +1106 * @param time {number} integer indicating the Scene time when the bounding box is to be drawn. +1107 */ +1108 drawScreenBoundingBox : function( director, time ) { +1109 if ( null!==this.AABB && this.inFrame ) { +1110 var s= this.AABB; +1111 var ctx= director.ctx; +1112 ctx.strokeStyle= CAAT.DEBUGAABBCOLOR; +1113 ctx.strokeRect( .5+(s.x|0), .5+(s.y|0), s.width|0, s.height|0 ); +1114 if ( CAAT.DEBUGBB ) { +1115 var vv= this.viewVertices; +1116 ctx.beginPath( ); +1117 ctx.lineTo( vv[0].x, vv[0].y ); +1118 ctx.lineTo( vv[1].x, vv[1].y ); +1119 ctx.lineTo( vv[2].x, vv[2].y ); +1120 ctx.lineTo( vv[3].x, vv[3].y ); +1121 ctx.closePath(); +1122 ctx.strokeStyle= CAAT.DEBUGBBCOLOR; +1123 ctx.stroke(); +1124 } +1125 } +1126 }, +1127 /** +1128 * Private +1129 * This method is called by the Director instance. +1130 * It applies the list of behaviors the Actor has registered. +1131 * +1132 * @param director the CAAT.Director object instance that contains the Scene the Actor is in. +1133 * @param time an integer indicating the Scene time when the bounding box is to be drawn. +1134 */ +1135 animate : function(director, time) { 1136 -1137 if ( !this.isInAnimationFrame(time) ) { -1138 this.inFrame= false; -1139 this.dirty= true; -1140 return false; -1141 } -1142 -1143 if ( this.x!==this.oldX || this.y!==this.oldY ) { -1144 this.dirty= true; -1145 this.oldX= this.x; -1146 this.oldY= this.y; -1147 } -1148 -1149 /** -1150 * better avoid using behaviors -1151 * @deprecated -1152 */ -1153 for( i=0; i<this.behaviorList.length; i++ ) { -1154 this.behaviorList[i].apply(time,this); -1155 } -1156 -1157 /* -1158 If we have a mask applied, apply behaviors as well. -1159 */ -1160 if ( this.clipPath ) { -1161 // if ( this.clipPath.applyBehaviors ) { -1162 this.clipPath.applyBehaviors(time); -1163 // } -1164 } -1165 -1166 // transformation stuff. -1167 this.setModelViewMatrix(director.glEnabled); -1168 -1169 this.inFrame= true; +1137 var i; +1138 +1139 if ( !this.isInAnimationFrame(time) ) { +1140 this.inFrame= false; +1141 this.dirty= true; +1142 return false; +1143 } +1144 +1145 if ( this.x!==this.oldX || this.y!==this.oldY ) { +1146 this.dirty= true; +1147 this.oldX= this.x; +1148 this.oldY= this.y; +1149 } +1150 +1151 /** +1152 * better avoid using behaviors +1153 * @deprecated +1154 */ +1155 for( i=0; i<this.behaviorList.length; i++ ) { +1156 this.behaviorList[i].apply(time,this); +1157 } +1158 +1159 /* +1160 If we have a mask applied, apply behaviors as well. +1161 */ +1162 if ( this.clipPath ) { +1163 // if ( this.clipPath.applyBehaviors ) { +1164 this.clipPath.applyBehaviors(time); +1165 // } +1166 } +1167 +1168 // transformation stuff. +1169 this.setModelViewMatrix(director.glEnabled); 1170 -1171 return true; -1172 }, -1173 /** -1174 * Set this model view matrix if the actor is Dirty. -1175 * -1176 * @return this -1177 */ -1178 setModelViewMatrix : function(glEnabled) { -1179 var c,s,_m00,_m01,_m10,_m11; -1180 var mm0, mm1, mm2, mm3, mm4, mm5; -1181 var mm; -1182 -1183 this.wdirty= false; +1171 this.inFrame= true; +1172 +1173 return true; +1174 }, +1175 /** +1176 * Set this model view matrix if the actor is Dirty. +1177 * +1178 * @return this +1179 */ +1180 setModelViewMatrix : function(glEnabled) { +1181 var c,s,_m00,_m01,_m10,_m11; +1182 var mm0, mm1, mm2, mm3, mm4, mm5; +1183 var mm; 1184 -1185 if ( this.dirty ) { +1185 this.wdirty= false; 1186 -1187 mm= this.modelViewMatrix.matrix; +1187 if ( this.dirty ) { 1188 -1189 mm0= 1; -1190 mm1= 0; -1191 mm2= mm[2]; -1192 mm3= 0; -1193 mm4= 1; -1194 mm5= mm[5]; -1195 -1196 mm2= this.x; -1197 mm5= this.y; -1198 -1199 if ( this.rotationAngle ) { +1189 mm= this.modelViewMatrix.matrix; +1190 +1191 mm0= 1; +1192 mm1= 0; +1193 mm2= mm[2]; +1194 mm3= 0; +1195 mm4= 1; +1196 mm5= mm[5]; +1197 +1198 mm2= this.x; +1199 mm5= this.y; 1200 -1201 var rx= this.rotationX*this.width; -1202 var ry= this.rotationY*this.height; -1203 -1204 mm2+= mm0*rx + mm1*ry; -1205 mm5+= mm3*rx + mm4*ry; -1206 -1207 c= Math.cos( this.rotationAngle ); -1208 s= Math.sin( this.rotationAngle ); -1209 _m00= mm0; -1210 _m01= mm1; -1211 _m10= mm3; -1212 _m11= mm4; -1213 mm0= _m00*c + _m01*s; -1214 mm1= -_m00*s + _m01*c; -1215 mm3= _m10*c + _m11*s; -1216 mm4= -_m10*s + _m11*c; -1217 -1218 mm2+= -mm0*rx - mm1*ry; -1219 mm5+= -mm3*rx - mm4*ry; -1220 } -1221 if ( this.scaleX!=1 || this.scaleY!=1 ) { -1222 -1223 var sx= this.scaleTX*this.width; -1224 var sy= this.scaleTY*this.height; -1225 -1226 mm2+= mm0*sx + mm1*sy; -1227 mm5+= mm3*sx + mm4*sy; -1228 -1229 mm0= mm0*this.scaleX; -1230 mm1= mm1*this.scaleY; -1231 mm3= mm3*this.scaleX; -1232 mm4= mm4*this.scaleY; -1233 -1234 mm2+= -mm0*sx - mm1*sy; -1235 mm5+= -mm3*sx - mm4*sy; -1236 } -1237 -1238 mm[0]= mm0; -1239 mm[1]= mm1; -1240 mm[2]= mm2; -1241 mm[3]= mm3; -1242 mm[4]= mm4; -1243 mm[5]= mm5; -1244 -1245 /* -1246 mm[2]+= this.x; -1247 mm[5]+= this.y; -1248 if ( this.rotationAngle ) { -1249 // this.modelViewMatrix.multiply( m.setTranslate( this.rotationX, this.rotationY) ); -1250 // this.modelViewMatrix.multiply( m.setRotation( this.rotationAngle ) ); -1251 // this.modelViewMatrix.multiply( m.setTranslate( -this.rotationX, -this.rotationY) ); c= Math.cos( this.rotationAngle ); -1252 } -1253 if ( this.scaleX!=1 || this.scaleY!=1 && (this.scaleTX || this.scaleTY )) { -1254 // this.modelViewMatrix.multiply( m.setTranslate( this.scaleTX , this.scaleTY ) ); -1255 // this.modelViewMatrix.multiply( m.setScale( this.scaleX, this.scaleY ) ); -1256 // this.modelViewMatrix.multiply( m.setTranslate( -this.scaleTX , -this.scaleTY ) ); -1257 -1258 } -1259 */ -1260 } -1261 -1262 -1263 if ( this.parent ) { -1264 if ( this.dirty || this.parent.wdirty ) { -1265 this.worldModelViewMatrix.copy( this.parent.worldModelViewMatrix ); -1266 this.worldModelViewMatrix.multiply( this.modelViewMatrix ); -1267 this.wdirty= true; -1268 } -1269 } else { -1270 if ( this.dirty ) { -1271 this.wdirty= true; -1272 } -1273 //this.worldModelViewMatrix.copy( this.modelViewMatrix ); -1274 this.worldModelViewMatrix.identity(); -1275 } -1276 -1277 if ( (CAAT.DEBUGAABB || glEnabled) && (this.dirty || this.wdirty) ) { -1278 this.setScreenBounds(); -1279 } -1280 this.dirty= false; -1281 -1282 -1283 return this; -1284 }, -1285 /** -1286 * @private. -1287 * This method will be called by the Director to set the whole Actor pre-render process. -1288 * -1289 * @param director the CAAT.Director object instance that contains the Scene the Actor is in. -1290 * @param time an integer indicating the Scene time when the bounding box is to be drawn. -1291 * -1292 * @return boolean indicating whether the Actor isInFrameTime -1293 */ -1294 paintActor : function(director, time) { -1295 -1296 if (!this.visible) { -1297 return true; -1298 } -1299 -1300 var ctx= director.ctx; +1201 if ( this.rotationAngle ) { +1202 +1203 var rx= this.rotationX*this.width; +1204 var ry= this.rotationY*this.height; +1205 +1206 mm2+= mm0*rx + mm1*ry; +1207 mm5+= mm3*rx + mm4*ry; +1208 +1209 c= Math.cos( this.rotationAngle ); +1210 s= Math.sin( this.rotationAngle ); +1211 _m00= mm0; +1212 _m01= mm1; +1213 _m10= mm3; +1214 _m11= mm4; +1215 mm0= _m00*c + _m01*s; +1216 mm1= -_m00*s + _m01*c; +1217 mm3= _m10*c + _m11*s; +1218 mm4= -_m10*s + _m11*c; +1219 +1220 mm2+= -mm0*rx - mm1*ry; +1221 mm5+= -mm3*rx - mm4*ry; +1222 } +1223 if ( this.scaleX!=1 || this.scaleY!=1 ) { +1224 +1225 var sx= this.scaleTX*this.width; +1226 var sy= this.scaleTY*this.height; +1227 +1228 mm2+= mm0*sx + mm1*sy; +1229 mm5+= mm3*sx + mm4*sy; +1230 +1231 mm0= mm0*this.scaleX; +1232 mm1= mm1*this.scaleY; +1233 mm3= mm3*this.scaleX; +1234 mm4= mm4*this.scaleY; +1235 +1236 mm2+= -mm0*sx - mm1*sy; +1237 mm5+= -mm3*sx - mm4*sy; +1238 } +1239 +1240 mm[0]= mm0; +1241 mm[1]= mm1; +1242 mm[2]= mm2; +1243 mm[3]= mm3; +1244 mm[4]= mm4; +1245 mm[5]= mm5; +1246 +1247 /* +1248 mm[2]+= this.x; +1249 mm[5]+= this.y; +1250 if ( this.rotationAngle ) { +1251 // this.modelViewMatrix.multiply( m.setTranslate( this.rotationX, this.rotationY) ); +1252 // this.modelViewMatrix.multiply( m.setRotation( this.rotationAngle ) ); +1253 // this.modelViewMatrix.multiply( m.setTranslate( -this.rotationX, -this.rotationY) ); c= Math.cos( this.rotationAngle ); +1254 } +1255 if ( this.scaleX!=1 || this.scaleY!=1 && (this.scaleTX || this.scaleTY )) { +1256 // this.modelViewMatrix.multiply( m.setTranslate( this.scaleTX , this.scaleTY ) ); +1257 // this.modelViewMatrix.multiply( m.setScale( this.scaleX, this.scaleY ) ); +1258 // this.modelViewMatrix.multiply( m.setTranslate( -this.scaleTX , -this.scaleTY ) ); +1259 +1260 } +1261 */ +1262 } +1263 +1264 +1265 if ( this.parent ) { +1266 if ( this.dirty || this.parent.wdirty ) { +1267 this.worldModelViewMatrix.copy( this.parent.worldModelViewMatrix ); +1268 this.worldModelViewMatrix.multiply( this.modelViewMatrix ); +1269 this.wdirty= true; +1270 } +1271 } else { +1272 if ( this.dirty ) { +1273 this.wdirty= true; +1274 } +1275 //this.worldModelViewMatrix.copy( this.modelViewMatrix ); +1276 this.worldModelViewMatrix.identity(); +1277 } +1278 +1279 if ( (CAAT.DEBUGAABB || glEnabled) && (this.dirty || this.wdirty) ) { +1280 this.setScreenBounds(); +1281 } +1282 this.dirty= false; +1283 +1284 +1285 return this; +1286 }, +1287 /** +1288 * @private. +1289 * This method will be called by the Director to set the whole Actor pre-render process. +1290 * +1291 * @param director the CAAT.Director object instance that contains the Scene the Actor is in. +1292 * @param time an integer indicating the Scene time when the bounding box is to be drawn. +1293 * +1294 * @return boolean indicating whether the Actor isInFrameTime +1295 */ +1296 paintActor : function(director, time) { +1297 +1298 if (!this.visible) { +1299 return true; +1300 } 1301 -1302 this.frameAlpha= this.parent ? this.parent.frameAlpha*this.alpha : 1; -1303 ctx.globalAlpha= this.frameAlpha; -1304 -1305 this.worldModelViewMatrix.transformRenderingContext(ctx); +1302 var ctx= director.ctx; +1303 +1304 this.frameAlpha= this.parent ? this.parent.frameAlpha*this.alpha : 1; +1305 ctx.globalAlpha= this.frameAlpha; 1306 -1307 if ( this.clip ) { -1308 ctx.beginPath(); -1309 if (!this.clipPath ) { -1310 ctx.rect(0,0,this.width,this.height); -1311 } else { -1312 this.clipPath.applyAsPath(ctx); -1313 } -1314 ctx.clip(); -1315 } -1316 -1317 this.paint(director, time); +1307 this.worldModelViewMatrix.transformRenderingContext(ctx); +1308 +1309 if ( this.clip ) { +1310 ctx.beginPath(); +1311 if (!this.clipPath ) { +1312 ctx.rect(0,0,this.width,this.height); +1313 } else { +1314 this.clipPath.applyAsPath(director); +1315 } +1316 ctx.clip(); +1317 } 1318 -1319 return true; -1320 }, -1321 /** -1322 * for js2native -1323 * @param director -1324 * @param time -1325 */ -1326 __paintActor : function(director, time) { -1327 if (!this.visible) { -1328 return true; -1329 } -1330 var ctx= director.ctx; -1331 -1332 // global opt: set alpha as owns alpha, not take globalAlpha procedure. -1333 this.frameAlpha= this.alpha; -1334 -1335 var m= this.worldModelViewMatrix.matrix; -1336 ctx.setTransform( m[0], m[3], m[1], m[4], m[2], m[5], this.frameAlpha ); -1337 this.paint(director, time); -1338 return true; -1339 }, -1340 -1341 /** -1342 * Set coordinates and uv values for this actor. -1343 * This function uses Director's coords and indexCoords values. -1344 * @param director -1345 * @param time -1346 */ -1347 paintActorGL : function(director,time) { -1348 -1349 this.frameAlpha= this.parent.frameAlpha*this.alpha; +1319 this.paint(director, time); +1320 +1321 return true; +1322 }, +1323 /** +1324 * for js2native +1325 * @param director +1326 * @param time +1327 */ +1328 __paintActor : function(director, time) { +1329 if (!this.visible) { +1330 return true; +1331 } +1332 var ctx= director.ctx; +1333 +1334 // global opt: set alpha as owns alpha, not take globalAlpha procedure. +1335 this.frameAlpha= this.alpha; +1336 +1337 var m= this.worldModelViewMatrix.matrix; +1338 ctx.setTransform( m[0], m[3], m[1], m[4], m[2], m[5], this.frameAlpha ); +1339 this.paint(director, time); +1340 return true; +1341 }, +1342 +1343 /** +1344 * Set coordinates and uv values for this actor. +1345 * This function uses Director's coords and indexCoords values. +1346 * @param director +1347 * @param time +1348 */ +1349 paintActorGL : function(director,time) { 1350 -1351 if ( !this.glEnabled || !this.visible) { -1352 return; -1353 } -1354 -1355 if ( this.glNeedsFlush(director) ) { -1356 director.glFlush(); -1357 this.glSetShader(director); -1358 -1359 if ( !this.__uv ) { -1360 this.__uv= new Float32Array(8); -1361 } -1362 if ( !this.__vv ) { -1363 this.__vv= new Float32Array(12); -1364 } -1365 -1366 this.setGLCoords( this.__vv, 0 ); -1367 this.setUV( this.__uv, 0 ); -1368 director.glRender(this.__vv, 12, this.__uv); -1369 -1370 return; -1371 } -1372 -1373 var glCoords= director.coords; -1374 var glCoordsIndex= director.coordsIndex; -1375 -1376 ////////////////// XYZ -1377 this.setGLCoords(glCoords, glCoordsIndex); -1378 director.coordsIndex= glCoordsIndex+12; -1379 -1380 ////////////////// UV -1381 this.setUV( director.uv, director.uvIndex ); -1382 director.uvIndex+= 8; -1383 }, -1384 /** -1385 * TODO: set GLcoords for different image transformations. -1386 * @param glCoords -1387 * @param glCoordsIndex -1388 * @param z -1389 */ -1390 setGLCoords : function( glCoords, glCoordsIndex ) { -1391 -1392 var vv= this.viewVertices; -1393 glCoords[glCoordsIndex++]= vv[0].x; -1394 glCoords[glCoordsIndex++]= vv[0].y; -1395 glCoords[glCoordsIndex++]= 0; -1396 -1397 glCoords[glCoordsIndex++]= vv[1].x; -1398 glCoords[glCoordsIndex++]= vv[1].y; -1399 glCoords[glCoordsIndex++]= 0; -1400 -1401 glCoords[glCoordsIndex++]= vv[2].x; -1402 glCoords[glCoordsIndex++]= vv[2].y; -1403 glCoords[glCoordsIndex++]= 0; -1404 -1405 glCoords[glCoordsIndex++]= vv[3].x; -1406 glCoords[glCoordsIndex++]= vv[3].y; -1407 glCoords[glCoordsIndex++]= 0; -1408 -1409 }, -1410 /** -1411 * Set UV for this actor's quad. -1412 * -1413 * @param uvBuffer {Float32Array} -1414 * @param uvIndex {number} -1415 */ -1416 setUV : function( uvBuffer, uvIndex ) { -1417 this.backgroundImage.setUV(uvBuffer, uvIndex); -1418 }, -1419 /** -1420 * Test for compulsory gl flushing: -1421 * 1.- opacity has changed. -1422 * 2.- texture page has changed. -1423 * -1424 */ -1425 glNeedsFlush : function(director) { -1426 if ( this.getTextureGLPage()!==director.currentTexturePage ) { -1427 return true; -1428 } -1429 if ( this.frameAlpha!==director.currentOpacity ) { -1430 return true; -1431 } -1432 return false; -1433 }, -1434 /** -1435 * Change texture shader program parameters. -1436 * @param director -1437 */ -1438 glSetShader : function(director) { -1439 -1440 var tp= this.getTextureGLPage(); -1441 if ( tp!==director.currentTexturePage ) { -1442 director.setGLTexturePage(tp); -1443 } -1444 -1445 if ( this.frameAlpha!==director.currentOpacity ) { -1446 director.setGLCurrentOpacity(this.frameAlpha); -1447 } -1448 }, -1449 /** -1450 * @private. -1451 * This method is called after the Director has transformed and drawn a whole frame. -1452 * -1453 * @param director the CAAT.Director object instance that contains the Scene the Actor is in. -1454 * @param time an integer indicating the Scene time when the bounding box is to be drawn. -1455 * @return this -1456 * -1457 * @deprecated -1458 */ -1459 endAnimate : function(director,time) { -1460 return this; -1461 }, -1462 initialize : function(overrides) { -1463 if (overrides) { -1464 for (var i in overrides) { -1465 this[i] = overrides[i]; -1466 } -1467 } -1468 -1469 return this; -1470 }, -1471 /** -1472 * Set this Actor's clipping area. -1473 * @param enable {boolean} enable clip area. -1474 * @param clipPath {CAAT.Path=} An optional path to apply clip with. If enabled and clipPath is not set, -1475 * a rectangle will be used. -1476 */ -1477 setClip : function( enable, clipPath ) { -1478 this.clip= enable; -1479 this.clipPath= clipPath; -1480 return this; -1481 }, -1482 /** -1483 * -1484 * @param time {Number=} -1485 * @return this -1486 */ -1487 cacheAsBitmap : function(time) { -1488 time= time||0; -1489 var canvas= document.createElement('canvas'); -1490 canvas.width= this.width; -1491 canvas.height= this.height; -1492 var ctx= canvas.getContext('2d'); -1493 var director= { -1494 ctx: ctx, -1495 crc: ctx, -1496 modelViewMatrix: new CAAT.Matrix() -1497 }; -1498 -1499 this.paintActor(director,time); -1500 this.setBackgroundImage(canvas); -1501 return this; -1502 }, -1503 /** -1504 * Set this actor behavior as if it were a Button. The actor size will be set as SpriteImage's -1505 * single size. -1506 * -1507 * @param buttonImage {CAAT.SpriteImage} sprite image with button's state images. -1508 * @param _iNormal {number} button's normal state image index -1509 * @param _iOver {number} button's mouse over state image index -1510 * @param _iPress {number} button's pressed state image index -1511 * @param _iDisabled {number} button's disabled state image index -1512 * @param fn {function(button{CAAT.Actor})} callback function -1513 */ -1514 setAsButton : function( buttonImage, iNormal, iOver, iPress, iDisabled, fn ) { -1515 -1516 var me= this; -1517 -1518 this.setBackgroundImage(buttonImage, true); -1519 -1520 this.iNormal= iNormal || 0; -1521 this.iOver= iOver || iNormal; -1522 this.iPress= iPress || iNormal; -1523 this.iDisabled= iDisabled || iNormal; -1524 this.fnOnClick= fn; -1525 this.enabled= true; -1526 -1527 this.setSpriteIndex( iNormal ); +1351 this.frameAlpha= this.parent.frameAlpha*this.alpha; +1352 +1353 if ( !this.glEnabled || !this.visible) { +1354 return; +1355 } +1356 +1357 if ( this.glNeedsFlush(director) ) { +1358 director.glFlush(); +1359 this.glSetShader(director); +1360 +1361 if ( !this.__uv ) { +1362 this.__uv= new Float32Array(8); +1363 } +1364 if ( !this.__vv ) { +1365 this.__vv= new Float32Array(12); +1366 } +1367 +1368 this.setGLCoords( this.__vv, 0 ); +1369 this.setUV( this.__uv, 0 ); +1370 director.glRender(this.__vv, 12, this.__uv); +1371 +1372 return; +1373 } +1374 +1375 var glCoords= director.coords; +1376 var glCoordsIndex= director.coordsIndex; +1377 +1378 ////////////////// XYZ +1379 this.setGLCoords(glCoords, glCoordsIndex); +1380 director.coordsIndex= glCoordsIndex+12; +1381 +1382 ////////////////// UV +1383 this.setUV( director.uv, director.uvIndex ); +1384 director.uvIndex+= 8; +1385 }, +1386 /** +1387 * TODO: set GLcoords for different image transformations. +1388 * @param glCoords +1389 * @param glCoordsIndex +1390 * @param z +1391 */ +1392 setGLCoords : function( glCoords, glCoordsIndex ) { +1393 +1394 var vv= this.viewVertices; +1395 glCoords[glCoordsIndex++]= vv[0].x; +1396 glCoords[glCoordsIndex++]= vv[0].y; +1397 glCoords[glCoordsIndex++]= 0; +1398 +1399 glCoords[glCoordsIndex++]= vv[1].x; +1400 glCoords[glCoordsIndex++]= vv[1].y; +1401 glCoords[glCoordsIndex++]= 0; +1402 +1403 glCoords[glCoordsIndex++]= vv[2].x; +1404 glCoords[glCoordsIndex++]= vv[2].y; +1405 glCoords[glCoordsIndex++]= 0; +1406 +1407 glCoords[glCoordsIndex++]= vv[3].x; +1408 glCoords[glCoordsIndex++]= vv[3].y; +1409 glCoords[glCoordsIndex++]= 0; +1410 +1411 }, +1412 /** +1413 * Set UV for this actor's quad. +1414 * +1415 * @param uvBuffer {Float32Array} +1416 * @param uvIndex {number} +1417 */ +1418 setUV : function( uvBuffer, uvIndex ) { +1419 this.backgroundImage.setUV(uvBuffer, uvIndex); +1420 }, +1421 /** +1422 * Test for compulsory gl flushing: +1423 * 1.- opacity has changed. +1424 * 2.- texture page has changed. +1425 * +1426 */ +1427 glNeedsFlush : function(director) { +1428 if ( this.getTextureGLPage()!==director.currentTexturePage ) { +1429 return true; +1430 } +1431 if ( this.frameAlpha!==director.currentOpacity ) { +1432 return true; +1433 } +1434 return false; +1435 }, +1436 /** +1437 * Change texture shader program parameters. +1438 * @param director +1439 */ +1440 glSetShader : function(director) { +1441 +1442 var tp= this.getTextureGLPage(); +1443 if ( tp!==director.currentTexturePage ) { +1444 director.setGLTexturePage(tp); +1445 } +1446 +1447 if ( this.frameAlpha!==director.currentOpacity ) { +1448 director.setGLCurrentOpacity(this.frameAlpha); +1449 } +1450 }, +1451 /** +1452 * @private. +1453 * This method is called after the Director has transformed and drawn a whole frame. +1454 * +1455 * @param director the CAAT.Director object instance that contains the Scene the Actor is in. +1456 * @param time an integer indicating the Scene time when the bounding box is to be drawn. +1457 * @return this +1458 * +1459 * @deprecated +1460 */ +1461 endAnimate : function(director,time) { +1462 return this; +1463 }, +1464 initialize : function(overrides) { +1465 if (overrides) { +1466 for (var i in overrides) { +1467 this[i] = overrides[i]; +1468 } +1469 } +1470 +1471 return this; +1472 }, +1473 /** +1474 * Set this Actor's clipping area. +1475 * @param enable {boolean} enable clip area. +1476 * @param clipPath {CAAT.Path=} An optional path to apply clip with. If enabled and clipPath is not set, +1477 * a rectangle will be used. +1478 */ +1479 setClip : function( enable, clipPath ) { +1480 this.clip= enable; +1481 this.clipPath= clipPath; +1482 return this; +1483 }, +1484 /** +1485 * +1486 * @param time {Number=} +1487 * @return this +1488 */ +1489 cacheAsBitmap : function(time) { +1490 time= time||0; +1491 var canvas= document.createElement('canvas'); +1492 canvas.width= this.width; +1493 canvas.height= this.height; +1494 var ctx= canvas.getContext('2d'); +1495 var director= { +1496 ctx: ctx, +1497 crc: ctx, +1498 modelViewMatrix: new CAAT.Matrix() +1499 }; +1500 +1501 this.paintActor(director,time); +1502 this.setBackgroundImage(canvas); +1503 return this; +1504 }, +1505 /** +1506 * Set this actor behavior as if it were a Button. The actor size will be set as SpriteImage's +1507 * single size. +1508 * +1509 * @param buttonImage {CAAT.SpriteImage} sprite image with button's state images. +1510 * @param _iNormal {number} button's normal state image index +1511 * @param _iOver {number} button's mouse over state image index +1512 * @param _iPress {number} button's pressed state image index +1513 * @param _iDisabled {number} button's disabled state image index +1514 * @param fn {function(button{CAAT.Actor})} callback function +1515 */ +1516 setAsButton : function( buttonImage, iNormal, iOver, iPress, iDisabled, fn ) { +1517 +1518 var me= this; +1519 +1520 this.setBackgroundImage(buttonImage, true); +1521 +1522 this.iNormal= iNormal || 0; +1523 this.iOver= iOver || iNormal; +1524 this.iPress= iPress || iNormal; +1525 this.iDisabled= iDisabled || iNormal; +1526 this.fnOnClick= fn; +1527 this.enabled= true; 1528 -1529 /** -1530 * Enable or disable the button. -1531 * @param enabled {boolean} -1532 * @ignore -1533 */ -1534 this.setEnabled= function( enabled ) { -1535 this.enabled= enabled; -1536 this.setSpriteIndex( this.enabled ? this.iNormal : this.iDisabled ); -1537 }; -1538 -1539 /** -1540 * This method will be called by CAAT *before* the mouseUp event is fired. -1541 * @param event {CAAT.MouseEvent} -1542 * @ignore -1543 */ -1544 this.actionPerformed= function(event) { -1545 if ( this.enabled && null!==this.fnOnClick ) { -1546 this.fnOnClick(this); -1547 } -1548 }; -1549 -1550 /** -1551 * Button's mouse enter handler. It makes the button provide visual feedback -1552 * @param mouseEvent {CAAT.MouseEvent} -1553 * @ignore -1554 */ -1555 this.mouseEnter= function(mouseEvent) { -1556 if ( !this.enabled ) { -1557 return; -1558 } -1559 -1560 if ( this.dragging ) { -1561 this.setSpriteIndex( this.iPress ); -1562 } else { -1563 this.setSpriteIndex( this.iOver ); -1564 } -1565 CAAT.setCursor('pointer'); -1566 }; -1567 -1568 /** -1569 * Button's mouse exit handler. Release visual apperance. -1570 * @param mouseEvent {CAAT.MouseEvent} -1571 * @ignore -1572 */ -1573 this.mouseExit= function(mouseEvent) { -1574 if ( !this.enabled ) { -1575 return; -1576 } -1577 -1578 this.setSpriteIndex( this.iNormal ); -1579 CAAT.setCursor('default'); -1580 }; -1581 -1582 /** -1583 * Button's mouse down handler. -1584 * @param mouseEvent {CAAT.MouseEvent} -1585 * @ignore -1586 */ -1587 this.mouseDown= function(mouseEvent) { -1588 if ( !this.enabled ) { -1589 return; -1590 } -1591 -1592 this.setSpriteIndex( this.iPress ); -1593 }; -1594 -1595 /** -1596 * Button's mouse up handler. -1597 * @param mouseEvent {CAAT.MouseEvent} -1598 * @ignore -1599 */ -1600 this.mouseUp= function(mouseEvent) { -1601 if ( !this.enabled ) { -1602 return; -1603 } -1604 -1605 this.setSpriteIndex( this.iNormal ); -1606 this.dragging= false; -1607 }; -1608 -1609 /** -1610 * Button's mouse click handler. Do nothing by default. This event handler will be -1611 * called ONLY if it has not been drag on the button. -1612 * @param mouseEvent {CAAT.MouseEvent} -1613 * @ignore -1614 */ -1615 this.mouseClick= function(mouseEvent) { -1616 }; -1617 -1618 /** -1619 * Button's mouse drag handler. -1620 * @param mouseEvent {CAAT.MouseEvent} -1621 * @ignore -1622 */ -1623 this.mouseDrag= function(mouseEvent) { -1624 if ( !this.enabled ) { -1625 return; -1626 } -1627 -1628 this.dragging= true; -1629 }; -1630 -1631 this.setButtonImageIndex= function(_normal, _over, _press, _disabled ) { -1632 this.iNormal= _normal; -1633 this.iOver= _over; -1634 this.iPress= _press; -1635 this.iDisabled= _disabled; -1636 this.setSpriteIndex( this.iNormal ); -1637 return this; -1638 }; -1639 -1640 return this; -1641 } -1642 }; -1643 -1644 if ( CAAT.NO_PERF ) { -1645 CAAT.Actor.prototype.paintActor= CAAT.Actor.prototype.__paintActor; -1646 } -1647 -1648 })(); +1529 this.setSpriteIndex( iNormal ); +1530 +1531 /** +1532 * Enable or disable the button. +1533 * @param enabled {boolean} +1534 * @ignore +1535 */ +1536 this.setEnabled= function( enabled ) { +1537 this.enabled= enabled; +1538 this.setSpriteIndex( this.enabled ? this.iNormal : this.iDisabled ); +1539 }; +1540 +1541 /** +1542 * This method will be called by CAAT *before* the mouseUp event is fired. +1543 * @param event {CAAT.MouseEvent} +1544 * @ignore +1545 */ +1546 this.actionPerformed= function(event) { +1547 if ( this.enabled && null!==this.fnOnClick ) { +1548 this.fnOnClick(this); +1549 } +1550 }; +1551 +1552 /** +1553 * Button's mouse enter handler. It makes the button provide visual feedback +1554 * @param mouseEvent {CAAT.MouseEvent} +1555 * @ignore +1556 */ +1557 this.mouseEnter= function(mouseEvent) { +1558 if ( !this.enabled ) { +1559 return; +1560 } +1561 +1562 if ( this.dragging ) { +1563 this.setSpriteIndex( this.iPress ); +1564 } else { +1565 this.setSpriteIndex( this.iOver ); +1566 } +1567 CAAT.setCursor('pointer'); +1568 }; +1569 +1570 /** +1571 * Button's mouse exit handler. Release visual apperance. +1572 * @param mouseEvent {CAAT.MouseEvent} +1573 * @ignore +1574 */ +1575 this.mouseExit= function(mouseEvent) { +1576 if ( !this.enabled ) { +1577 return; +1578 } +1579 +1580 this.setSpriteIndex( this.iNormal ); +1581 CAAT.setCursor('default'); +1582 }; +1583 +1584 /** +1585 * Button's mouse down handler. +1586 * @param mouseEvent {CAAT.MouseEvent} +1587 * @ignore +1588 */ +1589 this.mouseDown= function(mouseEvent) { +1590 if ( !this.enabled ) { +1591 return; +1592 } +1593 +1594 this.setSpriteIndex( this.iPress ); +1595 }; +1596 +1597 /** +1598 * Button's mouse up handler. +1599 * @param mouseEvent {CAAT.MouseEvent} +1600 * @ignore +1601 */ +1602 this.mouseUp= function(mouseEvent) { +1603 if ( !this.enabled ) { +1604 return; +1605 } +1606 +1607 this.setSpriteIndex( this.iNormal ); +1608 this.dragging= false; +1609 }; +1610 +1611 /** +1612 * Button's mouse click handler. Do nothing by default. This event handler will be +1613 * called ONLY if it has not been drag on the button. +1614 * @param mouseEvent {CAAT.MouseEvent} +1615 * @ignore +1616 */ +1617 this.mouseClick= function(mouseEvent) { +1618 }; +1619 +1620 /** +1621 * Button's mouse drag handler. +1622 * @param mouseEvent {CAAT.MouseEvent} +1623 * @ignore +1624 */ +1625 this.mouseDrag= function(mouseEvent) { +1626 if ( !this.enabled ) { +1627 return; +1628 } +1629 +1630 this.dragging= true; +1631 }; +1632 +1633 this.setButtonImageIndex= function(_normal, _over, _press, _disabled ) { +1634 this.iNormal= _normal; +1635 this.iOver= _over; +1636 this.iPress= _press; +1637 this.iDisabled= _disabled; +1638 this.setSpriteIndex( this.iNormal ); +1639 return this; +1640 }; +1641 +1642 return this; +1643 } +1644 }; +1645 +1646 if ( CAAT.NO_PERF ) { +1647 CAAT.Actor.prototype.paintActor= CAAT.Actor.prototype.__paintActor; +1648 } 1649 -1650 (function() { +1650 })(); 1651 -1652 /** -1653 * This class is a general container of CAAT.Actor instances. It extends the concept of an Actor -1654 * from a single entity on screen to a set of entities with a parent/children relationship among -1655 * them. -1656 * <p> -1657 * This mainly overrides default behavior of a single entity and exposes methods to manage its children -1658 * collection. -1659 * -1660 * @constructor -1661 * @extends CAAT.Actor -1662 */ -1663 CAAT.ActorContainer= function(hint) { -1664 -1665 CAAT.ActorContainer.superclass.constructor.call(this); -1666 this.childrenList= []; -1667 this.pendingChildrenList= []; -1668 if ( typeof hint!=='undefined' ) { -1669 this.addHint= hint; -1670 this.boundingBox= new CAAT.Rectangle(); -1671 } -1672 return this; -1673 }; -1674 -1675 CAAT.ActorContainer.AddHint= { -1676 CONFORM : 1 -1677 }; -1678 -1679 CAAT.ActorContainer.prototype= { +1652 (function() { +1653 +1654 /** +1655 * This class is a general container of CAAT.Actor instances. It extends the concept of an Actor +1656 * from a single entity on screen to a set of entities with a parent/children relationship among +1657 * them. +1658 * <p> +1659 * This mainly overrides default behavior of a single entity and exposes methods to manage its children +1660 * collection. +1661 * +1662 * @constructor +1663 * @extends CAAT.Actor +1664 */ +1665 CAAT.ActorContainer= function(hint) { +1666 +1667 CAAT.ActorContainer.superclass.constructor.call(this); +1668 this.childrenList= []; +1669 this.pendingChildrenList= []; +1670 if ( typeof hint!=='undefined' ) { +1671 this.addHint= hint; +1672 this.boundingBox= new CAAT.Rectangle(); +1673 } +1674 return this; +1675 }; +1676 +1677 CAAT.ActorContainer.AddHint= { +1678 CONFORM : 1 +1679 }; 1680 -1681 childrenList : null, // the list of children contained. -1682 activeChildren : null, -1683 pendingChildrenList : null, -1684 -1685 addHint : 0, -1686 boundingBox : null, -1687 runion : new CAAT.Rectangle(), // Watch out. one for every container. -1688 -1689 /** -1690 * Draws this ActorContainer and all of its children screen bounding box. -1691 * -1692 * @param director the CAAT.Director object instance that contains the Scene the Actor is in. -1693 * @param time an integer indicating the Scene time when the bounding box is to be drawn. -1694 */ -1695 drawScreenBoundingBox : function( director, time ) { -1696 -1697 if (!this.inFrame) { -1698 return; -1699 } -1700 -1701 var cl= this.childrenList; -1702 for( var i=0; i<cl.length; i++ ) { -1703 cl[i].drawScreenBoundingBox(director,time); -1704 } -1705 CAAT.ActorContainer.superclass.drawScreenBoundingBox.call(this,director,time); -1706 -1707 }, -1708 /** -1709 * Removes all children from this ActorContainer. -1710 * -1711 * @return this -1712 */ -1713 emptyChildren : function() { -1714 this.childrenList= []; -1715 -1716 return this; -1717 }, -1718 /** -1719 * Private -1720 * Paints this container and every contained children. -1721 * -1722 * @param director the CAAT.Director object instance that contains the Scene the Actor is in. -1723 * @param time an integer indicating the Scene time when the bounding box is to be drawn. -1724 */ -1725 paintActor : function(director, time ) { -1726 -1727 if (!this.visible) { -1728 return true; -1729 } -1730 -1731 var ctx= director.ctx; -1732 var dmvm= director.modelViewMatrix; -1733 -1734 ctx.save(); -1735 // dmvm.transformRenderingContextSet( ctx ); -1736 -1737 CAAT.ActorContainer.superclass.paintActor.call(this,director,time); -1738 if ( !this.isGlobalAlpha ) { -1739 this.frameAlpha= this.parent ? this.parent.frameAlpha : 1; -1740 } -1741 -1742 for( var actor= this.activeChildren; actor; actor=actor.__next ) { -1743 if ( actor.visible ) { -1744 dmvm.transformRenderingContextSet( ctx ); -1745 ctx.save(); -1746 actor.paintActor(director,time); -1747 ctx.restore(); -1748 } -1749 } -1750 ctx.restore(); -1751 -1752 return true; -1753 }, -1754 __paintActor : function(director, time ) { -1755 if (!this.visible) { -1756 return true; -1757 } -1758 -1759 var ctx= director.ctx; +1681 CAAT.ActorContainer.prototype= { +1682 +1683 childrenList : null, // the list of children contained. +1684 activeChildren : null, +1685 pendingChildrenList : null, +1686 +1687 addHint : 0, +1688 boundingBox : null, +1689 runion : new CAAT.Rectangle(), // Watch out. one for every container. +1690 +1691 /** +1692 * Draws this ActorContainer and all of its children screen bounding box. +1693 * +1694 * @param director the CAAT.Director object instance that contains the Scene the Actor is in. +1695 * @param time an integer indicating the Scene time when the bounding box is to be drawn. +1696 */ +1697 drawScreenBoundingBox : function( director, time ) { +1698 +1699 if (!this.inFrame) { +1700 return; +1701 } +1702 +1703 var cl= this.childrenList; +1704 for( var i=0; i<cl.length; i++ ) { +1705 cl[i].drawScreenBoundingBox(director,time); +1706 } +1707 CAAT.ActorContainer.superclass.drawScreenBoundingBox.call(this,director,time); +1708 +1709 }, +1710 /** +1711 * Removes all children from this ActorContainer. +1712 * +1713 * @return this +1714 */ +1715 emptyChildren : function() { +1716 this.childrenList= []; +1717 +1718 return this; +1719 }, +1720 /** +1721 * Private +1722 * Paints this container and every contained children. +1723 * +1724 * @param director the CAAT.Director object instance that contains the Scene the Actor is in. +1725 * @param time an integer indicating the Scene time when the bounding box is to be drawn. +1726 */ +1727 paintActor : function(director, time ) { +1728 +1729 if (!this.visible) { +1730 return true; +1731 } +1732 +1733 var ctx= director.ctx; +1734 var dmvm= director.modelViewMatrix; +1735 +1736 ctx.save(); +1737 // dmvm.transformRenderingContextSet( ctx ); +1738 +1739 CAAT.ActorContainer.superclass.paintActor.call(this,director,time); +1740 if ( !this.isGlobalAlpha ) { +1741 this.frameAlpha= this.parent ? this.parent.frameAlpha : 1; +1742 } +1743 +1744 for( var actor= this.activeChildren; actor; actor=actor.__next ) { +1745 if ( actor.visible ) { +1746 dmvm.transformRenderingContextSet( ctx ); +1747 ctx.save(); +1748 actor.paintActor(director,time); +1749 ctx.restore(); +1750 } +1751 } +1752 ctx.restore(); +1753 +1754 return true; +1755 }, +1756 __paintActor : function(director, time ) { +1757 if (!this.visible) { +1758 return true; +1759 } 1760 -1761 this.frameAlpha= this.parent ? this.parent.frameAlpha*this.alpha : 1; -1762 var m= this.worldModelViewMatrix.matrix; -1763 ctx.setTransform( m[0], m[3], m[1], m[4], m[2], m[5], this.frameAlpha ); -1764 this.paint(director, time); -1765 -1766 if ( !this.isGlobalAlpha ) { -1767 this.frameAlpha= this.parent ? this.parent.frameAlpha : 1; -1768 } -1769 -1770 for( var actor= this.activeChildren; actor; actor=actor.__next ) { -1771 actor.paintActor(director,time); -1772 } -1773 return true; -1774 }, -1775 paintActorGL : function(director,time) { -1776 -1777 var i, c; -1778 if (!this.visible) { -1779 return true; -1780 } -1781 -1782 CAAT.ActorContainer.superclass.paintActorGL.call(this,director,time); +1761 var ctx= director.ctx; +1762 +1763 this.frameAlpha= this.parent ? this.parent.frameAlpha*this.alpha : 1; +1764 var m= this.worldModelViewMatrix.matrix; +1765 ctx.setTransform( m[0], m[3], m[1], m[4], m[2], m[5], this.frameAlpha ); +1766 this.paint(director, time); +1767 +1768 if ( !this.isGlobalAlpha ) { +1769 this.frameAlpha= this.parent ? this.parent.frameAlpha : 1; +1770 } +1771 +1772 for( var actor= this.activeChildren; actor; actor=actor.__next ) { +1773 actor.paintActor(director,time); +1774 } +1775 return true; +1776 }, +1777 paintActorGL : function(director,time) { +1778 +1779 var i, c; +1780 if (!this.visible) { +1781 return true; +1782 } 1783 -1784 if ( !this.isGlobalAlpha ) { -1785 this.frameAlpha= this.parent.frameAlpha; -1786 } -1787 -1788 for( c= this.activeChildren; c; c=c.__next ) { -1789 c.paintActorGL(director,time); -1790 } -1791 -1792 }, -1793 /** -1794 * Private. -1795 * Performs the animate method for this ActorContainer and every contained Actor. -1796 * -1797 * @param director the CAAT.Director object instance that contains the Scene the Actor is in. -1798 * @param time an integer indicating the Scene time when the bounding box is to be drawn. -1799 * -1800 * @return {boolean} is this actor in active children list ?? -1801 */ -1802 animate : function(director,time) { -1803 -1804 this.activeChildren= null; -1805 var last= null; -1806 -1807 if (false===CAAT.ActorContainer.superclass.animate.call(this,director,time)) { -1808 return false; -1809 } -1810 -1811 var i,l; +1784 CAAT.ActorContainer.superclass.paintActorGL.call(this,director,time); +1785 +1786 if ( !this.isGlobalAlpha ) { +1787 this.frameAlpha= this.parent.frameAlpha; +1788 } +1789 +1790 for( c= this.activeChildren; c; c=c.__next ) { +1791 c.paintActorGL(director,time); +1792 } +1793 +1794 }, +1795 /** +1796 * Private. +1797 * Performs the animate method for this ActorContainer and every contained Actor. +1798 * +1799 * @param director the CAAT.Director object instance that contains the Scene the Actor is in. +1800 * @param time an integer indicating the Scene time when the bounding box is to be drawn. +1801 * +1802 * @return {boolean} is this actor in active children list ?? +1803 */ +1804 animate : function(director,time) { +1805 +1806 this.activeChildren= null; +1807 var last= null; +1808 +1809 if (false===CAAT.ActorContainer.superclass.animate.call(this,director,time)) { +1810 return false; +1811 } 1812 -1813 /** -1814 * Incluir los actores pendientes. -1815 * El momento es ahora, antes de procesar ninguno del contenedor. -1816 */ -1817 var pcl= this.pendingChildrenList; -1818 for( i=0; i<pcl.length; i++ ) { -1819 var child= pcl[i]; -1820 this.addChild(child); -1821 } -1822 -1823 this.pendingChildrenList= []; -1824 var markDelete= []; -1825 -1826 var cl= this.childrenList; -1827 this.activeChildren= null; -1828 this.size_active= 0; -1829 this.size_total= 0; -1830 for( i=0; i<cl.length; i++ ) { -1831 var actor= cl[i]; -1832 actor.time= time; -1833 this.size_total+= actor.size_total; -1834 if ( actor.animate(director, time) ) { -1835 if ( !this.activeChildren ) { -1836 this.activeChildren= actor; -1837 actor.__next= null; -1838 last= actor; -1839 } else { -1840 actor.__next= null; -1841 last.__next= actor; -1842 last= actor; -1843 } -1844 -1845 this.size_active+= actor.size_active; +1813 var i,l; +1814 +1815 /** +1816 * Incluir los actores pendientes. +1817 * El momento es ahora, antes de procesar ninguno del contenedor. +1818 */ +1819 var pcl= this.pendingChildrenList; +1820 for( i=0; i<pcl.length; i++ ) { +1821 var child= pcl[i]; +1822 this.addChild(child); +1823 } +1824 +1825 this.pendingChildrenList= []; +1826 var markDelete= []; +1827 +1828 var cl= this.childrenList; +1829 this.activeChildren= null; +1830 this.size_active= 0; +1831 this.size_total= 0; +1832 for( i=0; i<cl.length; i++ ) { +1833 var actor= cl[i]; +1834 actor.time= time; +1835 this.size_total+= actor.size_total; +1836 if ( actor.animate(director, time) ) { +1837 if ( !this.activeChildren ) { +1838 this.activeChildren= actor; +1839 actor.__next= null; +1840 last= actor; +1841 } else { +1842 actor.__next= null; +1843 last.__next= actor; +1844 last= actor; +1845 } 1846 -1847 } else { -1848 if ( actor.expired && actor.discardable ) { -1849 markDelete.push(actor); -1850 } -1851 } -1852 } -1853 -1854 for( i=0, l=markDelete.length; i<l; i++ ) { -1855 markDelete[i].destroy(time); -1856 } -1857 -1858 return true; -1859 }, -1860 /** -1861 * Removes Actors from this ActorContainer which are expired and flagged as Discardable. -1862 * -1863 * @param director the CAAT.Director object instance that contains the Scene the Actor is in. -1864 * @param time an integer indicating the Scene time when the bounding box is to be drawn. -1865 * -1866 * @deprecated -1867 */ -1868 endAnimate : function(director,time) { -1869 }, -1870 /** -1871 * Adds an Actor to this Container. -1872 * The Actor will be added ON METHOD CALL, despite the rendering pipeline stage being executed at -1873 * the time of method call. -1874 * -1875 * This method is only used by CAAT.Director's transitionScene. +1847 this.size_active+= actor.size_active; +1848 +1849 } else { +1850 if ( actor.expired && actor.discardable ) { +1851 markDelete.push(actor); +1852 } +1853 } +1854 } +1855 +1856 for( i=0, l=markDelete.length; i<l; i++ ) { +1857 markDelete[i].destroy(time); +1858 } +1859 +1860 return true; +1861 }, +1862 /** +1863 * Removes Actors from this ActorContainer which are expired and flagged as Discardable. +1864 * +1865 * @param director the CAAT.Director object instance that contains the Scene the Actor is in. +1866 * @param time an integer indicating the Scene time when the bounding box is to be drawn. +1867 * +1868 * @deprecated +1869 */ +1870 endAnimate : function(director,time) { +1871 }, +1872 /** +1873 * Adds an Actor to this Container. +1874 * The Actor will be added ON METHOD CALL, despite the rendering pipeline stage being executed at +1875 * the time of method call. 1876 * -1877 * @param child a CAAT.Actor instance. -1878 * @return this. -1879 */ -1880 addChildImmediately : function(child) { -1881 return this.addChild(child); -1882 }, -1883 /** -1884 * Adds an Actor to this ActorContainer. -1885 * The Actor will be added to the container AFTER frame animation, and not on method call time. -1886 * Except the Director and in orther to avoid visual artifacts, the developer SHOULD NOT call this -1887 * method directly. -1888 * -1889 * If the container has addingHint as CAAT.ActorContainer.AddHint.CONFORM, new continer size will be -1890 * calculated by summing up the union of every client actor bounding box. -1891 * This method will not take into acount actor's affine transformations, so the bounding box will be -1892 * AABB. -1893 * -1894 * @param child a CAAT.Actor object instance. -1895 * @return this -1896 */ -1897 addChild : function(child) { -1898 -1899 if ( child.parent!=null ) { -1900 throw('adding to a container an element with parent.'); -1901 } -1902 -1903 child.parent= this; -1904 this.childrenList.push(child); -1905 child.dirty= true; -1906 -1907 /** -1908 * if Conforming size, recalc new bountainer size. -1909 */ -1910 if ( this.addHint===CAAT.ActorContainer.AddHint.CONFORM ) { -1911 this.recalcSize(); -1912 } -1913 -1914 return this; -1915 }, -1916 -1917 /** -1918 * Recalc this container size by computin the union of every children bounding box. -1919 */ -1920 recalcSize : function() { -1921 var bb= this.boundingBox; -1922 bb.setEmpty(); -1923 var cl= this.childrenList; -1924 var ac; -1925 for( var i=0; i<cl.length; i++ ) { -1926 ac= cl[i]; -1927 this.runion.setBounds( -1928 ac.x<0 ? 0 : ac.x, -1929 ac.y<0 ? 0 : ac.y, -1930 ac.width, -1931 ac.height ); -1932 bb.unionRectangle( this.runion ); -1933 } -1934 this.setSize( bb.x1, bb.y1 ); -1935 -1936 return this; -1937 }, -1938 -1939 /** -1940 * Add a child element and make it active in the next frame. -1941 * @param child {CAAT.Actor} -1942 */ -1943 addChildDelayed : function(child) { -1944 this.pendingChildrenList.push(child); -1945 return this; -1946 }, -1947 /** -1948 * Adds an Actor to this ActorContainer. -1949 * -1950 * @param child a CAAT.Actor object instance. +1877 * This method is only used by CAAT.Director's transitionScene. +1878 * +1879 * @param child a CAAT.Actor instance. +1880 * @return this. +1881 */ +1882 addChildImmediately : function(child) { +1883 return this.addChild(child); +1884 }, +1885 /** +1886 * Adds an Actor to this ActorContainer. +1887 * The Actor will be added to the container AFTER frame animation, and not on method call time. +1888 * Except the Director and in orther to avoid visual artifacts, the developer SHOULD NOT call this +1889 * method directly. +1890 * +1891 * If the container has addingHint as CAAT.ActorContainer.AddHint.CONFORM, new continer size will be +1892 * calculated by summing up the union of every client actor bounding box. +1893 * This method will not take into acount actor's affine transformations, so the bounding box will be +1894 * AABB. +1895 * +1896 * @param child a CAAT.Actor object instance. +1897 * @return this +1898 */ +1899 addChild : function(child) { +1900 +1901 if ( child.parent!=null ) { +1902 throw('adding to a container an element with parent.'); +1903 } +1904 +1905 child.parent= this; +1906 this.childrenList.push(child); +1907 child.dirty= true; +1908 +1909 /** +1910 * if Conforming size, recalc new bountainer size. +1911 */ +1912 if ( this.addHint===CAAT.ActorContainer.AddHint.CONFORM ) { +1913 this.recalcSize(); +1914 } +1915 +1916 return this; +1917 }, +1918 +1919 /** +1920 * Recalc this container size by computin the union of every children bounding box. +1921 */ +1922 recalcSize : function() { +1923 var bb= this.boundingBox; +1924 bb.setEmpty(); +1925 var cl= this.childrenList; +1926 var ac; +1927 for( var i=0; i<cl.length; i++ ) { +1928 ac= cl[i]; +1929 this.runion.setBounds( +1930 ac.x<0 ? 0 : ac.x, +1931 ac.y<0 ? 0 : ac.y, +1932 ac.width, +1933 ac.height ); +1934 bb.unionRectangle( this.runion ); +1935 } +1936 this.setSize( bb.x1, bb.y1 ); +1937 +1938 return this; +1939 }, +1940 +1941 /** +1942 * Add a child element and make it active in the next frame. +1943 * @param child {CAAT.Actor} +1944 */ +1945 addChildDelayed : function(child) { +1946 this.pendingChildrenList.push(child); +1947 return this; +1948 }, +1949 /** +1950 * Adds an Actor to this ActorContainer. 1951 * -1952 * @return this -1953 */ -1954 addChildAt : function(child, index) { -1955 -1956 if( index <= 0 ) { -1957 child.parent= this; -1958 child.dirty= true; -1959 //this.childrenList.unshift(child); // unshift unsupported on IE -1960 this.childrenList.splice( 0, 0, child ); -1961 return this; -1962 } else { -1963 if ( index>=this.childrenList.length ) { -1964 index= this.childrenList.length; -1965 } -1966 } -1967 -1968 child.parent= this; -1969 child.dirty= true; -1970 this.childrenList.splice(index, 0, child); -1971 -1972 return this; -1973 }, -1974 /** -1975 * Private -1976 * Gets a contained Actor z-index on this ActorContainer. -1977 * -1978 * @param child a CAAT.Actor object instance. +1952 * @param child a CAAT.Actor object instance. +1953 * +1954 * @return this +1955 */ +1956 addChildAt : function(child, index) { +1957 +1958 if( index <= 0 ) { +1959 child.parent= this; +1960 child.dirty= true; +1961 //this.childrenList.unshift(child); // unshift unsupported on IE +1962 this.childrenList.splice( 0, 0, child ); +1963 return this; +1964 } else { +1965 if ( index>=this.childrenList.length ) { +1966 index= this.childrenList.length; +1967 } +1968 } +1969 +1970 child.parent= this; +1971 child.dirty= true; +1972 this.childrenList.splice(index, 0, child); +1973 +1974 return this; +1975 }, +1976 /** +1977 * Private +1978 * Gets a contained Actor z-index on this ActorContainer. 1979 * -1980 * @return an integer indicating the Actor's z-order. -1981 */ -1982 findChild : function(child) { -1983 var cl= this.childrenList; -1984 var i=0; -1985 var len = cl.length; -1986 -1987 for( i=0; i<len; i++ ) { -1988 if ( cl[i]===child ) { -1989 return i; -1990 } -1991 } -1992 return -1; -1993 }, -1994 /** -1995 * Removed an Actor form this ActorContainer. -1996 * If the Actor is not contained into this Container, nothing happends. -1997 * -1998 * @param child a CAAT.Actor object instance. +1980 * @param child a CAAT.Actor object instance. +1981 * +1982 * @return an integer indicating the Actor's z-order. +1983 */ +1984 findChild : function(child) { +1985 var cl= this.childrenList; +1986 var i=0; +1987 var len = cl.length; +1988 +1989 for( i=0; i<len; i++ ) { +1990 if ( cl[i]===child ) { +1991 return i; +1992 } +1993 } +1994 return -1; +1995 }, +1996 /** +1997 * Removed an Actor form this ActorContainer. +1998 * If the Actor is not contained into this Container, nothing happends. 1999 * -2000 * @return this -2001 */ -2002 removeChild : function(child) { -2003 var pos= this.findChild(child); -2004 var cl= this.childrenList; -2005 if ( -1!==pos ) { -2006 cl[pos].setParent(null); -2007 cl.splice(pos,1); -2008 } -2009 -2010 return this; -2011 }, -2012 /** -2013 * @private -2014 * -2015 * Gets the Actor inside this ActorContainer at a given Screen coordinate. +2000 * @param child a CAAT.Actor object instance. +2001 * +2002 * @return this +2003 */ +2004 removeChild : function(child) { +2005 var pos= this.findChild(child); +2006 var cl= this.childrenList; +2007 if ( -1!==pos ) { +2008 cl[pos].setParent(null); +2009 cl.splice(pos,1); +2010 } +2011 +2012 return this; +2013 }, +2014 /** +2015 * @private 2016 * -2017 * @param point an object of the form { x: float, y: float } +2017 * Gets the Actor inside this ActorContainer at a given Screen coordinate. 2018 * -2019 * @return the Actor contained inside this ActorContainer if found, or the ActorContainer itself. -2020 */ -2021 findActorAtPosition : function(point) { -2022 -2023 if( null===CAAT.ActorContainer.superclass.findActorAtPosition.call(this,point) ) { -2024 return null; -2025 } -2026 -2027 // z-order -2028 var cl= this.childrenList; -2029 for( var i=cl.length-1; i>=0; i-- ) { -2030 var child= this.childrenList[i]; -2031 -2032 var np= new CAAT.Point( point.x, point.y, 0 ); -2033 var contained= child.findActorAtPosition( np ); -2034 if ( null!==contained ) { -2035 return contained; -2036 } -2037 } -2038 -2039 return this; -2040 }, -2041 /** -2042 * Destroys this ActorContainer. -2043 * The process falls down recursively for each contained Actor into this ActorContainer. -2044 * -2045 * @return this -2046 */ -2047 destroy : function() { -2048 var cl= this.childrenList; -2049 for( var i=cl.length-1; i>=0; i-- ) { -2050 cl[i].destroy(); -2051 } -2052 CAAT.ActorContainer.superclass.destroy.call(this); -2053 -2054 return this; -2055 }, -2056 /** -2057 * Get number of Actors into this container. -2058 * @return integer indicating the number of children. -2059 */ -2060 getNumChildren : function() { -2061 return this.childrenList.length; -2062 }, -2063 getNumActiveChildren : function() { -2064 return this.activeChildren.length; -2065 }, -2066 /** -2067 * Returns the Actor at the iPosition(th) position. -2068 * @param iPosition an integer indicating the position array. -2069 * @return the CAAT.Actor object at position. -2070 */ -2071 getChildAt : function( iPosition ) { -2072 return this.childrenList[ iPosition ]; -2073 }, -2074 /** -2075 * Changes an actor's ZOrder. -2076 * @param actor the actor to change ZOrder for -2077 * @param index an integer indicating the new ZOrder. a value greater than children list size means to be the -2078 * last ZOrder Actor. -2079 */ -2080 setZOrder : function( actor, index ) { -2081 var actorPos= this.findChild(actor); -2082 // the actor is present -2083 if ( -1!==actorPos ) { -2084 var cl= this.childrenList; -2085 // trivial reject. -2086 if ( index===actorPos ) { -2087 return; -2088 } -2089 -2090 if ( index>=cl.length ) { -2091 cl.splice(actorPos,1); -2092 cl.push(actor); -2093 } else { -2094 var nActor= cl.splice(actorPos,1); -2095 if ( index<0 ) { -2096 index=0; -2097 } else if ( index>cl.length ) { -2098 index= cl.length; -2099 } -2100 -2101 //cl.splice( index, 1, nActor ); -2102 cl.splice( index, 0, nActor[0] ); -2103 } -2104 } -2105 } -2106 }; -2107 -2108 if ( CAAT.NO_PERF ) { -2109 CAAT.ActorContainer.prototype.paintActor= CAAT.ActorContainer.prototype.__paintActor; -2110 } -2111 -2112 extend( CAAT.ActorContainer, CAAT.Actor, null); -2113 -2114 })(); +2019 * @param point an object of the form { x: float, y: float } +2020 * +2021 * @return the Actor contained inside this ActorContainer if found, or the ActorContainer itself. +2022 */ +2023 findActorAtPosition : function(point) { +2024 +2025 if( null===CAAT.ActorContainer.superclass.findActorAtPosition.call(this,point) ) { +2026 return null; +2027 } +2028 +2029 // z-order +2030 var cl= this.childrenList; +2031 for( var i=cl.length-1; i>=0; i-- ) { +2032 var child= this.childrenList[i]; +2033 +2034 var np= new CAAT.Point( point.x, point.y, 0 ); +2035 var contained= child.findActorAtPosition( np ); +2036 if ( null!==contained ) { +2037 return contained; +2038 } +2039 } +2040 +2041 return this; +2042 }, +2043 /** +2044 * Destroys this ActorContainer. +2045 * The process falls down recursively for each contained Actor into this ActorContainer. +2046 * +2047 * @return this +2048 */ +2049 destroy : function() { +2050 var cl= this.childrenList; +2051 for( var i=cl.length-1; i>=0; i-- ) { +2052 cl[i].destroy(); +2053 } +2054 CAAT.ActorContainer.superclass.destroy.call(this); +2055 +2056 return this; +2057 }, +2058 /** +2059 * Get number of Actors into this container. +2060 * @return integer indicating the number of children. +2061 */ +2062 getNumChildren : function() { +2063 return this.childrenList.length; +2064 }, +2065 getNumActiveChildren : function() { +2066 return this.activeChildren.length; +2067 }, +2068 /** +2069 * Returns the Actor at the iPosition(th) position. +2070 * @param iPosition an integer indicating the position array. +2071 * @return the CAAT.Actor object at position. +2072 */ +2073 getChildAt : function( iPosition ) { +2074 return this.childrenList[ iPosition ]; +2075 }, +2076 /** +2077 * Changes an actor's ZOrder. +2078 * @param actor the actor to change ZOrder for +2079 * @param index an integer indicating the new ZOrder. a value greater than children list size means to be the +2080 * last ZOrder Actor. +2081 */ +2082 setZOrder : function( actor, index ) { +2083 var actorPos= this.findChild(actor); +2084 // the actor is present +2085 if ( -1!==actorPos ) { +2086 var cl= this.childrenList; +2087 // trivial reject. +2088 if ( index===actorPos ) { +2089 return; +2090 } +2091 +2092 if ( index>=cl.length ) { +2093 cl.splice(actorPos,1); +2094 cl.push(actor); +2095 } else { +2096 var nActor= cl.splice(actorPos,1); +2097 if ( index<0 ) { +2098 index=0; +2099 } else if ( index>cl.length ) { +2100 index= cl.length; +2101 } +2102 +2103 //cl.splice( index, 1, nActor ); +2104 cl.splice( index, 0, nActor[0] ); +2105 } +2106 } +2107 } +2108 }; +2109 +2110 if ( CAAT.NO_PERF ) { +2111 CAAT.ActorContainer.prototype.paintActor= CAAT.ActorContainer.prototype.__paintActor; +2112 } +2113 +2114 extend( CAAT.ActorContainer, CAAT.Actor, null); 2115 -2116 -2117 (function() { +2116 })(); +2117 2118 -2119 /** -2120 * TextActor draws text on screen. The text can be drawn directly on screen or make if follow a -2121 * path defined by an instance of <code>CAAT.Path</code>. -2122 * -2123 * @constructor -2124 * @extends CAAT.ActorContainer -2125 * -2126 */ -2127 CAAT.TextActor = function() { -2128 CAAT.TextActor.superclass.constructor.call(this); -2129 this.font= "10px sans-serif"; -2130 this.textAlign= "left"; -2131 this.textBaseline= "top"; -2132 this.outlineColor= "black"; -2133 this.clip= false; -2134 -2135 return this; -2136 }; -2137 -2138 CAAT.TextActor.TRAVERSE_PATH_FORWARD= 1; -2139 CAAT.TextActor.TRAVERSE_PATH_BACKWARD= -1; -2140 -2141 CAAT.TextActor.prototype= { -2142 font: null, // a valid canvas rendering context font description. Default font -2143 // will be "10px sans-serif". -2144 textAlign: null, // a valid canvas rendering context textAlign string. Any of: -2145 // start, end, left, right, center. -2146 // defaults to "left". -2147 textBaseline: null, // a valid canvas rendering context textBaseLine string. Any of: -2148 // top, hanging, middle, alphabetic, ideographic, bottom. -2149 // defaults to "top". -2150 fill: true, // a boolean indicating whether the text should be filled. -2151 text: null, // a string with the text to draw. -2152 textWidth: 0, // an integer indicating text width in pixels. -2153 textHeight: 0, // an integer indicating text height in pixels. -2154 outline: false, // a boolean indicating whether the text should be outlined. -2155 // not all browsers support it. -2156 outlineColor: null, // a valid color description string. -2157 -2158 path: null, // a CAAT.Path which will be traversed by the text. [Optional] -2159 pathInterpolator: null, // a CAAT.Interpolator to apply to the path traversing. -2160 pathDuration: 10000, // an integer indicating the time to be taken to traverse the path. ms. -2161 sign: 1, // traverse the path forward or backwards. -2162 -2163 /** -2164 * Set the text to be filled. The default Filling style will be set by calling setFillStyle method. -2165 * Default value is true. -2166 * @param fill {boolean} a boolean indicating whether the text will be filled. -2167 * @return this; -2168 */ -2169 setFill : function( fill ) { -2170 this.fill= fill; -2171 return this; -2172 }, -2173 /** -2174 * Sets whether the text will be outlined. -2175 * @param outline {boolean} a boolean indicating whether the text will be outlined. -2176 * @return this; -2177 */ -2178 setOutline : function( outline ) { -2179 this.outline= outline; -2180 return this; -2181 }, -2182 setPathTraverseDirection : function(direction) { -2183 this.sign= direction; -2184 return this; -2185 }, -2186 /** -2187 * Defines text's outline color. -2188 * -2189 * @param color {string} sets a valid canvas context color. -2190 * @return this. -2191 */ -2192 setOutlineColor : function( color ) { -2193 this.outlineColor= color; -2194 return this; -2195 }, -2196 /** -2197 * Set the text to be shown by the actor. -2198 * @param sText a string with the text to be shwon. -2199 * @return this -2200 */ -2201 setText : function( sText ) { -2202 this.text= sText; -2203 this.setFont( this.font ); -2204 -2205 return this; -2206 }, -2207 setTextAlign : function( align ) { -2208 this.textAlign= align; -2209 return this; -2210 }, -2211 /** -2212 * Sets text alignment -2213 * @param align -2214 * @deprecated use setTextAlign -2215 */ -2216 setAlign : function( align ) { -2217 return this.setTextAlign(align); -2218 }, -2219 /** -2220 * Set text baseline. -2221 * @param baseline -2222 */ -2223 setTextBaseline : function( baseline ) { -2224 this.textBaseline= baseline; -2225 return this; -2226 -2227 }, -2228 setBaseline : function( baseline ) { -2229 return this.setTextBaseline(baseline); -2230 }, -2231 /** -2232 * Sets the font to be applied for the text. -2233 * @param font a string with a valid canvas rendering context font description. -2234 * @return this -2235 */ -2236 setFont : function(font) { -2237 -2238 if ( !font ) { -2239 return this; -2240 } -2241 -2242 this.font= font; +2119 (function() { +2120 +2121 /** +2122 * TextActor draws text on screen. The text can be drawn directly on screen or make if follow a +2123 * path defined by an instance of <code>CAAT.Path</code>. +2124 * +2125 * @constructor +2126 * @extends CAAT.ActorContainer +2127 * +2128 */ +2129 CAAT.TextActor = function() { +2130 CAAT.TextActor.superclass.constructor.call(this); +2131 this.font= "10px sans-serif"; +2132 this.textAlign= "left"; +2133 this.textBaseline= "top"; +2134 this.outlineColor= "black"; +2135 this.clip= false; +2136 +2137 return this; +2138 }; +2139 +2140 CAAT.TextActor.TRAVERSE_PATH_FORWARD= 1; +2141 CAAT.TextActor.TRAVERSE_PATH_BACKWARD= -1; +2142 +2143 CAAT.TextActor.prototype= { +2144 font: null, // a valid canvas rendering context font description. Default font +2145 // will be "10px sans-serif". +2146 textAlign: null, // a valid canvas rendering context textAlign string. Any of: +2147 // start, end, left, right, center. +2148 // defaults to "left". +2149 textBaseline: null, // a valid canvas rendering context textBaseLine string. Any of: +2150 // top, hanging, middle, alphabetic, ideographic, bottom. +2151 // defaults to "top". +2152 fill: true, // a boolean indicating whether the text should be filled. +2153 text: null, // a string with the text to draw. +2154 textWidth: 0, // an integer indicating text width in pixels. +2155 textHeight: 0, // an integer indicating text height in pixels. +2156 outline: false, // a boolean indicating whether the text should be outlined. +2157 // not all browsers support it. +2158 outlineColor: null, // a valid color description string. +2159 +2160 path: null, // a CAAT.Path which will be traversed by the text. [Optional] +2161 pathInterpolator: null, // a CAAT.Interpolator to apply to the path traversing. +2162 pathDuration: 10000, // an integer indicating the time to be taken to traverse the path. ms. +2163 sign: 1, // traverse the path forward or backwards. +2164 +2165 /** +2166 * Set the text to be filled. The default Filling style will be set by calling setFillStyle method. +2167 * Default value is true. +2168 * @param fill {boolean} a boolean indicating whether the text will be filled. +2169 * @return this; +2170 */ +2171 setFill : function( fill ) { +2172 this.fill= fill; +2173 return this; +2174 }, +2175 /** +2176 * Sets whether the text will be outlined. +2177 * @param outline {boolean} a boolean indicating whether the text will be outlined. +2178 * @return this; +2179 */ +2180 setOutline : function( outline ) { +2181 this.outline= outline; +2182 return this; +2183 }, +2184 setPathTraverseDirection : function(direction) { +2185 this.sign= direction; +2186 return this; +2187 }, +2188 /** +2189 * Defines text's outline color. +2190 * +2191 * @param color {string} sets a valid canvas context color. +2192 * @return this. +2193 */ +2194 setOutlineColor : function( color ) { +2195 this.outlineColor= color; +2196 return this; +2197 }, +2198 /** +2199 * Set the text to be shown by the actor. +2200 * @param sText a string with the text to be shwon. +2201 * @return this +2202 */ +2203 setText : function( sText ) { +2204 this.text= sText; +2205 this.setFont( this.font ); +2206 +2207 return this; +2208 }, +2209 setTextAlign : function( align ) { +2210 this.textAlign= align; +2211 return this; +2212 }, +2213 /** +2214 * Sets text alignment +2215 * @param align +2216 * @deprecated use setTextAlign +2217 */ +2218 setAlign : function( align ) { +2219 return this.setTextAlign(align); +2220 }, +2221 /** +2222 * Set text baseline. +2223 * @param baseline +2224 */ +2225 setTextBaseline : function( baseline ) { +2226 this.textBaseline= baseline; +2227 return this; +2228 +2229 }, +2230 setBaseline : function( baseline ) { +2231 return this.setTextBaseline(baseline); +2232 }, +2233 /** +2234 * Sets the font to be applied for the text. +2235 * @param font a string with a valid canvas rendering context font description. +2236 * @return this +2237 */ +2238 setFont : function(font) { +2239 +2240 if ( !font ) { +2241 return this; +2242 } 2243 -2244 if ( null===this.text || this.text==="" ) { -2245 this.width= this.height= 0; -2246 } -2247 -2248 return this; -2249 }, -2250 -2251 /** -2252 * Calculates the text dimension in pixels and stores the values in textWidth and textHeight -2253 * attributes. -2254 * If Actor's width and height were not set, the Actor's dimension will be set to these values. -2255 * @param director a CAAT.Director instance. -2256 * @return this -2257 */ -2258 calcTextSize : function(director) { -2259 -2260 if ( director.glEnabled ) { -2261 return this; -2262 } -2263 -2264 var ctx= director.ctx; +2244 this.font= font; +2245 +2246 if ( null===this.text || this.text==="" ) { +2247 this.width= this.height= 0; +2248 } +2249 +2250 return this; +2251 }, +2252 +2253 /** +2254 * Calculates the text dimension in pixels and stores the values in textWidth and textHeight +2255 * attributes. +2256 * If Actor's width and height were not set, the Actor's dimension will be set to these values. +2257 * @param director a CAAT.Director instance. +2258 * @return this +2259 */ +2260 calcTextSize : function(director) { +2261 +2262 if ( director.glEnabled ) { +2263 return this; +2264 } 2265 -2266 director.ctx.save(); -2267 director.ctx.font= this.font; -2268 -2269 this.textWidth= director.crc.measureText( this.text ).width; -2270 if (this.width===0) { -2271 this.width= this.textWidth; -2272 } -2273 -2274 try { -2275 var pos= this.font.indexOf("px"); -2276 var s = this.font.substring(0, pos ); -2277 this.textHeight= parseInt(s,10); -2278 -2279 // needed to calculate the descent. -2280 // no context.getDescent(font) WTF !!! -2281 this.textHeight+= (this.textHeight/4)>>0; -2282 } catch(e) { -2283 this.textHeight=20; // default height; -2284 } -2285 -2286 if ( this.height===0 ) { -2287 this.height= this.textHeight; -2288 } -2289 -2290 director.crc.restore(); +2266 var ctx= director.ctx; +2267 +2268 director.ctx.save(); +2269 director.ctx.font= this.font; +2270 +2271 this.textWidth= director.crc.measureText( this.text ).width; +2272 if (this.width===0) { +2273 this.width= this.textWidth; +2274 } +2275 +2276 try { +2277 var pos= this.font.indexOf("px"); +2278 var s = this.font.substring(0, pos ); +2279 this.textHeight= parseInt(s,10); +2280 +2281 // needed to calculate the descent. +2282 // no context.getDescent(font) WTF !!! +2283 this.textHeight+= (this.textHeight/4)>>0; +2284 } catch(e) { +2285 this.textHeight=20; // default height; +2286 } +2287 +2288 if ( this.height===0 ) { +2289 this.height= this.textHeight; +2290 } 2291 -2292 return this; -2293 }, -2294 /** -2295 * Custom paint method for TextActor instances. -2296 * If the path attribute is set, the text will be drawn traversing the path. -2297 * -2298 * @param director a valid CAAT.Director instance. -2299 * @param time an integer with the Scene time the Actor is being drawn. -2300 */ -2301 paint : function(director, time) { -2302 -2303 if ( this.backgroundImage ) { // cached -2304 CAAT.TextActor.superclass.paint.call(this, director, time ); -2305 } -2306 -2307 if ( null===this.text) { -2308 return; -2309 } -2310 -2311 if ( this.textWidth===0 || this.textHeight===0 ) { -2312 this.calcTextSize(director); -2313 } -2314 -2315 var canvas= director.crc; +2292 director.crc.restore(); +2293 +2294 return this; +2295 }, +2296 /** +2297 * Custom paint method for TextActor instances. +2298 * If the path attribute is set, the text will be drawn traversing the path. +2299 * +2300 * @param director a valid CAAT.Director instance. +2301 * @param time an integer with the Scene time the Actor is being drawn. +2302 */ +2303 paint : function(director, time) { +2304 +2305 if ( this.backgroundImage ) { // cached +2306 CAAT.TextActor.superclass.paint.call(this, director, time ); +2307 } +2308 +2309 if ( null===this.text) { +2310 return; +2311 } +2312 +2313 if ( this.textWidth===0 || this.textHeight===0 ) { +2314 this.calcTextSize(director); +2315 } 2316 -2317 if( null!==this.font ) { -2318 canvas.font= this.font; -2319 } -2320 if ( null!==this.textAlign ) { -2321 canvas.textAlign= this.textAlign; -2322 } -2323 if ( null!==this.textBaseline ) { -2324 canvas.textBaseline= this.textBaseline; -2325 } -2326 if ( null!==this.fillStyle ) { -2327 canvas.fillStyle= this.fillStyle; -2328 } -2329 -2330 if (null===this.path) { +2317 var canvas= director.crc; +2318 +2319 if( null!==this.font ) { +2320 canvas.font= this.font; +2321 } +2322 if ( null!==this.textAlign ) { +2323 canvas.textAlign= this.textAlign; +2324 } +2325 if ( null!==this.textBaseline ) { +2326 canvas.textBaseline= this.textBaseline; +2327 } +2328 if ( null!==this.fillStyle ) { +2329 canvas.fillStyle= this.fillStyle; +2330 } 2331 -2332 var tx=0; -2333 if ( this.textAlign==='center') { -2334 tx= (this.width/2)|0; -2335 } else if ( this.textAlign==='right' ) { -2336 tx= this.width; -2337 } -2338 -2339 if ( this.fill ) { -2340 canvas.fillText( this.text, tx, 0 ); -2341 if ( this.outline ) { -2342 -2343 // firefox necesita beginPath, si no, dibujara ademas el cuadrado del -2344 // contenedor de los textos. -2345 if ( null!==this.outlineColor ) { -2346 canvas.strokeStyle= this.outlineColor; -2347 } -2348 canvas.beginPath(); -2349 canvas.strokeText( this.text, tx, 0 ); -2350 } -2351 } else { -2352 if ( null!==this.outlineColor ) { -2353 canvas.strokeStyle= this.outlineColor; -2354 } -2355 canvas.beginPath(); -2356 canvas.strokeText( this.text, tx, 0 ); -2357 } -2358 } -2359 else { -2360 this.drawOnPath(director,time); -2361 } -2362 }, -2363 /** -2364 * Private. -2365 * Draw the text traversing a path. -2366 * @param director a valid CAAT.Director instance. -2367 * @param time an integer with the Scene time the Actor is being drawn. -2368 */ -2369 drawOnPath : function(director, time) { -2370 -2371 var canvas= director.crc; +2332 if (null===this.path) { +2333 +2334 var tx=0; +2335 if ( this.textAlign==='center') { +2336 tx= (this.width/2)|0; +2337 } else if ( this.textAlign==='right' ) { +2338 tx= this.width; +2339 } +2340 +2341 if ( this.fill ) { +2342 canvas.fillText( this.text, tx, 0 ); +2343 if ( this.outline ) { +2344 +2345 // firefox necesita beginPath, si no, dibujara ademas el cuadrado del +2346 // contenedor de los textos. +2347 if ( null!==this.outlineColor ) { +2348 canvas.strokeStyle= this.outlineColor; +2349 } +2350 canvas.beginPath(); +2351 canvas.strokeText( this.text, tx, 0 ); +2352 } +2353 } else { +2354 if ( null!==this.outlineColor ) { +2355 canvas.strokeStyle= this.outlineColor; +2356 } +2357 canvas.beginPath(); +2358 canvas.strokeText( this.text, tx, 0 ); +2359 } +2360 } +2361 else { +2362 this.drawOnPath(director,time); +2363 } +2364 }, +2365 /** +2366 * Private. +2367 * Draw the text traversing a path. +2368 * @param director a valid CAAT.Director instance. +2369 * @param time an integer with the Scene time the Actor is being drawn. +2370 */ +2371 drawOnPath : function(director, time) { 2372 -2373 var textWidth=this.sign * this.pathInterpolator.getPosition( -2374 (time%this.pathDuration)/this.pathDuration ).y * this.path.getLength() ; -2375 var p0= new CAAT.Point(0,0,0); -2376 var p1= new CAAT.Point(0,0,0); -2377 -2378 for( var i=0; i<this.text.length; i++ ) { -2379 var caracter= this.text[i].toString(); -2380 var charWidth= canvas.measureText( caracter ).width; -2381 -2382 var pathLength= this.path.getLength(); +2373 var canvas= director.crc; +2374 +2375 var textWidth=this.sign * this.pathInterpolator.getPosition( +2376 (time%this.pathDuration)/this.pathDuration ).y * this.path.getLength() ; +2377 var p0= new CAAT.Point(0,0,0); +2378 var p1= new CAAT.Point(0,0,0); +2379 +2380 for( var i=0; i<this.text.length; i++ ) { +2381 var caracter= this.text[i].toString(); +2382 var charWidth= canvas.measureText( caracter ).width; 2383 -2384 var currentCurveLength= charWidth/2 + textWidth; +2384 var pathLength= this.path.getLength(); 2385 -2386 p0= this.path.getPositionFromLength(currentCurveLength).clone(); -2387 p1= this.path.getPositionFromLength(currentCurveLength-0.1).clone(); -2388 -2389 var angle= Math.atan2( p0.y-p1.y, p0.x-p1.x ); +2386 var currentCurveLength= charWidth/2 + textWidth; +2387 +2388 p0= this.path.getPositionFromLength(currentCurveLength).clone(); +2389 p1= this.path.getPositionFromLength(currentCurveLength-0.1).clone(); 2390 -2391 canvas.save(); +2391 var angle= Math.atan2( p0.y-p1.y, p0.x-p1.x ); 2392 -2393 canvas.translate( (0.5+p0.x)|0, (0.5+p0.y)|0 ); -2394 canvas.rotate( angle ); -2395 if ( this.fill ) { -2396 canvas.fillText(caracter,0,0); -2397 } -2398 if ( this.outline ) { -2399 canvas.strokeStyle= this.outlineColor; -2400 canvas.strokeText(caracter,0,0); -2401 } -2402 -2403 canvas.restore(); +2393 canvas.save(); +2394 +2395 canvas.translate( (0.5+p0.x)|0, (0.5+p0.y)|0 ); +2396 canvas.rotate( angle ); +2397 if ( this.fill ) { +2398 canvas.fillText(caracter,0,0); +2399 } +2400 if ( this.outline ) { +2401 canvas.strokeStyle= this.outlineColor; +2402 canvas.strokeText(caracter,0,0); +2403 } 2404 -2405 textWidth+= charWidth; -2406 } -2407 }, -2408 /** -2409 * Set the path, interpolator and duration to draw the text on. -2410 * @param path a valid CAAT.Path instance. -2411 * @param interpolator a CAAT.Interpolator object. If not set, a Linear Interpolator will be used. -2412 * @param duration an integer indicating the time to take to traverse the path. Optional. 10000 ms -2413 * by default. -2414 */ -2415 setPath : function( path, interpolator, duration ) { -2416 this.path= path; -2417 this.pathInterpolator= interpolator || new CAAT.Interpolator().createLinearInterpolator(); -2418 this.pathDuration= duration || 10000; -2419 -2420 /* -2421 parent could not be set by the time this method is called. -2422 so the actors bounds set is removed. -2423 the developer must ensure to call setbounds properly on actor. -2424 */ -2425 this.mouseEnabled= false; -2426 -2427 return this; -2428 } -2429 }; -2430 -2431 extend( CAAT.TextActor, CAAT.ActorContainer, null); -2432 })(); -2433 -2434 (function() { +2405 canvas.restore(); +2406 +2407 textWidth+= charWidth; +2408 } +2409 }, +2410 /** +2411 * Set the path, interpolator and duration to draw the text on. +2412 * @param path a valid CAAT.Path instance. +2413 * @param interpolator a CAAT.Interpolator object. If not set, a Linear Interpolator will be used. +2414 * @param duration an integer indicating the time to take to traverse the path. Optional. 10000 ms +2415 * by default. +2416 */ +2417 setPath : function( path, interpolator, duration ) { +2418 this.path= path; +2419 this.pathInterpolator= interpolator || new CAAT.Interpolator().createLinearInterpolator(); +2420 this.pathDuration= duration || 10000; +2421 +2422 /* +2423 parent could not be set by the time this method is called. +2424 so the actors bounds set is removed. +2425 the developer must ensure to call setbounds properly on actor. +2426 */ +2427 this.mouseEnabled= false; +2428 +2429 return this; +2430 } +2431 }; +2432 +2433 extend( CAAT.TextActor, CAAT.ActorContainer, null); +2434 })(); 2435 -2436 /** -2437 * This Actor draws common shapes, concretely Circles and rectangles. -2438 * -2439 * @constructor -2440 * @extends CAAT.ActorContainer -2441 */ -2442 CAAT.ShapeActor = function() { -2443 CAAT.ShapeActor.superclass.constructor.call(this); -2444 this.compositeOp= 'source-over'; -2445 -2446 /** -2447 * Thanks Svend Dutz and Thomas Karolski for noticing this call was not performed by default, -2448 * so if no explicit call to setShape was made, nothing would be drawn. -2449 */ -2450 this.setShape( this.SHAPE_CIRCLE ); -2451 return this; -2452 }; -2453 -2454 CAAT.ShapeActor.prototype= { +2436 (function() { +2437 +2438 /** +2439 * This Actor draws common shapes, concretely Circles and rectangles. +2440 * +2441 * @constructor +2442 * @extends CAAT.ActorContainer +2443 */ +2444 CAAT.ShapeActor = function() { +2445 CAAT.ShapeActor.superclass.constructor.call(this); +2446 this.compositeOp= 'source-over'; +2447 +2448 /** +2449 * Thanks Svend Dutz and Thomas Karolski for noticing this call was not performed by default, +2450 * so if no explicit call to setShape was made, nothing would be drawn. +2451 */ +2452 this.setShape( this.SHAPE_CIRCLE ); +2453 return this; +2454 }; 2455 -2456 shape: 0, // shape type. One of the constant SHAPE_* values -2457 compositeOp: null, // a valid canvas rendering context string describing compositeOps. -2458 lineWidth: 1, -2459 lineCap: null, -2460 lineJoin: null, -2461 miterLimit: null, -2462 -2463 SHAPE_CIRCLE: 0, // Constants to describe different shapes. -2464 SHAPE_RECTANGLE:1, -2465 -2466 /** -2467 * -2468 * @param l {number>0} -2469 */ -2470 setLineWidth : function(l) { -2471 this.lineWidth= l; -2472 return this; -2473 }, -2474 /** -2475 * -2476 * @param lc {string{butt|round|square}} -2477 */ -2478 setLineCap : function(lc) { -2479 this.lineCap= lc; -2480 return this; -2481 }, -2482 /** -2483 * -2484 * @param lj {string{bevel|round|miter}} -2485 */ -2486 setLineJoin : function(lj) { -2487 this.lineJoin= lj; -2488 return this; -2489 }, -2490 /** -2491 * -2492 * @param ml {integer>0} -2493 */ -2494 setMiterLimit : function(ml) { -2495 this.miterLimit= ml; -2496 return this; -2497 }, -2498 getLineCap : function() { -2499 return this.lineCap; -2500 }, -2501 getLineJoin : function() { -2502 return this.lineJoin; -2503 }, -2504 getMiterLimit : function() { -2505 return this.miterLimit; -2506 }, -2507 getLineWidth : function() { -2508 return this.lineWidth; -2509 }, -2510 /** -2511 * Sets shape type. -2512 * No check for parameter validity is performed. -2513 * Set paint method according to the shape. -2514 * @param iShape an integer with any of the SHAPE_* constants. -2515 * @return this -2516 */ -2517 setShape : function(iShape) { -2518 this.shape= iShape; -2519 this.paint= this.shape===this.SHAPE_CIRCLE ? -2520 this.paintCircle : -2521 this.paintRectangle; -2522 return this; -2523 }, -2524 /** -2525 * Sets the composite operation to apply on shape drawing. -2526 * @param compositeOp an string with a valid canvas rendering context string describing compositeOps. -2527 * @return this -2528 */ -2529 setCompositeOp : function(compositeOp){ -2530 this.compositeOp= compositeOp; -2531 return this; -2532 }, -2533 /** -2534 * Draws the shape. -2535 * Applies the values of fillStype, strokeStyle, compositeOp, etc. -2536 * -2537 * @param director a valid CAAT.Director instance. -2538 * @param time an integer with the Scene time the Actor is being drawn. -2539 */ -2540 paint : function(director,time) { -2541 }, -2542 /** -2543 * @private -2544 * Draws a circle. -2545 * @param director a valid CAAT.Director instance. -2546 * @param time an integer with the Scene time the Actor is being drawn. -2547 */ -2548 paintCircle : function(director,time) { -2549 var ctx= director.crc; -2550 -2551 ctx.lineWidth= this.lineWidth; +2456 CAAT.ShapeActor.prototype= { +2457 +2458 shape: 0, // shape type. One of the constant SHAPE_* values +2459 compositeOp: null, // a valid canvas rendering context string describing compositeOps. +2460 lineWidth: 1, +2461 lineCap: null, +2462 lineJoin: null, +2463 miterLimit: null, +2464 +2465 SHAPE_CIRCLE: 0, // Constants to describe different shapes. +2466 SHAPE_RECTANGLE:1, +2467 +2468 /** +2469 * +2470 * @param l {number>0} +2471 */ +2472 setLineWidth : function(l) { +2473 this.lineWidth= l; +2474 return this; +2475 }, +2476 /** +2477 * +2478 * @param lc {string{butt|round|square}} +2479 */ +2480 setLineCap : function(lc) { +2481 this.lineCap= lc; +2482 return this; +2483 }, +2484 /** +2485 * +2486 * @param lj {string{bevel|round|miter}} +2487 */ +2488 setLineJoin : function(lj) { +2489 this.lineJoin= lj; +2490 return this; +2491 }, +2492 /** +2493 * +2494 * @param ml {integer>0} +2495 */ +2496 setMiterLimit : function(ml) { +2497 this.miterLimit= ml; +2498 return this; +2499 }, +2500 getLineCap : function() { +2501 return this.lineCap; +2502 }, +2503 getLineJoin : function() { +2504 return this.lineJoin; +2505 }, +2506 getMiterLimit : function() { +2507 return this.miterLimit; +2508 }, +2509 getLineWidth : function() { +2510 return this.lineWidth; +2511 }, +2512 /** +2513 * Sets shape type. +2514 * No check for parameter validity is performed. +2515 * Set paint method according to the shape. +2516 * @param iShape an integer with any of the SHAPE_* constants. +2517 * @return this +2518 */ +2519 setShape : function(iShape) { +2520 this.shape= iShape; +2521 this.paint= this.shape===this.SHAPE_CIRCLE ? +2522 this.paintCircle : +2523 this.paintRectangle; +2524 return this; +2525 }, +2526 /** +2527 * Sets the composite operation to apply on shape drawing. +2528 * @param compositeOp an string with a valid canvas rendering context string describing compositeOps. +2529 * @return this +2530 */ +2531 setCompositeOp : function(compositeOp){ +2532 this.compositeOp= compositeOp; +2533 return this; +2534 }, +2535 /** +2536 * Draws the shape. +2537 * Applies the values of fillStype, strokeStyle, compositeOp, etc. +2538 * +2539 * @param director a valid CAAT.Director instance. +2540 * @param time an integer with the Scene time the Actor is being drawn. +2541 */ +2542 paint : function(director,time) { +2543 }, +2544 /** +2545 * @private +2546 * Draws a circle. +2547 * @param director a valid CAAT.Director instance. +2548 * @param time an integer with the Scene time the Actor is being drawn. +2549 */ +2550 paintCircle : function(director,time) { +2551 var ctx= director.crc; 2552 -2553 ctx.globalCompositeOperation= this.compositeOp; -2554 if ( null!==this.fillStyle ) { -2555 ctx.fillStyle= this.fillStyle; -2556 ctx.beginPath(); -2557 ctx.arc( this.width/2, this.height/2, Math.min(this.width,this.height)/2, 0, 2*Math.PI, false ); -2558 ctx.fill(); -2559 } -2560 -2561 if ( null!==this.strokeStyle ) { -2562 ctx.strokeStyle= this.strokeStyle; -2563 ctx.beginPath(); -2564 ctx.arc( this.width/2, this.height/2, Math.min(this.width,this.height)/2, 0, 2*Math.PI, false ); -2565 ctx.stroke(); -2566 } -2567 }, -2568 /** -2569 * -2570 * Private -2571 * Draws a Rectangle. -2572 * -2573 * @param director a valid CAAT.Director instance. -2574 * @param time an integer with the Scene time the Actor is being drawn. -2575 */ -2576 paintRectangle : function(director,time) { -2577 var ctx= director.crc; -2578 -2579 ctx.lineWidth= this.lineWidth; +2553 ctx.lineWidth= this.lineWidth; +2554 +2555 ctx.globalCompositeOperation= this.compositeOp; +2556 if ( null!==this.fillStyle ) { +2557 ctx.fillStyle= this.fillStyle; +2558 ctx.beginPath(); +2559 ctx.arc( this.width/2, this.height/2, Math.min(this.width,this.height)/2, 0, 2*Math.PI, false ); +2560 ctx.fill(); +2561 } +2562 +2563 if ( null!==this.strokeStyle ) { +2564 ctx.strokeStyle= this.strokeStyle; +2565 ctx.beginPath(); +2566 ctx.arc( this.width/2, this.height/2, Math.min(this.width,this.height)/2, 0, 2*Math.PI, false ); +2567 ctx.stroke(); +2568 } +2569 }, +2570 /** +2571 * +2572 * Private +2573 * Draws a Rectangle. +2574 * +2575 * @param director a valid CAAT.Director instance. +2576 * @param time an integer with the Scene time the Actor is being drawn. +2577 */ +2578 paintRectangle : function(director,time) { +2579 var ctx= director.crc; 2580 -2581 if ( this.lineCap ) { -2582 ctx.lineCap= this.lineCap; -2583 } -2584 if ( this.lineJoin ) { -2585 ctx.lineJoin= this.lineJoin; -2586 } -2587 if ( this.miterLimit ) { -2588 ctx.miterLimit= this.miterLimit; -2589 } -2590 -2591 ctx.globalCompositeOperation= this.compositeOp; -2592 if ( null!==this.fillStyle ) { -2593 ctx.fillStyle= this.fillStyle; -2594 ctx.beginPath(); -2595 ctx.fillRect(0,0,this.width,this.height); -2596 ctx.fill(); -2597 } -2598 -2599 if ( null!==this.strokeStyle ) { -2600 ctx.strokeStyle= this.strokeStyle; -2601 ctx.beginPath(); -2602 ctx.strokeRect(0,0,this.width,this.height); -2603 ctx.stroke(); -2604 } -2605 } -2606 }; -2607 -2608 extend( CAAT.ShapeActor, CAAT.ActorContainer, null); -2609 })(); -2610 -2611 (function() { +2581 ctx.lineWidth= this.lineWidth; +2582 +2583 if ( this.lineCap ) { +2584 ctx.lineCap= this.lineCap; +2585 } +2586 if ( this.lineJoin ) { +2587 ctx.lineJoin= this.lineJoin; +2588 } +2589 if ( this.miterLimit ) { +2590 ctx.miterLimit= this.miterLimit; +2591 } +2592 +2593 ctx.globalCompositeOperation= this.compositeOp; +2594 if ( null!==this.fillStyle ) { +2595 ctx.fillStyle= this.fillStyle; +2596 ctx.beginPath(); +2597 ctx.fillRect(0,0,this.width,this.height); +2598 ctx.fill(); +2599 } +2600 +2601 if ( null!==this.strokeStyle ) { +2602 ctx.strokeStyle= this.strokeStyle; +2603 ctx.beginPath(); +2604 ctx.strokeRect(0,0,this.width,this.height); +2605 ctx.stroke(); +2606 } +2607 } +2608 }; +2609 +2610 extend( CAAT.ShapeActor, CAAT.ActorContainer, null); +2611 })(); 2612 -2613 /** -2614 * This actor draws stars. -2615 * -2616 * @constructor -2617 * @extends CAAT.ActorContainer -2618 */ -2619 CAAT.StarActor= function() { -2620 CAAT.StarActor.superclass.constructor.call(this); -2621 this.compositeOp= 'source-over'; -2622 return this; -2623 }; -2624 -2625 CAAT.StarActor.prototype= { -2626 nPeaks: 0, -2627 maxRadius: 0, -2628 minRadius: 0, -2629 initialAngle: 0, -2630 compositeOp: null, -2631 lineWidth: 1, -2632 lineCap: null, -2633 lineJoin: null, -2634 miterLimit: null, -2635 -2636 /** -2637 * -2638 * @param l {number>0} -2639 */ -2640 setLineWidth : function(l) { -2641 this.lineWidth= l; -2642 return this; -2643 }, -2644 /** -2645 * -2646 * @param lc {string{butt|round|square}} -2647 */ -2648 setLineCap : function(lc) { -2649 this.lineCap= lc; -2650 return this; -2651 }, -2652 /** -2653 * -2654 * @param lj {string{bevel|round|miter}} -2655 */ -2656 setLineJoin : function(lj) { -2657 this.lineJoin= lj; -2658 return this; -2659 }, -2660 /** -2661 * -2662 * @param ml {integer>0} -2663 */ -2664 setMiterLimit : function(ml) { -2665 this.miterLimit= ml; -2666 return this; -2667 }, -2668 getLineCap : function() { -2669 return this.lineCap; -2670 }, -2671 getLineJoin : function() { -2672 return this.lineJoin; -2673 }, -2674 getMiterLimit : function() { -2675 return this.miterLimit; -2676 }, -2677 getLineWidth : function() { -2678 return this.lineWidth; -2679 }, -2680 /** -2681 * Sets whether the star will be color filled. -2682 * @param filled {boolean} -2683 * @deprecated -2684 */ -2685 setFilled : function( filled ) { -2686 return this; -2687 }, -2688 /** -2689 * Sets whether the star will be outlined. -2690 * @param outlined {boolean} -2691 * @deprecated -2692 */ -2693 setOutlined : function( outlined ) { -2694 return this; -2695 }, -2696 /** -2697 * Sets the composite operation to apply on shape drawing. -2698 * @param compositeOp an string with a valid canvas rendering context string describing compositeOps. -2699 * @return this -2700 */ -2701 setCompositeOp : function(compositeOp){ -2702 this.compositeOp= compositeOp; -2703 return this; -2704 }, -2705 /** -2706 * -2707 * @param angle {number} number in radians. -2708 */ -2709 setInitialAngle : function(angle) { -2710 this.initialAngle= angle; -2711 return this; -2712 }, -2713 /** -2714 * Initialize the star values. -2715 * <p> -2716 * The star actor will be of size 2*maxRadius. -2717 * -2718 * @param nPeaks {number} number of star points. -2719 * @param maxRadius {number} maximum star radius -2720 * @param minRadius {number} minimum star radius -2721 * -2722 * @return this -2723 */ -2724 initialize : function(nPeaks, maxRadius, minRadius) { -2725 this.setSize( 2*maxRadius, 2*maxRadius ); -2726 -2727 this.nPeaks= nPeaks; -2728 this.maxRadius= maxRadius; -2729 this.minRadius= minRadius; -2730 -2731 return this; -2732 }, -2733 /** -2734 * Paint the star. -2735 * -2736 * @param director {CAAT.Director} -2737 * @param timer {number} -2738 */ -2739 paint : function(director, timer) { -2740 -2741 var ctx= director.ctx; -2742 var centerX= this.width/2; -2743 var centerY= this.height/2; -2744 var r1= this.maxRadius; -2745 var r2= this.minRadius; -2746 var ix= centerX + r1*Math.cos(this.initialAngle); -2747 var iy= centerY + r1*Math.sin(this.initialAngle); -2748 -2749 ctx.lineWidth= this.lineWidth; -2750 if ( this.lineCap ) { -2751 ctx.lineCap= this.lineCap; -2752 } -2753 if ( this.lineJoin ) { -2754 ctx.lineJoin= this.lineJoin; -2755 } -2756 if ( this.miterLimit ) { -2757 ctx.miterLimit= this.miterLimit; -2758 } -2759 -2760 ctx.globalCompositeOperation= this.compositeOp; +2613 (function() { +2614 +2615 /** +2616 * This actor draws stars. +2617 * +2618 * @constructor +2619 * @extends CAAT.ActorContainer +2620 */ +2621 CAAT.StarActor= function() { +2622 CAAT.StarActor.superclass.constructor.call(this); +2623 this.compositeOp= 'source-over'; +2624 return this; +2625 }; +2626 +2627 CAAT.StarActor.prototype= { +2628 nPeaks: 0, +2629 maxRadius: 0, +2630 minRadius: 0, +2631 initialAngle: 0, +2632 compositeOp: null, +2633 lineWidth: 1, +2634 lineCap: null, +2635 lineJoin: null, +2636 miterLimit: null, +2637 +2638 /** +2639 * +2640 * @param l {number>0} +2641 */ +2642 setLineWidth : function(l) { +2643 this.lineWidth= l; +2644 return this; +2645 }, +2646 /** +2647 * +2648 * @param lc {string{butt|round|square}} +2649 */ +2650 setLineCap : function(lc) { +2651 this.lineCap= lc; +2652 return this; +2653 }, +2654 /** +2655 * +2656 * @param lj {string{bevel|round|miter}} +2657 */ +2658 setLineJoin : function(lj) { +2659 this.lineJoin= lj; +2660 return this; +2661 }, +2662 /** +2663 * +2664 * @param ml {integer>0} +2665 */ +2666 setMiterLimit : function(ml) { +2667 this.miterLimit= ml; +2668 return this; +2669 }, +2670 getLineCap : function() { +2671 return this.lineCap; +2672 }, +2673 getLineJoin : function() { +2674 return this.lineJoin; +2675 }, +2676 getMiterLimit : function() { +2677 return this.miterLimit; +2678 }, +2679 getLineWidth : function() { +2680 return this.lineWidth; +2681 }, +2682 /** +2683 * Sets whether the star will be color filled. +2684 * @param filled {boolean} +2685 * @deprecated +2686 */ +2687 setFilled : function( filled ) { +2688 return this; +2689 }, +2690 /** +2691 * Sets whether the star will be outlined. +2692 * @param outlined {boolean} +2693 * @deprecated +2694 */ +2695 setOutlined : function( outlined ) { +2696 return this; +2697 }, +2698 /** +2699 * Sets the composite operation to apply on shape drawing. +2700 * @param compositeOp an string with a valid canvas rendering context string describing compositeOps. +2701 * @return this +2702 */ +2703 setCompositeOp : function(compositeOp){ +2704 this.compositeOp= compositeOp; +2705 return this; +2706 }, +2707 /** +2708 * +2709 * @param angle {number} number in radians. +2710 */ +2711 setInitialAngle : function(angle) { +2712 this.initialAngle= angle; +2713 return this; +2714 }, +2715 /** +2716 * Initialize the star values. +2717 * <p> +2718 * The star actor will be of size 2*maxRadius. +2719 * +2720 * @param nPeaks {number} number of star points. +2721 * @param maxRadius {number} maximum star radius +2722 * @param minRadius {number} minimum star radius +2723 * +2724 * @return this +2725 */ +2726 initialize : function(nPeaks, maxRadius, minRadius) { +2727 this.setSize( 2*maxRadius, 2*maxRadius ); +2728 +2729 this.nPeaks= nPeaks; +2730 this.maxRadius= maxRadius; +2731 this.minRadius= minRadius; +2732 +2733 return this; +2734 }, +2735 /** +2736 * Paint the star. +2737 * +2738 * @param director {CAAT.Director} +2739 * @param timer {number} +2740 */ +2741 paint : function(director, timer) { +2742 +2743 var ctx= director.ctx; +2744 var centerX= this.width/2; +2745 var centerY= this.height/2; +2746 var r1= this.maxRadius; +2747 var r2= this.minRadius; +2748 var ix= centerX + r1*Math.cos(this.initialAngle); +2749 var iy= centerY + r1*Math.sin(this.initialAngle); +2750 +2751 ctx.lineWidth= this.lineWidth; +2752 if ( this.lineCap ) { +2753 ctx.lineCap= this.lineCap; +2754 } +2755 if ( this.lineJoin ) { +2756 ctx.lineJoin= this.lineJoin; +2757 } +2758 if ( this.miterLimit ) { +2759 ctx.miterLimit= this.miterLimit; +2760 } 2761 -2762 ctx.beginPath(); -2763 ctx.moveTo(ix,iy); -2764 -2765 for( var i=1; i<this.nPeaks*2; i++ ) { -2766 var angleStar= Math.PI/this.nPeaks * i + this.initialAngle; -2767 var rr= (i%2===0) ? r1 : r2; -2768 var x= centerX + rr*Math.cos(angleStar); -2769 var y= centerY + rr*Math.sin(angleStar); -2770 ctx.lineTo(x,y); -2771 } -2772 -2773 ctx.lineTo( -2774 centerX + r1*Math.cos(this.initialAngle), -2775 centerY + r1*Math.sin(this.initialAngle) ); -2776 -2777 ctx.closePath(); -2778 -2779 if ( this.fillStyle ) { -2780 ctx.fillStyle= this.fillStyle; -2781 ctx.fill(); -2782 } -2783 -2784 if ( this.strokeStyle ) { -2785 ctx.strokeStyle= this.strokeStyle; -2786 ctx.stroke(); -2787 } -2788 -2789 } -2790 }; -2791 -2792 extend(CAAT.StarActor, CAAT.ActorContainer, null); +2762 ctx.globalCompositeOperation= this.compositeOp; +2763 +2764 ctx.beginPath(); +2765 ctx.moveTo(ix,iy); +2766 +2767 for( var i=1; i<this.nPeaks*2; i++ ) { +2768 var angleStar= Math.PI/this.nPeaks * i + this.initialAngle; +2769 var rr= (i%2===0) ? r1 : r2; +2770 var x= centerX + rr*Math.cos(angleStar); +2771 var y= centerY + rr*Math.sin(angleStar); +2772 ctx.lineTo(x,y); +2773 } +2774 +2775 ctx.lineTo( +2776 centerX + r1*Math.cos(this.initialAngle), +2777 centerY + r1*Math.sin(this.initialAngle) ); +2778 +2779 ctx.closePath(); +2780 +2781 if ( this.fillStyle ) { +2782 ctx.fillStyle= this.fillStyle; +2783 ctx.fill(); +2784 } +2785 +2786 if ( this.strokeStyle ) { +2787 ctx.strokeStyle= this.strokeStyle; +2788 ctx.stroke(); +2789 } +2790 +2791 } +2792 }; 2793 -2794 })(); +2794 extend(CAAT.StarActor, CAAT.ActorContainer, null); 2795 -2796 /** -2797 * An actor suitable to draw an ImageProcessor instance. -2798 */ -2799 (function() { -2800 -2801 /** -2802 * This Actor will show the result of an image processing operation. -2803 * -2804 * @constructor -2805 * @extends CAAT.ActorContainer -2806 */ -2807 CAAT.IMActor= function() { -2808 CAAT.IMActor.superclass.constructor.call(this); -2809 return this; -2810 }; -2811 -2812 CAAT.IMActor.prototype= { +2796 })(); +2797 +2798 /** +2799 * An actor suitable to draw an ImageProcessor instance. +2800 */ +2801 (function() { +2802 +2803 /** +2804 * This Actor will show the result of an image processing operation. +2805 * +2806 * @constructor +2807 * @extends CAAT.ActorContainer +2808 */ +2809 CAAT.IMActor= function() { +2810 CAAT.IMActor.superclass.constructor.call(this); +2811 return this; +2812 }; 2813 -2814 imageProcessor: null, -2815 changeTime: 100, -2816 lastApplicationTime: -1, -2817 -2818 /** -2819 * Set the image processor. -2820 * -2821 * @param im {CAAT.ImageProcessor} a CAAT.ImageProcessor instance. -2822 */ -2823 setImageProcessor : function(im) { -2824 this.imageProcessor= im; -2825 return this; -2826 }, -2827 /** -2828 * Call image processor to update image every time milliseconds. -2829 * @param time an integer indicating milliseconds to elapse before updating the frame. -2830 */ -2831 setImageProcessingTime : function( time ) { -2832 this.changeTime= time; -2833 return this; -2834 }, -2835 paint : function( director, time ) { -2836 if ( time-this.lastApplicationTime>this.changeTime ) { -2837 this.imageProcessor.apply( director, time ); -2838 this.lastApplicationTime= time; -2839 } -2840 -2841 var ctx= director.ctx; -2842 this.imageProcessor.paint( director, time ); -2843 } -2844 }; -2845 -2846 extend( CAAT.IMActor, CAAT.ActorContainer, null); -2847 })(); \ No newline at end of file +2814 CAAT.IMActor.prototype= { +2815 +2816 imageProcessor: null, +2817 changeTime: 100, +2818 lastApplicationTime: -1, +2819 +2820 /** +2821 * Set the image processor. +2822 * +2823 * @param im {CAAT.ImageProcessor} a CAAT.ImageProcessor instance. +2824 */ +2825 setImageProcessor : function(im) { +2826 this.imageProcessor= im; +2827 return this; +2828 }, +2829 /** +2830 * Call image processor to update image every time milliseconds. +2831 * @param time an integer indicating milliseconds to elapse before updating the frame. +2832 */ +2833 setImageProcessingTime : function( time ) { +2834 this.changeTime= time; +2835 return this; +2836 }, +2837 paint : function( director, time ) { +2838 if ( time-this.lastApplicationTime>this.changeTime ) { +2839 this.imageProcessor.apply( director, time ); +2840 this.lastApplicationTime= time; +2841 } +2842 +2843 var ctx= director.ctx; +2844 this.imageProcessor.paint( director, time ); +2845 } +2846 }; +2847 +2848 extend( CAAT.IMActor, CAAT.ActorContainer, null); +2849 })(); \ No newline at end of file diff --git a/documentation/jsdoc/symbols/src/_Users_ibon_js_CAAT_src_path_path.js.html b/documentation/jsdoc/symbols/src/_Users_ibon_js_CAAT_src_path_path.js.html index bbd2e76a..31ca3cda 100644 --- a/documentation/jsdoc/symbols/src/_Users_ibon_js_CAAT_src_path_path.js.html +++ b/documentation/jsdoc/symbols/src/_Users_ibon_js_CAAT_src_path_path.js.html @@ -150,7 +150,7 @@ 143 * 144 * @param ctx {RenderingContext2D} 145 */ -146 applyAsPath : function(ctx) {}, +146 applyAsPath : function(director) {}, 147 148 /** 149 * Transform this path with the given affinetransform matrix. @@ -184,8 +184,8 @@ 177 points: null, 178 newPosition: null, // spare holder for getPosition coordinate return. 179 -180 applyAsPath : function(ctx) { -181 ctx.lineTo( this.points[0].x, this.points[1].y ); +180 applyAsPath : function(director) { +181 director.ctx.lineTo( this.points[0].x, this.points[1].y ); 182 }, 183 setPoint : function( point, index ) { 184 if ( index===0 ) { @@ -371,8 +371,8 @@ 364 curve: null, // a CAAT.Bezier instance. 365 newPosition: null, // spare holder for getPosition coordinate return. 366 -367 applyAsPath : function(ctx) { -368 this.curve.applyAsPath(ctx); +367 applyAsPath : function(director, ctx) { +368 this.curve.applyAsPath(director, ctx); 369 return this; 370 }, 371 setPoint : function( point, index ) { @@ -557,1143 +557,1167 @@ 550 bbox: null, 551 newPosition: null, // spare point for calculations 552 -553 applyAsPath : function(ctx) { -554 //ctx.rect( this.bbox.x, this.bbox.y, this.bbox.width, this.bbox.height ); -555 if ( this.cw ) { -556 ctx.lineTo( this.points[0].x, this.points[0].y ); -557 ctx.lineTo( this.points[1].x, this.points[1].y ); -558 ctx.lineTo( this.points[2].x, this.points[2].y ); -559 ctx.lineTo( this.points[3].x, this.points[3].y ); -560 ctx.lineTo( this.points[4].x, this.points[4].y ); -561 } else { -562 ctx.lineTo( this.points[4].x, this.points[4].y ); -563 ctx.lineTo( this.points[3].x, this.points[3].y ); -564 ctx.lineTo( this.points[2].x, this.points[2].y ); -565 ctx.lineTo( this.points[1].x, this.points[1].y ); -566 ctx.lineTo( this.points[0].x, this.points[0].y ); -567 } -568 return this; -569 }, -570 setPoint : function( point, index ) { -571 if ( index>=0 && index<this.points.length ) { -572 this.points[index]= point; -573 } -574 }, -575 /** -576 * An array of {CAAT.Point} composed of two points. -577 * @param points {Array<CAAT.Point>} -578 */ -579 setPoints : function( points ) { -580 this.points= []; -581 this.points.push( points[0] ); -582 this.points.push( new CAAT.Point().set(points[1].x, points[0].y) ); -583 this.points.push( points[1] ); -584 this.points.push( new CAAT.Point().set(points[0].x, points[1].y) ); -585 this.points.push( points[0].clone() ); -586 this.updatePath(); -587 -588 return this; -589 }, -590 setClockWise : function(cw) { -591 this.cw= cw!==undefined ? cw : true; -592 return this; -593 }, -594 isClockWise : function() { -595 return this.cw; -596 }, -597 /** -598 * Set this path segment's starting position. -599 * This method should not be called again after setFinalPosition has been called. -600 * @param x {number} -601 * @param y {number} -602 */ -603 setInitialPosition : function( x, y ) { -604 for( var i=0, l= this.points.length; i<l; i++ ) { -605 this.points[i].x= x; -606 this.points[i].y= y; -607 } -608 return this; -609 }, -610 /** -611 * Set a rectangle from points[0] to (finalX, finalY) -612 * @param finalX {number} -613 * @param finalY {number} -614 */ -615 setFinalPosition : function( finalX, finalY ) { -616 this.points[2].x= finalX; -617 this.points[2].y= finalY; -618 -619 this.points[1].x= finalX; -620 this.points[1].y= this.points[0].y; -621 -622 this.points[3].x= this.points[0].x; -623 this.points[3].y= finalY; -624 -625 this.points[4].x= this.points[0].x; -626 this.points[4].y= this.points[0].y; -627 -628 this.updatePath(); -629 return this; -630 }, -631 /** -632 * @inheritDoc -633 */ -634 endCurvePosition : function() { -635 return this.points[4]; -636 }, -637 /** -638 * @inheritsDoc -639 */ -640 startCurvePosition : function() { -641 return this.points[0]; -642 }, -643 /** -644 * @inheritsDoc -645 */ -646 getPosition : function(time) { -647 -648 if ( time>1 || time<0 ) { -649 time%=1; -650 } -651 if ( time<0 ) { -652 time= 1+time; -653 } -654 -655 if ( -1===this.length ) { -656 this.newPosition.set(0,0); -657 } else { -658 var w= this.bbox.width / this.length; -659 var h= this.bbox.height / this.length; -660 var accTime= 0; -661 var times; -662 var segments; -663 var index= 0; -664 -665 if ( this.cw ) { -666 segments= [0,1,2,3,4]; -667 times= [w,h,w,h]; -668 } else { -669 segments= [4,3,2,1,0]; -670 times= [h,w,h,w]; -671 } -672 -673 while( index<times.length ) { -674 if ( accTime+times[index]<time ) { -675 accTime+= times[index]; -676 index++; -677 } else { -678 break; -679 } -680 } -681 time-=accTime; -682 -683 var p0= segments[index]; -684 var p1= segments[index+1]; -685 -686 // index tiene el indice del segmento en tiempo. -687 this.newPosition.set( -688 (this.points[p0].x + (this.points[p1].x - this.points[p0].x)*time/times[index]), -689 (this.points[p0].y + (this.points[p1].y - this.points[p0].y)*time/times[index]) ); -690 } -691 -692 return this.newPosition; -693 }, -694 /** -695 * Returns initial path segment point's x coordinate. -696 * @return {number} -697 */ -698 initialPositionX : function() { -699 return this.points[0].x; -700 }, -701 /** -702 * Returns final path segment point's x coordinate. -703 * @return {number} -704 */ -705 finalPositionX : function() { -706 return this.points[2].x; -707 }, -708 /** -709 * Draws this path segment on screen. Optionally it can draw handles for every control point, in -710 * this case, start and ending path segment points. -711 * @param director {CAAT.Director} -712 * @param bDrawHandles {boolean} -713 */ -714 paint : function(director, bDrawHandles) { -715 -716 var canvas= director.crc; -717 -718 canvas.save(); -719 -720 canvas.strokeStyle= this.color; -721 canvas.beginPath(); -722 canvas.strokeRect( -723 this.bbox.x, this.bbox.y, -724 this.bbox.width, this.bbox.height ); -725 -726 if ( bDrawHandles ) { -727 canvas.globalAlpha=0.5; -728 canvas.fillStyle='#7f7f00'; -729 -730 for( var i=0; i<this.points.length; i++ ) { -731 canvas.beginPath(); -732 canvas.arc( -733 this.points[i].x, -734 this.points[i].y, -735 CAAT.Curve.prototype.HANDLE_SIZE/2, -736 0, -737 2*Math.PI, -738 false) ; -739 canvas.fill(); -740 } -741 -742 } -743 -744 canvas.restore(); -745 }, -746 /** -747 * Get the number of control points. For this type of path segment, start and -748 * ending path segment points. Defaults to 2. -749 * @return {number} -750 */ -751 numControlPoints : function() { -752 return this.points.length; -753 }, -754 /** -755 * @inheritsDoc -756 */ -757 getControlPoint: function(index) { -758 return this.points[index]; -759 }, -760 /** -761 * @inheritsDoc -762 */ -763 getContour : function(iSize) { -764 var contour= []; -765 -766 for( var i=0; i<this.points.length; i++ ) { -767 contour.push( this.points[i] ); -768 } -769 -770 return contour; -771 }, -772 updatePath : function(point) { -773 -774 if ( point ) { -775 if ( point===this.points[0] ) { -776 this.points[1].y= point.y; -777 this.points[3].x= point.x; -778 } else if ( point===this.points[1] ) { -779 this.points[0].y= point.y; -780 this.points[2].x= point.x; -781 } else if ( point===this.points[2] ) { -782 this.points[3].y= point.y; -783 this.points[1].x= point.x; -784 } else if ( point===this.points[3] ) { -785 this.points[0].x= point.x; -786 this.points[2].y= point.y; -787 } -788 this.points[4].x= this.points[0].x; -789 this.points[4].y= this.points[0].y; -790 } -791 -792 this.bbox.setEmpty(); -793 for( var i=0; i<4; i++ ) { -794 this.bbox.union( this.points[i].x, this.points[i].y ); -795 } -796 -797 this.length= 2*this.bbox.width + 2*this.bbox.height; +553 applyAsPath : function(director) { +554 var ctx= director.ctx; +555 //ctx.rect( this.bbox.x, this.bbox.y, this.bbox.width, this.bbox.height ); +556 if ( this.cw ) { +557 ctx.lineTo( this.points[0].x, this.points[0].y ); +558 ctx.lineTo( this.points[1].x, this.points[1].y ); +559 ctx.lineTo( this.points[2].x, this.points[2].y ); +560 ctx.lineTo( this.points[3].x, this.points[3].y ); +561 ctx.lineTo( this.points[4].x, this.points[4].y ); +562 } else { +563 ctx.lineTo( this.points[4].x, this.points[4].y ); +564 ctx.lineTo( this.points[3].x, this.points[3].y ); +565 ctx.lineTo( this.points[2].x, this.points[2].y ); +566 ctx.lineTo( this.points[1].x, this.points[1].y ); +567 ctx.lineTo( this.points[0].x, this.points[0].y ); +568 } +569 return this; +570 }, +571 setPoint : function( point, index ) { +572 if ( index>=0 && index<this.points.length ) { +573 this.points[index]= point; +574 } +575 }, +576 /** +577 * An array of {CAAT.Point} composed of two points. +578 * @param points {Array<CAAT.Point>} +579 */ +580 setPoints : function( points ) { +581 this.points= []; +582 this.points.push( points[0] ); +583 this.points.push( new CAAT.Point().set(points[1].x, points[0].y) ); +584 this.points.push( points[1] ); +585 this.points.push( new CAAT.Point().set(points[0].x, points[1].y) ); +586 this.points.push( points[0].clone() ); +587 this.updatePath(); +588 +589 return this; +590 }, +591 setClockWise : function(cw) { +592 this.cw= cw!==undefined ? cw : true; +593 return this; +594 }, +595 isClockWise : function() { +596 return this.cw; +597 }, +598 /** +599 * Set this path segment's starting position. +600 * This method should not be called again after setFinalPosition has been called. +601 * @param x {number} +602 * @param y {number} +603 */ +604 setInitialPosition : function( x, y ) { +605 for( var i=0, l= this.points.length; i<l; i++ ) { +606 this.points[i].x= x; +607 this.points[i].y= y; +608 } +609 return this; +610 }, +611 /** +612 * Set a rectangle from points[0] to (finalX, finalY) +613 * @param finalX {number} +614 * @param finalY {number} +615 */ +616 setFinalPosition : function( finalX, finalY ) { +617 this.points[2].x= finalX; +618 this.points[2].y= finalY; +619 +620 this.points[1].x= finalX; +621 this.points[1].y= this.points[0].y; +622 +623 this.points[3].x= this.points[0].x; +624 this.points[3].y= finalY; +625 +626 this.points[4].x= this.points[0].x; +627 this.points[4].y= this.points[0].y; +628 +629 this.updatePath(); +630 return this; +631 }, +632 /** +633 * @inheritDoc +634 */ +635 endCurvePosition : function() { +636 return this.points[4]; +637 }, +638 /** +639 * @inheritsDoc +640 */ +641 startCurvePosition : function() { +642 return this.points[0]; +643 }, +644 /** +645 * @inheritsDoc +646 */ +647 getPosition : function(time) { +648 +649 if ( time>1 || time<0 ) { +650 time%=1; +651 } +652 if ( time<0 ) { +653 time= 1+time; +654 } +655 +656 if ( -1===this.length ) { +657 this.newPosition.set(0,0); +658 } else { +659 var w= this.bbox.width / this.length; +660 var h= this.bbox.height / this.length; +661 var accTime= 0; +662 var times; +663 var segments; +664 var index= 0; +665 +666 if ( this.cw ) { +667 segments= [0,1,2,3,4]; +668 times= [w,h,w,h]; +669 } else { +670 segments= [4,3,2,1,0]; +671 times= [h,w,h,w]; +672 } +673 +674 while( index<times.length ) { +675 if ( accTime+times[index]<time ) { +676 accTime+= times[index]; +677 index++; +678 } else { +679 break; +680 } +681 } +682 time-=accTime; +683 +684 var p0= segments[index]; +685 var p1= segments[index+1]; +686 +687 // index tiene el indice del segmento en tiempo. +688 this.newPosition.set( +689 (this.points[p0].x + (this.points[p1].x - this.points[p0].x)*time/times[index]), +690 (this.points[p0].y + (this.points[p1].y - this.points[p0].y)*time/times[index]) ); +691 } +692 +693 return this.newPosition; +694 }, +695 /** +696 * Returns initial path segment point's x coordinate. +697 * @return {number} +698 */ +699 initialPositionX : function() { +700 return this.points[0].x; +701 }, +702 /** +703 * Returns final path segment point's x coordinate. +704 * @return {number} +705 */ +706 finalPositionX : function() { +707 return this.points[2].x; +708 }, +709 /** +710 * Draws this path segment on screen. Optionally it can draw handles for every control point, in +711 * this case, start and ending path segment points. +712 * @param director {CAAT.Director} +713 * @param bDrawHandles {boolean} +714 */ +715 paint : function(director, bDrawHandles) { +716 +717 var canvas= director.crc; +718 +719 canvas.save(); +720 +721 canvas.strokeStyle= this.color; +722 canvas.beginPath(); +723 canvas.strokeRect( +724 this.bbox.x, this.bbox.y, +725 this.bbox.width, this.bbox.height ); +726 +727 if ( bDrawHandles ) { +728 canvas.globalAlpha=0.5; +729 canvas.fillStyle='#7f7f00'; +730 +731 for( var i=0; i<this.points.length; i++ ) { +732 canvas.beginPath(); +733 canvas.arc( +734 this.points[i].x, +735 this.points[i].y, +736 CAAT.Curve.prototype.HANDLE_SIZE/2, +737 0, +738 2*Math.PI, +739 false) ; +740 canvas.fill(); +741 } +742 +743 } +744 +745 canvas.restore(); +746 }, +747 /** +748 * Get the number of control points. For this type of path segment, start and +749 * ending path segment points. Defaults to 2. +750 * @return {number} +751 */ +752 numControlPoints : function() { +753 return this.points.length; +754 }, +755 /** +756 * @inheritsDoc +757 */ +758 getControlPoint: function(index) { +759 return this.points[index]; +760 }, +761 /** +762 * @inheritsDoc +763 */ +764 getContour : function(iSize) { +765 var contour= []; +766 +767 for( var i=0; i<this.points.length; i++ ) { +768 contour.push( this.points[i] ); +769 } +770 +771 return contour; +772 }, +773 updatePath : function(point) { +774 +775 if ( point ) { +776 if ( point===this.points[0] ) { +777 this.points[1].y= point.y; +778 this.points[3].x= point.x; +779 } else if ( point===this.points[1] ) { +780 this.points[0].y= point.y; +781 this.points[2].x= point.x; +782 } else if ( point===this.points[2] ) { +783 this.points[3].y= point.y; +784 this.points[1].x= point.x; +785 } else if ( point===this.points[3] ) { +786 this.points[0].x= point.x; +787 this.points[2].y= point.y; +788 } +789 this.points[4].x= this.points[0].x; +790 this.points[4].y= this.points[0].y; +791 } +792 +793 this.bbox.setEmpty(); +794 var minx= Number.MAX_VALUE, miny= Number.MAX_VALUE, maxx= Number.MIN_VALUE, maxy= Number.MIN_VALUE; +795 for( var i=0; i<4; i++ ) { +796 this.bbox.union( this.points[i].x, this.points[i].y ); +797 } 798 -799 this.points[0].x= this.bbox.x; -800 this.points[0].y= this.bbox.y; -801 -802 this.points[1].x= this.bbox.x+this.bbox.width; -803 this.points[1].y= this.bbox.y; -804 -805 this.points[2].x= this.bbox.x + this.bbox.width; -806 this.points[2].y= this.bbox.y + this.bbox.height; -807 -808 this.points[3].x= this.bbox.x; -809 this.points[3].y= this.bbox.y + this.bbox.height; -810 -811 this.points[4].x= this.bbox.x; -812 this.points[4].y= this.bbox.y; -813 -814 return this; -815 } -816 } -817 -818 extend( CAAT.ShapePath, CAAT.PathSegment ); +799 this.length= 2*this.bbox.width + 2*this.bbox.height; +800 +801 this.points[0].x= this.bbox.x; +802 this.points[0].y= this.bbox.y; +803 +804 this.points[1].x= this.bbox.x+this.bbox.width; +805 this.points[1].y= this.bbox.y; +806 +807 this.points[2].x= this.bbox.x + this.bbox.width; +808 this.points[2].y= this.bbox.y + this.bbox.height; +809 +810 this.points[3].x= this.bbox.x; +811 this.points[3].y= this.bbox.y + this.bbox.height; +812 +813 this.points[4].x= this.bbox.x; +814 this.points[4].y= this.bbox.y; +815 +816 return this; +817 } +818 } 819 -820 })(); +820 extend( CAAT.ShapePath, CAAT.PathSegment ); 821 -822 (function() { +822 })(); 823 -824 /** -825 * This class the top most abstraction of path related classes in CAAT. It defines a path composes un -826 * an unlimited number of path segments including CAAT.Path instances. -827 * <p> -828 * Every operation of the CAAT.PathSegment interface is performed for every path segment. In example, -829 * the method <code>getLength</code> will contain the sum of every path segment's length. -830 * <p> -831 * An example of CAAT.Path will be as follows: -832 -833 * <code> -834 * path.beginPath(x,y).<br> -835 *   addLineTo(x1,y1).<br> -836 *   addLineTo(x2,y2).<br> -837 *   addQuadricTo(...).<br> -838 *   addCubicTo(...).<br> -839 *   endPath();<br> -840 * </code> -841 * <p> -842 * This code creates a path composed of four chained segments, starting at (x,y) and having each -843 * segment starting where the previous one ended. -844 * <p> -845 * This class is intended to wrap the other kind of path segment classes when just a one segmented -846 * path is to be defined. The methods <code>setLinear, setCubic and setQuadrid</code> will make -847 * a CAAT.Path instance to be defined by just one segment. -848 * -849 * @constructor -850 * @extends CAAT.PathSegment -851 */ -852 CAAT.Path= function() { -853 CAAT.Path.superclass.constructor.call(this); -854 -855 this.newPosition= new CAAT.Point(0,0,0); -856 this.pathSegments= []; -857 -858 this.behaviorList= []; -859 this.matrix= new CAAT.Matrix(); -860 this.tmpMatrix= new CAAT.Matrix(); -861 -862 return this; -863 }; -864 -865 CAAT.Path.prototype= { -866 -867 pathSegments: null, // a collection of CAAT.PathSegment instances. -868 pathSegmentDurationTime: null, // precomputed segment duration relative to segment legnth/path length -869 pathSegmentStartTime: null, // precomputed segment start time relative to segment legnth/path length and duration. -870 -871 newPosition: null, // spare CAAT.Point. -872 -873 pathLength: -1, // path length (sum of every segment length) -874 -875 /* -876 starting path position -877 */ -878 beginPathX: -1, -879 beginPathY: -1, -880 -881 /* -882 last path coordinates position (using when building the path). -883 */ -884 trackPathX: -1, -885 trackPathY: -1, -886 -887 /* -888 needed to drag control points. -889 */ -890 ax: -1, -891 ay: -1, -892 point: [], -893 -894 interactive: true, +824 (function() { +825 +826 /** +827 * This class the top most abstraction of path related classes in CAAT. It defines a path composes un +828 * an unlimited number of path segments including CAAT.Path instances. +829 * <p> +830 * Every operation of the CAAT.PathSegment interface is performed for every path segment. In example, +831 * the method <code>getLength</code> will contain the sum of every path segment's length. +832 * <p> +833 * An example of CAAT.Path will be as follows: +834 +835 * <code> +836 * path.beginPath(x,y).<br> +837 *   addLineTo(x1,y1).<br> +838 *   addLineTo(x2,y2).<br> +839 *   addQuadricTo(...).<br> +840 *   addCubicTo(...).<br> +841 *   endPath();<br> +842 * </code> +843 * <p> +844 * This code creates a path composed of four chained segments, starting at (x,y) and having each +845 * segment starting where the previous one ended. +846 * <p> +847 * This class is intended to wrap the other kind of path segment classes when just a one segmented +848 * path is to be defined. The methods <code>setLinear, setCubic and setQuadrid</code> will make +849 * a CAAT.Path instance to be defined by just one segment. +850 * +851 * @constructor +852 * @extends CAAT.PathSegment +853 */ +854 CAAT.Path= function() { +855 CAAT.Path.superclass.constructor.call(this); +856 +857 this.newPosition= new CAAT.Point(0,0,0); +858 this.pathSegments= []; +859 +860 this.behaviorList= []; +861 this.matrix= new CAAT.Matrix(); +862 this.tmpMatrix= new CAAT.Matrix(); +863 +864 return this; +865 }; +866 +867 CAAT.Path.prototype= { +868 +869 pathSegments: null, // a collection of CAAT.PathSegment instances. +870 pathSegmentDurationTime: null, // precomputed segment duration relative to segment legnth/path length +871 pathSegmentStartTime: null, // precomputed segment start time relative to segment legnth/path length and duration. +872 +873 newPosition: null, // spare CAAT.Point. +874 +875 pathLength: -1, // path length (sum of every segment length) +876 +877 /* +878 starting path position +879 */ +880 beginPathX: -1, +881 beginPathY: -1, +882 +883 /* +884 last path coordinates position (using when building the path). +885 */ +886 trackPathX: -1, +887 trackPathY: -1, +888 +889 /* +890 needed to drag control points. +891 */ +892 ax: -1, +893 ay: -1, +894 point: [], 895 -896 behaviorList: null, +896 interactive: true, 897 -898 /** rotation behavior info **/ -899 rb_angle: 0, -900 rb_rotateAnchorX: .5, -901 rb_rotateAnchorY: .5, -902 -903 /** scale behavior info **/ -904 sb_scaleX: 1, -905 sb_scaleY: 1, -906 sb_scaleAnchorX: .5, -907 sb_scaleAnchorY: .5, -908 -909 /** translate behavior info **/ -910 tb_x: 0, -911 tb_y: 0, -912 -913 /** behavior affine transformation matrix **/ -914 matrix: null, -915 tmpMatrix: null, -916 -917 /** if behaviors are to be applied, save original path points **/ -918 pathPoints: null, -919 -920 /** path width and height **/ -921 width: 0, -922 height: 0, -923 -924 applyAsPath : function(ctx) { -925 ctx.beginPath(); -926 ctx.globalCompositeOperation= 'source-out'; -927 ctx.moveTo( -928 this.getFirstPathSegment().startCurvePosition().x, -929 this.getFirstPathSegment().startCurvePosition().y -930 ); -931 for( var i=0; i<this.pathSegments.length; i++ ) { -932 this.pathSegments[i].applyAsPath(ctx); -933 } -934 ctx.globalCompositeOperation= 'source-over'; -935 return this; -936 }, -937 /** -938 * Set whether this path should paint handles for every control point. -939 * @param interactive {boolean}. -940 */ -941 setInteractive : function(interactive) { -942 this.interactive= interactive; +898 behaviorList: null, +899 +900 /** rotation behavior info **/ +901 rb_angle: 0, +902 rb_rotateAnchorX: .5, +903 rb_rotateAnchorY: .5, +904 +905 /** scale behavior info **/ +906 sb_scaleX: 1, +907 sb_scaleY: 1, +908 sb_scaleAnchorX: .5, +909 sb_scaleAnchorY: .5, +910 +911 /** translate behavior info **/ +912 tb_x: 0, +913 tb_y: 0, +914 +915 /** behavior affine transformation matrix **/ +916 matrix: null, +917 tmpMatrix: null, +918 +919 /** if behaviors are to be applied, save original path points **/ +920 pathPoints: null, +921 +922 /** path width and height **/ +923 width: 0, +924 height: 0, +925 +926 clipOffsetX : 0, +927 clipOffsetY : 0, +928 +929 applyAsPath : function(director) { +930 var ctx= director.ctx; +931 +932 director.modelViewMatrix.transformRenderingContext( ctx ); +933 ctx.beginPath(); +934 ctx.globalCompositeOperation= 'source-out'; +935 ctx.moveTo( +936 this.getFirstPathSegment().startCurvePosition().x, +937 this.getFirstPathSegment().startCurvePosition().y +938 ); +939 for( var i=0; i<this.pathSegments.length; i++ ) { +940 this.pathSegments[i].applyAsPath(director); +941 } +942 ctx.globalCompositeOperation= 'source-over'; 943 return this; 944 }, -945 getFirstPathSegment : function() { -946 return this.pathSegments.length ? -947 this.pathSegments[0] : -948 null; -949 }, -950 getLastPathSegment : function() { -951 return this.pathSegments.length ? -952 this.pathSegments[ this.pathSegments.length-1 ] : -953 null; -954 }, -955 /** -956 * Return the last point of the last path segment of this compound path. -957 * @return {CAAT.Point} -958 */ -959 endCurvePosition : function() { -960 if ( this.pathSegments.length ) { -961 return this.pathSegments[ this.pathSegments.length-1 ].endCurvePosition(); -962 } else { -963 return new CAAT.Point().set( this.beginPathX, this.beginPathY ); -964 } -965 }, -966 /** -967 * Return the first point of the first path segment of this compound path. -968 * @return {CAAT.Point} -969 */ -970 startCurvePosition : function() { -971 return this.pathSegments[ 0 ].startCurvePosition(); -972 }, -973 /** -974 * Return the last path segment added to this path. -975 * @return {CAAT.PathSegment} -976 */ -977 getCurrentPathSegment : function() { -978 return this.pathSegments[ this.pathSegments.length-1 ]; -979 }, -980 /** -981 * Set the path to be composed by a single LinearPath segment. -982 * @param x0 {number} -983 * @param y0 {number} -984 * @param x1 {number} -985 * @param y1 {number} -986 * @return this -987 */ -988 setLinear : function(x0,y0,x1,y1) { -989 this.beginPath(x0,y0); -990 this.addLineTo(x1,y1); -991 this.endPath(); -992 -993 return this; -994 }, -995 /** -996 * Set this path to be composed by a single Quadric Bezier path segment. -997 * @param x0 {number} -998 * @param y0 {number} -999 * @param x1 {number} -1000 * @param y1 {number} -1001 * @param x2 {number} -1002 * @param y2 {number} -1003 * @return this -1004 */ -1005 setQuadric : function(x0,y0,x1,y1,x2,y2) { -1006 this.beginPath(x0,y0); -1007 this.addQuadricTo(x1,y1,x2,y2); -1008 this.endPath(); -1009 -1010 return this; -1011 }, -1012 /** -1013 * Sets this path to be composed by a single Cubic Bezier path segment. -1014 * @param x0 {number} -1015 * @param y0 {number} -1016 * @param x1 {number} -1017 * @param y1 {number} -1018 * @param x2 {number} -1019 * @param y2 {number} -1020 * @param x3 {number} -1021 * @param y3 {number} -1022 * -1023 * @return this -1024 */ -1025 setCubic : function(x0,y0,x1,y1,x2,y2,x3,y3) { -1026 this.beginPath(x0,y0); -1027 this.addCubicTo(x1,y1,x2,y2,x3,y3); -1028 this.endPath(); -1029 -1030 return this; -1031 }, -1032 setRectangle : function(x0,y0, x1,y1) { -1033 this.beginPath(x0,y0); -1034 this.addRectangleTo(x1,y1); -1035 this.endPath(); -1036 -1037 return this; -1038 }, -1039 /** -1040 * Add a CAAT.PathSegment instance to this path. -1041 * @param pathSegment {CAAT.PathSegment} -1042 * @return this -1043 * -1044 * @deprecated -1045 */ -1046 addSegment : function(pathSegment) { -1047 pathSegment.setParent(this); -1048 this.pathSegments.push(pathSegment); -1049 return this; -1050 }, -1051 addRectangleTo : function( x1,y1, cw, color ) { -1052 var r= new CAAT.ShapePath(); -1053 r.setPoints([ -1054 this.endCurvePosition(), -1055 new CAAT.Point().set(x1,y1) -1056 ]); -1057 -1058 r.setClockWise(cw); -1059 r.setColor(color); -1060 r.setParent(this); -1061 -1062 this.pathSegments.push(r); -1063 -1064 return this; -1065 }, -1066 /** -1067 * Add a Quadric Bezier path segment to this path. -1068 * The segment starts in the current last path coordinate. -1069 * @param px1 {number} -1070 * @param py1 {number} -1071 * @param px2 {number} -1072 * @param py2 {number} -1073 * @param color {color=}. optional parameter. determines the color to draw the segment with (if -1074 * being drawn by a CAAT.PathActor). -1075 * -1076 * @return this -1077 */ -1078 addQuadricTo : function( px1,py1, px2,py2, color ) { -1079 var bezier= new CAAT.Bezier(); -1080 -1081 bezier.setPoints( -1082 [ -1083 this.endCurvePosition(), -1084 new CAAT.Point().set(px1,py1), -1085 new CAAT.Point().set(px2,py2) -1086 ]); -1087 -1088 this.trackPathX= px2; -1089 this.trackPathY= py2; -1090 -1091 var segment= new CAAT.CurvePath().setColor(color).setParent(this); -1092 segment.curve= bezier; -1093 -1094 this.pathSegments.push(segment); +945 /** +946 * Set whether this path should paint handles for every control point. +947 * @param interactive {boolean}. +948 */ +949 setInteractive : function(interactive) { +950 this.interactive= interactive; +951 return this; +952 }, +953 getFirstPathSegment : function() { +954 return this.pathSegments.length ? +955 this.pathSegments[0] : +956 null; +957 }, +958 getLastPathSegment : function() { +959 return this.pathSegments.length ? +960 this.pathSegments[ this.pathSegments.length-1 ] : +961 null; +962 }, +963 /** +964 * Return the last point of the last path segment of this compound path. +965 * @return {CAAT.Point} +966 */ +967 endCurvePosition : function() { +968 if ( this.pathSegments.length ) { +969 return this.pathSegments[ this.pathSegments.length-1 ].endCurvePosition(); +970 } else { +971 return new CAAT.Point().set( this.beginPathX, this.beginPathY ); +972 } +973 }, +974 /** +975 * Return the first point of the first path segment of this compound path. +976 * @return {CAAT.Point} +977 */ +978 startCurvePosition : function() { +979 return this.pathSegments[ 0 ].startCurvePosition(); +980 }, +981 /** +982 * Return the last path segment added to this path. +983 * @return {CAAT.PathSegment} +984 */ +985 getCurrentPathSegment : function() { +986 return this.pathSegments[ this.pathSegments.length-1 ]; +987 }, +988 /** +989 * Set the path to be composed by a single LinearPath segment. +990 * @param x0 {number} +991 * @param y0 {number} +992 * @param x1 {number} +993 * @param y1 {number} +994 * @return this +995 */ +996 setLinear : function(x0,y0,x1,y1) { +997 this.beginPath(x0,y0); +998 this.addLineTo(x1,y1); +999 this.endPath(); +1000 +1001 return this; +1002 }, +1003 /** +1004 * Set this path to be composed by a single Quadric Bezier path segment. +1005 * @param x0 {number} +1006 * @param y0 {number} +1007 * @param x1 {number} +1008 * @param y1 {number} +1009 * @param x2 {number} +1010 * @param y2 {number} +1011 * @return this +1012 */ +1013 setQuadric : function(x0,y0,x1,y1,x2,y2) { +1014 this.beginPath(x0,y0); +1015 this.addQuadricTo(x1,y1,x2,y2); +1016 this.endPath(); +1017 +1018 return this; +1019 }, +1020 /** +1021 * Sets this path to be composed by a single Cubic Bezier path segment. +1022 * @param x0 {number} +1023 * @param y0 {number} +1024 * @param x1 {number} +1025 * @param y1 {number} +1026 * @param x2 {number} +1027 * @param y2 {number} +1028 * @param x3 {number} +1029 * @param y3 {number} +1030 * +1031 * @return this +1032 */ +1033 setCubic : function(x0,y0,x1,y1,x2,y2,x3,y3) { +1034 this.beginPath(x0,y0); +1035 this.addCubicTo(x1,y1,x2,y2,x3,y3); +1036 this.endPath(); +1037 +1038 return this; +1039 }, +1040 setRectangle : function(x0,y0, x1,y1) { +1041 this.beginPath(x0,y0); +1042 this.addRectangleTo(x1,y1); +1043 this.endPath(); +1044 +1045 return this; +1046 }, +1047 /** +1048 * Add a CAAT.PathSegment instance to this path. +1049 * @param pathSegment {CAAT.PathSegment} +1050 * @return this +1051 * +1052 * @deprecated +1053 */ +1054 addSegment : function(pathSegment) { +1055 pathSegment.setParent(this); +1056 this.pathSegments.push(pathSegment); +1057 return this; +1058 }, +1059 addRectangleTo : function( x1,y1, cw, color ) { +1060 var r= new CAAT.ShapePath(); +1061 r.setPoints([ +1062 this.endCurvePosition(), +1063 new CAAT.Point().set(x1,y1) +1064 ]); +1065 +1066 r.setClockWise(cw); +1067 r.setColor(color); +1068 r.setParent(this); +1069 +1070 this.pathSegments.push(r); +1071 +1072 return this; +1073 }, +1074 /** +1075 * Add a Quadric Bezier path segment to this path. +1076 * The segment starts in the current last path coordinate. +1077 * @param px1 {number} +1078 * @param py1 {number} +1079 * @param px2 {number} +1080 * @param py2 {number} +1081 * @param color {color=}. optional parameter. determines the color to draw the segment with (if +1082 * being drawn by a CAAT.PathActor). +1083 * +1084 * @return this +1085 */ +1086 addQuadricTo : function( px1,py1, px2,py2, color ) { +1087 var bezier= new CAAT.Bezier(); +1088 +1089 bezier.setPoints( +1090 [ +1091 this.endCurvePosition(), +1092 new CAAT.Point().set(px1,py1), +1093 new CAAT.Point().set(px2,py2) +1094 ]); 1095 -1096 return this; -1097 }, -1098 /** -1099 * Add a Cubic Bezier segment to this path. -1100 * The segment starts in the current last path coordinate. -1101 * @param px1 {number} -1102 * @param py1 {number} -1103 * @param px2 {number} -1104 * @param py2 {number} -1105 * @param px3 {number} -1106 * @param py3 {number} -1107 * @param color {color=}. optional parameter. determines the color to draw the segment with (if -1108 * being drawn by a CAAT.PathActor). -1109 * -1110 * @return this -1111 */ -1112 addCubicTo : function( px1,py1, px2,py2, px3,py3, color ) { -1113 var bezier= new CAAT.Bezier(); -1114 -1115 bezier.setPoints( -1116 [ -1117 this.endCurvePosition(), -1118 new CAAT.Point().set(px1,py1), -1119 new CAAT.Point().set(px2,py2), -1120 new CAAT.Point().set(px3,py3) -1121 ]); +1096 this.trackPathX= px2; +1097 this.trackPathY= py2; +1098 +1099 var segment= new CAAT.CurvePath().setColor(color).setParent(this); +1100 segment.curve= bezier; +1101 +1102 this.pathSegments.push(segment); +1103 +1104 return this; +1105 }, +1106 /** +1107 * Add a Cubic Bezier segment to this path. +1108 * The segment starts in the current last path coordinate. +1109 * @param px1 {number} +1110 * @param py1 {number} +1111 * @param px2 {number} +1112 * @param py2 {number} +1113 * @param px3 {number} +1114 * @param py3 {number} +1115 * @param color {color=}. optional parameter. determines the color to draw the segment with (if +1116 * being drawn by a CAAT.PathActor). +1117 * +1118 * @return this +1119 */ +1120 addCubicTo : function( px1,py1, px2,py2, px3,py3, color ) { +1121 var bezier= new CAAT.Bezier(); 1122 -1123 this.trackPathX= px3; -1124 this.trackPathY= py3; -1125 -1126 var segment= new CAAT.CurvePath().setColor(color).setParent(this); -1127 segment.curve= bezier; -1128 -1129 this.pathSegments.push(segment); -1130 return this; -1131 }, -1132 /** -1133 * Add a Catmull-Rom segment to this path. -1134 * The segment starts in the current last path coordinate. -1135 * @param px1 {number} -1136 * @param py1 {number} -1137 * @param px2 {number} -1138 * @param py2 {number} -1139 * @param px3 {number} -1140 * @param py3 {number} -1141 * @param color {color=}. optional parameter. determines the color to draw the segment with (if -1142 * being drawn by a CAAT.PathActor). -1143 * -1144 * @return this -1145 */ -1146 addCatmullTo : function( px1,py1, px2,py2, px3,py3, color ) { -1147 var curve= new CAAT.CatmullRom().setColor(color); -1148 curve.setCurve(this.trackPathX,this.trackPathY, px1,py1, px2,py2, px3,py3); -1149 this.trackPathX= px3; -1150 this.trackPathY= py3; -1151 -1152 var segment= new CAAT.CurvePath().setParent(this); -1153 segment.curve= curve; -1154 -1155 this.pathSegments.push(segment); -1156 return this; -1157 }, -1158 /** -1159 * Adds a line segment to this path. -1160 * The segment starts in the current last path coordinate. -1161 * @param px1 {number} -1162 * @param py1 {number} -1163 * @param color {color=}. optional parameter. determines the color to draw the segment with (if -1164 * being drawn by a CAAT.PathActor). -1165 * -1166 * @return this -1167 */ -1168 addLineTo : function( px1,py1, color ) { -1169 var segment= new CAAT.LinearPath().setColor(color); -1170 segment.setPoints( [ -1171 this.endCurvePosition(), -1172 new CAAT.Point().set(px1,py1) -1173 ]); -1174 -1175 segment.setParent(this); -1176 -1177 this.trackPathX= px1; -1178 this.trackPathY= py1; -1179 -1180 this.pathSegments.push(segment); -1181 return this; -1182 }, -1183 /** -1184 * Set the path's starting point. The method startCurvePosition will return this coordinate. -1185 * <p> -1186 * If a call to any method of the form <code>add<Segment>To</code> is called before this calling -1187 * this method, they will assume to start at -1,-1 and probably you'll get the wrong path. -1188 * @param px0 {number} -1189 * @param py0 {number} -1190 * -1191 * @return this -1192 */ -1193 beginPath : function( px0, py0 ) { -1194 this.trackPathX= px0; -1195 this.trackPathY= py0; -1196 this.beginPathX= px0; -1197 this.beginPathY= py0; -1198 return this; -1199 }, -1200 /** -1201 * <del>Close the path by adding a line path segment from the current last path -1202 * coordinate to startCurvePosition coordinate</del>. -1203 * <p> -1204 * This method closes a path by setting its last path segment's last control point -1205 * to be the first path segment's first control point. -1206 * <p> -1207 * This method also sets the path as finished, and calculates all path's information -1208 * such as length and bounding box. -1209 * -1210 * @return this -1211 */ -1212 closePath : function() { -1213 -1214 this.getLastPathSegment().setPoint( -1215 this.getFirstPathSegment().startCurvePosition(), -1216 this.getLastPathSegment().numControlPoints()-1 ); -1217 -1218 -1219 this.trackPathX= this.beginPathX; -1220 this.trackPathY= this.beginPathY; -1221 -1222 this.endPath(); -1223 return this; -1224 }, -1225 /** -1226 * Finishes the process of building the path. It involves calculating each path segments length -1227 * and proportional length related to a normalized path length of 1. -1228 * It also sets current paths length. -1229 * These calculi are needed to traverse the path appropriately. -1230 * <p> -1231 * This method must be called explicitly, except when closing a path (that is, calling the -1232 * method closePath) which calls this method as well. -1233 * -1234 * @return this -1235 */ -1236 endPath : function() { -1237 -1238 this.pathSegmentStartTime=[]; -1239 this.pathSegmentDurationTime= []; -1240 -1241 this.updatePath(); -1242 -1243 return this; -1244 }, -1245 /** -1246 * This method, returns a CAAT.Point instance indicating a coordinate in the path. -1247 * The returned coordinate is the corresponding to normalizing the path's length to 1, -1248 * and then finding what path segment and what coordinate in that path segment corresponds -1249 * for the input time parameter. -1250 * <p> -1251 * The parameter time must be a value ranging 0..1. -1252 * If not constrained to these values, the parameter will be modulus 1, and then, if less -1253 * than 0, be normalized to 1+time, so that the value always ranges from 0 to 1. -1254 * <p> -1255 * This method is needed when traversing the path throughout a CAAT.Interpolator instance. -1256 * -1257 * @param time a value between 0 and 1 both inclusive. 0 will return path's starting coordinate. -1258 * 1 will return path's end coordinate. -1259 * -1260 * @return {CAAT.Point} -1261 */ -1262 getPosition : function(time) { -1263 -1264 if ( time>1 || time<0 ) { -1265 time%=1; -1266 } -1267 if ( time<0 ) { -1268 time= 1+time; -1269 } -1270 -1271 for( var i=0; i<this.pathSegments.length; i++ ) { -1272 if (this.pathSegmentStartTime[i]<=time && time<=this.pathSegmentStartTime[i]+this.pathSegmentDurationTime[i]) { -1273 time= this.pathSegmentDurationTime[i] ? -1274 (time-this.pathSegmentStartTime[i])/this.pathSegmentDurationTime[i] : -1275 0; -1276 var pointInPath= this.pathSegments[i].getPosition(time); -1277 this.newPosition.x= pointInPath.x; -1278 this.newPosition.y= pointInPath.y; -1279 break; -1280 } -1281 } -1282 -1283 return this.newPosition; -1284 }, -1285 /** -1286 * Analogously to the method getPosition, this method returns a CAAT.Point instance with -1287 * the coordinate on the path that corresponds to the given length. The input length is -1288 * related to path's length. -1289 * -1290 * @param iLength {number} a float with the target length. -1291 * @return {CAAT.Point} -1292 */ -1293 getPositionFromLength : function(iLength) { -1294 -1295 iLength%=this.getLength(); -1296 if (iLength<0 ) { -1297 iLength+= this.getLength(); -1298 } -1299 -1300 var accLength=0; -1301 -1302 for( var i=0; i<this.pathSegments.length; i++ ) { -1303 if (accLength<=iLength && iLength<=this.pathSegments[i].getLength()+accLength) { -1304 iLength-= accLength; -1305 var pointInPath= this.pathSegments[i].getPositionFromLength(iLength); -1306 this.newPosition.x= pointInPath.x; -1307 this.newPosition.y= pointInPath.y; -1308 break; -1309 } -1310 accLength+= this.pathSegments[i].getLength(); -1311 } -1312 -1313 return this.newPosition; -1314 }, -1315 /** -1316 * Paints the path. -1317 * This method is called by CAAT.PathActor instances. -1318 * If the path is set as interactive (by default) path segment will draw curve modification -1319 * handles as well. -1320 * -1321 * @param director {CAAT.Director} a CAAT.Director instance. -1322 */ -1323 paint : function( director ) { -1324 for( var i=0; i<this.pathSegments.length; i++ ) { -1325 this.pathSegments[i].paint(director,this.interactive); -1326 } -1327 }, -1328 /** -1329 * Method invoked when a CAAT.PathActor stops dragging a control point. +1123 bezier.setPoints( +1124 [ +1125 this.endCurvePosition(), +1126 new CAAT.Point().set(px1,py1), +1127 new CAAT.Point().set(px2,py2), +1128 new CAAT.Point().set(px3,py3) +1129 ]); +1130 +1131 this.trackPathX= px3; +1132 this.trackPathY= py3; +1133 +1134 var segment= new CAAT.CurvePath().setColor(color).setParent(this); +1135 segment.curve= bezier; +1136 +1137 this.pathSegments.push(segment); +1138 return this; +1139 }, +1140 /** +1141 * Add a Catmull-Rom segment to this path. +1142 * The segment starts in the current last path coordinate. +1143 * @param px1 {number} +1144 * @param py1 {number} +1145 * @param px2 {number} +1146 * @param py2 {number} +1147 * @param px3 {number} +1148 * @param py3 {number} +1149 * @param color {color=}. optional parameter. determines the color to draw the segment with (if +1150 * being drawn by a CAAT.PathActor). +1151 * +1152 * @return this +1153 */ +1154 addCatmullTo : function( px1,py1, px2,py2, px3,py3, color ) { +1155 var curve= new CAAT.CatmullRom().setColor(color); +1156 curve.setCurve(this.trackPathX,this.trackPathY, px1,py1, px2,py2, px3,py3); +1157 this.trackPathX= px3; +1158 this.trackPathY= py3; +1159 +1160 var segment= new CAAT.CurvePath().setParent(this); +1161 segment.curve= curve; +1162 +1163 this.pathSegments.push(segment); +1164 return this; +1165 }, +1166 /** +1167 * Adds a line segment to this path. +1168 * The segment starts in the current last path coordinate. +1169 * @param px1 {number} +1170 * @param py1 {number} +1171 * @param color {color=}. optional parameter. determines the color to draw the segment with (if +1172 * being drawn by a CAAT.PathActor). +1173 * +1174 * @return this +1175 */ +1176 addLineTo : function( px1,py1, color ) { +1177 var segment= new CAAT.LinearPath().setColor(color); +1178 segment.setPoints( [ +1179 this.endCurvePosition(), +1180 new CAAT.Point().set(px1,py1) +1181 ]); +1182 +1183 segment.setParent(this); +1184 +1185 this.trackPathX= px1; +1186 this.trackPathY= py1; +1187 +1188 this.pathSegments.push(segment); +1189 return this; +1190 }, +1191 /** +1192 * Set the path's starting point. The method startCurvePosition will return this coordinate. +1193 * <p> +1194 * If a call to any method of the form <code>add<Segment>To</code> is called before this calling +1195 * this method, they will assume to start at -1,-1 and probably you'll get the wrong path. +1196 * @param px0 {number} +1197 * @param py0 {number} +1198 * +1199 * @return this +1200 */ +1201 beginPath : function( px0, py0 ) { +1202 this.trackPathX= px0; +1203 this.trackPathY= py0; +1204 this.beginPathX= px0; +1205 this.beginPathY= py0; +1206 return this; +1207 }, +1208 /** +1209 * <del>Close the path by adding a line path segment from the current last path +1210 * coordinate to startCurvePosition coordinate</del>. +1211 * <p> +1212 * This method closes a path by setting its last path segment's last control point +1213 * to be the first path segment's first control point. +1214 * <p> +1215 * This method also sets the path as finished, and calculates all path's information +1216 * such as length and bounding box. +1217 * +1218 * @return this +1219 */ +1220 closePath : function() { +1221 +1222 this.getLastPathSegment().setPoint( +1223 this.getFirstPathSegment().startCurvePosition(), +1224 this.getLastPathSegment().numControlPoints()-1 ); +1225 +1226 +1227 this.trackPathX= this.beginPathX; +1228 this.trackPathY= this.beginPathY; +1229 +1230 this.endPath(); +1231 return this; +1232 }, +1233 /** +1234 * Finishes the process of building the path. It involves calculating each path segments length +1235 * and proportional length related to a normalized path length of 1. +1236 * It also sets current paths length. +1237 * These calculi are needed to traverse the path appropriately. +1238 * <p> +1239 * This method must be called explicitly, except when closing a path (that is, calling the +1240 * method closePath) which calls this method as well. +1241 * +1242 * @return this +1243 */ +1244 endPath : function() { +1245 +1246 this.pathSegmentStartTime=[]; +1247 this.pathSegmentDurationTime= []; +1248 +1249 this.updatePath(); +1250 +1251 return this; +1252 }, +1253 /** +1254 * This method, returns a CAAT.Point instance indicating a coordinate in the path. +1255 * The returned coordinate is the corresponding to normalizing the path's length to 1, +1256 * and then finding what path segment and what coordinate in that path segment corresponds +1257 * for the input time parameter. +1258 * <p> +1259 * The parameter time must be a value ranging 0..1. +1260 * If not constrained to these values, the parameter will be modulus 1, and then, if less +1261 * than 0, be normalized to 1+time, so that the value always ranges from 0 to 1. +1262 * <p> +1263 * This method is needed when traversing the path throughout a CAAT.Interpolator instance. +1264 * +1265 * @param time a value between 0 and 1 both inclusive. 0 will return path's starting coordinate. +1266 * 1 will return path's end coordinate. +1267 * +1268 * @return {CAAT.Point} +1269 */ +1270 getPosition : function(time) { +1271 +1272 if ( time>1 || time<0 ) { +1273 time%=1; +1274 } +1275 if ( time<0 ) { +1276 time= 1+time; +1277 } +1278 +1279 for( var i=0; i<this.pathSegments.length; i++ ) { +1280 if (this.pathSegmentStartTime[i]<=time && time<=this.pathSegmentStartTime[i]+this.pathSegmentDurationTime[i]) { +1281 time= this.pathSegmentDurationTime[i] ? +1282 (time-this.pathSegmentStartTime[i])/this.pathSegmentDurationTime[i] : +1283 0; +1284 var pointInPath= this.pathSegments[i].getPosition(time); +1285 this.newPosition.x= pointInPath.x; +1286 this.newPosition.y= pointInPath.y; +1287 break; +1288 } +1289 } +1290 +1291 return this.newPosition; +1292 }, +1293 /** +1294 * Analogously to the method getPosition, this method returns a CAAT.Point instance with +1295 * the coordinate on the path that corresponds to the given length. The input length is +1296 * related to path's length. +1297 * +1298 * @param iLength {number} a float with the target length. +1299 * @return {CAAT.Point} +1300 */ +1301 getPositionFromLength : function(iLength) { +1302 +1303 iLength%=this.getLength(); +1304 if (iLength<0 ) { +1305 iLength+= this.getLength(); +1306 } +1307 +1308 var accLength=0; +1309 +1310 for( var i=0; i<this.pathSegments.length; i++ ) { +1311 if (accLength<=iLength && iLength<=this.pathSegments[i].getLength()+accLength) { +1312 iLength-= accLength; +1313 var pointInPath= this.pathSegments[i].getPositionFromLength(iLength); +1314 this.newPosition.x= pointInPath.x; +1315 this.newPosition.y= pointInPath.y; +1316 break; +1317 } +1318 accLength+= this.pathSegments[i].getLength(); +1319 } +1320 +1321 return this.newPosition; +1322 }, +1323 /** +1324 * Paints the path. +1325 * This method is called by CAAT.PathActor instances. +1326 * If the path is set as interactive (by default) path segment will draw curve modification +1327 * handles as well. +1328 * +1329 * @param director {CAAT.Director} a CAAT.Director instance. 1330 */ -1331 release : function() { -1332 this.ax= -1; -1333 this.ay= -1; -1334 }, -1335 /** -1336 * Returns an integer with the number of path segments that conform this path. -1337 * @return {number} +1331 paint : function( director ) { +1332 for( var i=0; i<this.pathSegments.length; i++ ) { +1333 this.pathSegments[i].paint(director,this.interactive); +1334 } +1335 }, +1336 /** +1337 * Method invoked when a CAAT.PathActor stops dragging a control point. 1338 */ -1339 getNumSegments : function() { -1340 return this.pathSegments.length; -1341 }, -1342 /** -1343 * Gets a CAAT.PathSegment instance. -1344 * @param index {number} the index of the desired CAAT.PathSegment. -1345 * @return CAAT.PathSegment +1339 release : function() { +1340 this.ax= -1; +1341 this.ay= -1; +1342 }, +1343 /** +1344 * Returns an integer with the number of path segments that conform this path. +1345 * @return {number} 1346 */ -1347 getSegment : function(index) { -1348 return this.pathSegments[index]; -1349 }, -1350 -1351 numControlPoints : function() { -1352 return this.points.length; -1353 }, -1354 -1355 getControlPoint : function(index) { -1356 return this.points[index]; -1357 }, +1347 getNumSegments : function() { +1348 return this.pathSegments.length; +1349 }, +1350 /** +1351 * Gets a CAAT.PathSegment instance. +1352 * @param index {number} the index of the desired CAAT.PathSegment. +1353 * @return CAAT.PathSegment +1354 */ +1355 getSegment : function(index) { +1356 return this.pathSegments[index]; +1357 }, 1358 -1359 /** -1360 * Indicates that some path control point has changed, and that the path must recalculate -1361 * its internal data, ie: length and bbox. -1362 */ -1363 updatePath : function(point) { -1364 var i,j; -1365 -1366 this.length=0; -1367 this.bbox.setEmpty(); -1368 this.points= []; -1369 -1370 for( i=0; i<this.pathSegments.length; i++ ) { -1371 this.pathSegments[i].updatePath(point); -1372 this.length+= this.pathSegments[i].getLength(); -1373 this.bbox.unionRectangle( this.pathSegments[i].bbox ); -1374 -1375 for( j=0; j<this.pathSegments[i].numControlPoints(); j++ ) { -1376 this.points.push( this.pathSegments[i].getControlPoint( j ) ); -1377 } -1378 } -1379 -1380 this.width= this.bbox.width; -1381 this.height= this.bbox.height; -1382 -1383 this.pathSegmentStartTime= []; -1384 this.pathSegmentDurationTime= []; -1385 -1386 var i; -1387 for( i=0; i<this.pathSegments.length; i++) { -1388 this.pathSegmentStartTime.push(0); -1389 this.pathSegmentDurationTime.push(0); -1390 } -1391 -1392 for( i=0; i<this.pathSegments.length; i++) { -1393 this.pathSegmentDurationTime[i]= this.getLength() ? this.pathSegments[i].getLength()/this.getLength() : 0; -1394 if ( i>0 ) { -1395 this.pathSegmentStartTime[i]= this.pathSegmentStartTime[i-1]+this.pathSegmentDurationTime[i-1]; -1396 } else { -1397 this.pathSegmentStartTime[0]= 0; -1398 } -1399 -1400 this.pathSegments[i].endPath(); -1401 } -1402 -1403 this.extractPathPoints(); -1404 -1405 return this; +1359 numControlPoints : function() { +1360 return this.points.length; +1361 }, +1362 +1363 getControlPoint : function(index) { +1364 return this.points[index]; +1365 }, +1366 +1367 /** +1368 * Indicates that some path control point has changed, and that the path must recalculate +1369 * its internal data, ie: length and bbox. +1370 */ +1371 updatePath : function(point) { +1372 var i,j; +1373 +1374 this.length=0; +1375 this.bbox.setEmpty(); +1376 this.points= []; +1377 +1378 var xmin= Number.MAX_VALUE, ymin= Number.MAX_VALUE; +1379 for( i=0; i<this.pathSegments.length; i++ ) { +1380 this.pathSegments[i].updatePath(point); +1381 this.length+= this.pathSegments[i].getLength(); +1382 this.bbox.unionRectangle( this.pathSegments[i].bbox ); +1383 +1384 for( j=0; j<this.pathSegments[i].numControlPoints(); j++ ) { +1385 var pt= this.pathSegments[i].getControlPoint( j ); +1386 this.points.push( pt ); +1387 if ( pt.x < xmin ) { +1388 xmin= pt.x; +1389 } +1390 if ( pt.y < ymin ) { +1391 ymin= pt.y; +1392 } +1393 } +1394 } +1395 +1396 this.clipOffsetX= -xmin; +1397 this.clipOffsetY= -ymin; +1398 +1399 this.width= this.bbox.width; +1400 this.height= this.bbox.height; +1401 this.setLocation( this.bbox.x, this.bbox.y ); +1402 this.bbox.x= 0; +1403 this.bbox.y= 0; +1404 this.bbox.x1= this.width; +1405 this.bbox.y1= this.height; 1406 -1407 }, -1408 /** -1409 * Sent by a CAAT.PathActor instance object to try to drag a path's control point. -1410 * @param x {number} -1411 * @param y {number} -1412 */ -1413 press: function(x,y) { -1414 if (!this.interactive) { -1415 return; -1416 } -1417 -1418 var HS= CAAT.Curve.prototype.HANDLE_SIZE/2; -1419 for( var i=0; i<this.pathSegments.length; i++ ) { -1420 for( var j=0; j<this.pathSegments[i].numControlPoints(); j++ ) { -1421 var point= this.pathSegments[i].getControlPoint(j); -1422 if ( x>=point.x-HS && -1423 y>=point.y-HS && -1424 x<point.x+HS && -1425 y<point.y+HS ) { -1426 -1427 this.point= point; -1428 return; -1429 } -1430 } -1431 } -1432 this.point= null; -1433 }, -1434 /** -1435 * Drags a path's control point. -1436 * If the method press has not set needed internal data to drag a control point, this -1437 * method will do nothing, regardless the user is dragging on the CAAT.PathActor delegate. -1438 * @param x {number} -1439 * @param y {number} -1440 */ -1441 drag : function(x,y) { -1442 if (!this.interactive) { -1443 return; -1444 } -1445 -1446 if ( null===this.point ) { -1447 return; -1448 } -1449 -1450 if ( -1===this.ax || -1===this.ay ) { -1451 this.ax= x; -1452 this.ay= y; -1453 } -1454 -1455 this.point.x+= x-this.ax; -1456 this.point.y+= y-this.ay; -1457 -1458 this.ax= x; -1459 this.ay= y; -1460 -1461 this.updatePath(this.point); -1462 }, -1463 /** -1464 * Returns a collection of CAAT.Point objects which conform a path's contour. -1465 * @param iSize {number}. Number of samples for each path segment. -1466 * @return {[CAAT.Point]} -1467 */ -1468 getContour : function(iSize) { -1469 var contour=[]; -1470 for( var i=0; i<=iSize; i++ ) { -1471 contour.push( new CAAT.Point().set( i/iSize, this.getPosition(i/iSize).y, 0 ) ); -1472 } -1473 -1474 return contour; -1475 }, -1476 -1477 /** -1478 * Reposition this path points. -1479 * This operation will only take place if the supplied points array equals in size to -1480 * this path's already set points. -1481 * @param points {Array<CAAT.Point>} -1482 */ -1483 setPoints : function( points ) { -1484 if ( this.points.length===points.length ) { -1485 for( var i=0; i<points.length; i++ ) { -1486 this.points[i].x= points[i].x; -1487 this.points[i].y= points[i].y; -1488 } -1489 } -1490 return this; -1491 }, -1492 -1493 /** -1494 * Set a point from this path. -1495 * @param point {CAAT.Point} -1496 * @param index {integer} a point index. -1497 */ -1498 setPoint : function( point, index ) { -1499 if ( index>=0 && index<this.points.length ) { -1500 this.points[index].x= point.x; -1501 this.points[index].y= point.y; -1502 } -1503 return this; -1504 }, -1505 -1506 -1507 /** -1508 * Removes all behaviors from an Actor. -1509 * @return this -1510 */ -1511 emptyBehaviorList : function() { -1512 this.behaviorList=[]; -1513 return this; -1514 }, -1515 -1516 extractPathPoints : function() { -1517 if ( !this.pathPoints ) { -1518 var i; -1519 this.pathPoints= []; -1520 for ( i=0; i<this.numControlPoints(); i++ ) { -1521 this.pathPoints.push( this.getControlPoint(i).clone() ); -1522 } -1523 } -1524 -1525 return this; -1526 }, -1527 -1528 /** -1529 * Add a Behavior to the Actor. -1530 * An Actor accepts an undefined number of Behaviors. -1531 * -1532 * @param behavior {CAAT.Behavior} a CAAT.Behavior instance +1407 this.pathSegmentStartTime= []; +1408 this.pathSegmentDurationTime= []; +1409 +1410 var i; +1411 for( i=0; i<this.pathSegments.length; i++) { +1412 this.pathSegmentStartTime.push(0); +1413 this.pathSegmentDurationTime.push(0); +1414 } +1415 +1416 for( i=0; i<this.pathSegments.length; i++) { +1417 this.pathSegmentDurationTime[i]= this.getLength() ? this.pathSegments[i].getLength()/this.getLength() : 0; +1418 if ( i>0 ) { +1419 this.pathSegmentStartTime[i]= this.pathSegmentStartTime[i-1]+this.pathSegmentDurationTime[i-1]; +1420 } else { +1421 this.pathSegmentStartTime[0]= 0; +1422 } +1423 +1424 this.pathSegments[i].endPath(); +1425 } +1426 +1427 this.extractPathPoints(); +1428 +1429 return this; +1430 +1431 }, +1432 /** +1433 * Sent by a CAAT.PathActor instance object to try to drag a path's control point. +1434 * @param x {number} +1435 * @param y {number} +1436 */ +1437 press: function(x,y) { +1438 if (!this.interactive) { +1439 return; +1440 } +1441 +1442 var HS= CAAT.Curve.prototype.HANDLE_SIZE/2; +1443 for( var i=0; i<this.pathSegments.length; i++ ) { +1444 for( var j=0; j<this.pathSegments[i].numControlPoints(); j++ ) { +1445 var point= this.pathSegments[i].getControlPoint(j); +1446 if ( x>=point.x-HS && +1447 y>=point.y-HS && +1448 x<point.x+HS && +1449 y<point.y+HS ) { +1450 +1451 this.point= point; +1452 return; +1453 } +1454 } +1455 } +1456 this.point= null; +1457 }, +1458 /** +1459 * Drags a path's control point. +1460 * If the method press has not set needed internal data to drag a control point, this +1461 * method will do nothing, regardless the user is dragging on the CAAT.PathActor delegate. +1462 * @param x {number} +1463 * @param y {number} +1464 */ +1465 drag : function(x,y) { +1466 if (!this.interactive) { +1467 return; +1468 } +1469 +1470 if ( null===this.point ) { +1471 return; +1472 } +1473 +1474 if ( -1===this.ax || -1===this.ay ) { +1475 this.ax= x; +1476 this.ay= y; +1477 } +1478 +1479 this.point.x+= x-this.ax; +1480 this.point.y+= y-this.ay; +1481 +1482 this.ax= x; +1483 this.ay= y; +1484 +1485 this.updatePath(this.point); +1486 }, +1487 /** +1488 * Returns a collection of CAAT.Point objects which conform a path's contour. +1489 * @param iSize {number}. Number of samples for each path segment. +1490 * @return {[CAAT.Point]} +1491 */ +1492 getContour : function(iSize) { +1493 var contour=[]; +1494 for( var i=0; i<=iSize; i++ ) { +1495 contour.push( new CAAT.Point().set( i/iSize, this.getPosition(i/iSize).y, 0 ) ); +1496 } +1497 +1498 return contour; +1499 }, +1500 +1501 /** +1502 * Reposition this path points. +1503 * This operation will only take place if the supplied points array equals in size to +1504 * this path's already set points. +1505 * @param points {Array<CAAT.Point>} +1506 */ +1507 setPoints : function( points ) { +1508 if ( this.points.length===points.length ) { +1509 for( var i=0; i<points.length; i++ ) { +1510 this.points[i].x= points[i].x; +1511 this.points[i].y= points[i].y; +1512 } +1513 } +1514 return this; +1515 }, +1516 +1517 /** +1518 * Set a point from this path. +1519 * @param point {CAAT.Point} +1520 * @param index {integer} a point index. +1521 */ +1522 setPoint : function( point, index ) { +1523 if ( index>=0 && index<this.points.length ) { +1524 this.points[index].x= point.x; +1525 this.points[index].y= point.y; +1526 } +1527 return this; +1528 }, +1529 +1530 +1531 /** +1532 * Removes all behaviors from an Actor. 1533 * @return this 1534 */ -1535 addBehavior : function( behavior ) { -1536 this.behaviorList.push(behavior); -1537 // this.extractPathPoints(); -1538 return this; -1539 }, -1540 /** -1541 * Remove a Behavior from the Actor. -1542 * If the Behavior is not present at the actor behavior collection nothing happends. -1543 * -1544 * @param behavior {CAAT.Behavior} a CAAT.Behavior instance. -1545 */ -1546 removeBehaviour : function( behavior ) { -1547 var n= this.behaviorList.length-1; -1548 while(n) { -1549 if ( this.behaviorList[n]===behavior ) { -1550 this.behaviorList.splice(n,1); -1551 return this; -1552 } -1553 } -1554 -1555 return this; -1556 }, -1557 /** -1558 * Remove a Behavior with id param as behavior identifier from this actor. -1559 * This function will remove ALL behavior instances with the given id. -1560 * -1561 * @param id {number} an integer. -1562 * return this; -1563 */ -1564 removeBehaviorById : function( id ) { -1565 for( var n=0; n<this.behaviorList.length; n++ ) { -1566 if ( this.behaviorList[n].id===id) { -1567 this.behaviorList.splice(n,1); -1568 } -1569 } -1570 -1571 return this; -1572 -1573 }, -1574 -1575 applyBehaviors : function(time) { -1576 // if (this.behaviorList.length) { -1577 for( var i=0; i<this.behaviorList.length; i++ ) { -1578 this.behaviorList[i].apply(time,this); -1579 } -1580 -1581 /** calculate behavior affine transform matrix **/ -1582 this.setATMatrix(); -1583 -1584 for (i = 0; i < this.numControlPoints(); i++) { -1585 this.setPoint( -1586 this.matrix.transformCoord( -1587 this.pathPoints[i].clone()), i); -1588 } -1589 // } -1590 -1591 return this; -1592 }, -1593 -1594 setATMatrix : function() { -1595 this.matrix.identity(); +1535 emptyBehaviorList : function() { +1536 this.behaviorList=[]; +1537 return this; +1538 }, +1539 +1540 extractPathPoints : function() { +1541 if ( !this.pathPoints ) { +1542 var i; +1543 this.pathPoints= []; +1544 for ( i=0; i<this.numControlPoints(); i++ ) { +1545 this.pathPoints.push( this.getControlPoint(i).clone() ); +1546 } +1547 } +1548 +1549 return this; +1550 }, +1551 +1552 /** +1553 * Add a Behavior to the Actor. +1554 * An Actor accepts an undefined number of Behaviors. +1555 * +1556 * @param behavior {CAAT.Behavior} a CAAT.Behavior instance +1557 * @return this +1558 */ +1559 addBehavior : function( behavior ) { +1560 this.behaviorList.push(behavior); +1561 // this.extractPathPoints(); +1562 return this; +1563 }, +1564 /** +1565 * Remove a Behavior from the Actor. +1566 * If the Behavior is not present at the actor behavior collection nothing happends. +1567 * +1568 * @param behavior {CAAT.Behavior} a CAAT.Behavior instance. +1569 */ +1570 removeBehaviour : function( behavior ) { +1571 var n= this.behaviorList.length-1; +1572 while(n) { +1573 if ( this.behaviorList[n]===behavior ) { +1574 this.behaviorList.splice(n,1); +1575 return this; +1576 } +1577 } +1578 +1579 return this; +1580 }, +1581 /** +1582 * Remove a Behavior with id param as behavior identifier from this actor. +1583 * This function will remove ALL behavior instances with the given id. +1584 * +1585 * @param id {number} an integer. +1586 * return this; +1587 */ +1588 removeBehaviorById : function( id ) { +1589 for( var n=0; n<this.behaviorList.length; n++ ) { +1590 if ( this.behaviorList[n].id===id) { +1591 this.behaviorList.splice(n,1); +1592 } +1593 } +1594 +1595 return this; 1596 -1597 var m= this.tmpMatrix.identity(); -1598 var mm= this.matrix.matrix; -1599 var c,s,_m00,_m01,_m10,_m11; -1600 var mm0, mm1, mm2, mm3, mm4, mm5; -1601 -1602 var bbox= this.bbox; -1603 var bbw= bbox.width ; -1604 var bbh= bbox.height ; -1605 var bbx= bbox.x; -1606 var bby= bbox.y +1597 }, +1598 +1599 applyBehaviors : function(time) { +1600 // if (this.behaviorList.length) { +1601 for( var i=0; i<this.behaviorList.length; i++ ) { +1602 this.behaviorList[i].apply(time,this); +1603 } +1604 +1605 /** calculate behavior affine transform matrix **/ +1606 this.setATMatrix(); 1607 -1608 mm0= 1; -1609 mm1= 0; -1610 mm3= 0; -1611 mm4= 1; -1612 -1613 mm2= this.tb_x - bbx; -1614 mm5= this.tb_y - bby; -1615 -1616 if ( this.rb_angle ) { +1608 for (i = 0; i < this.numControlPoints(); i++) { +1609 this.setPoint( +1610 this.matrix.transformCoord( +1611 this.pathPoints[i].clone().translate( this.clipOffsetX, this.clipOffsetY )), i); +1612 } +1613 // } +1614 +1615 return this; +1616 }, 1617 -1618 var rbx= (this.rb_rotateAnchorX*bbw + bbx); -1619 var rby= (this.rb_rotateAnchorY*bbh + bby); +1618 setATMatrix : function() { +1619 this.matrix.identity(); 1620 -1621 mm2+= mm0*rbx + mm1*rby; -1622 mm5+= mm3*rbx + mm4*rby; -1623 -1624 c= Math.cos( this.rb_angle ); -1625 s= Math.sin( this.rb_angle); -1626 _m00= mm0; -1627 _m01= mm1; -1628 _m10= mm3; -1629 _m11= mm4; -1630 mm0= _m00*c + _m01*s; -1631 mm1= -_m00*s + _m01*c; -1632 mm3= _m10*c + _m11*s; -1633 mm4= -_m10*s + _m11*c; -1634 -1635 mm2+= -mm0*rbx - mm1*rby; -1636 mm5+= -mm3*rbx - mm4*rby; -1637 } -1638 -1639 if ( this.sb_scaleX!=1 || this.sb_scaleY!=1 ) { -1640 -1641 var sbx= (this.sb_scaleAnchorX*bbw + bbx); -1642 var sby= (this.sb_scaleAnchorY*bbh + bby); -1643 -1644 mm2+= mm0*sbx + mm1*sby; -1645 mm5+= mm3*sbx + mm4*sby; -1646 -1647 mm0= mm0*this.sb_scaleX; -1648 mm1= mm1*this.sb_scaleY; -1649 mm3= mm3*this.sb_scaleX; -1650 mm4= mm4*this.sb_scaleY; -1651 -1652 mm2+= -mm0*sbx - mm1*sby; -1653 mm5+= -mm3*sbx - mm4*sby; -1654 } -1655 -1656 mm[0]= mm0; -1657 mm[1]= mm1; -1658 mm[2]= mm2; -1659 mm[3]= mm3; -1660 mm[4]= mm4; -1661 mm[5]= mm5; +1621 var m= this.tmpMatrix.identity(); +1622 var mm= this.matrix.matrix; +1623 var c,s,_m00,_m01,_m10,_m11; +1624 var mm0, mm1, mm2, mm3, mm4, mm5; +1625 +1626 var bbox= this.bbox; +1627 var bbw= bbox.width ; +1628 var bbh= bbox.height ; +1629 var bbx= bbox.x; +1630 var bby= bbox.y +1631 +1632 mm0= 1; +1633 mm1= 0; +1634 mm3= 0; +1635 mm4= 1; +1636 +1637 mm2= this.tb_x - bbx; +1638 mm5= this.tb_y - bby; +1639 +1640 if ( this.rb_angle ) { +1641 +1642 var rbx= (this.rb_rotateAnchorX*bbw + bbx); +1643 var rby= (this.rb_rotateAnchorY*bbh + bby); +1644 +1645 mm2+= mm0*rbx + mm1*rby; +1646 mm5+= mm3*rbx + mm4*rby; +1647 +1648 c= Math.cos( this.rb_angle ); +1649 s= Math.sin( this.rb_angle); +1650 _m00= mm0; +1651 _m01= mm1; +1652 _m10= mm3; +1653 _m11= mm4; +1654 mm0= _m00*c + _m01*s; +1655 mm1= -_m00*s + _m01*c; +1656 mm3= _m10*c + _m11*s; +1657 mm4= -_m10*s + _m11*c; +1658 +1659 mm2+= -mm0*rbx - mm1*rby; +1660 mm5+= -mm3*rbx - mm4*rby; +1661 } 1662 -1663 return this; +1663 if ( this.sb_scaleX!=1 || this.sb_scaleY!=1 ) { 1664 -1665 }, -1666 -1667 setRotationAnchored : function( angle, rx, ry ) { -1668 this.rb_angle= angle; -1669 this.rb_rotateAnchorX= rx; -1670 this.rb_rotateAnchorY= ry; -1671 return this; -1672 }, -1673 -1674 setScaleAnchored : function( scaleX, scaleY, sx, sy ) { -1675 this.sb_scaleX= scaleX; -1676 this.sb_scaleAnchorX= sx; -1677 this.sb_scaleY= scaleY; -1678 this.sb_scaleAnchorY= sy; -1679 return this; -1680 }, -1681 -1682 setLocation : function( x, y ) { -1683 this.tb_x= x; -1684 this.tb_y= y; -1685 return this; -1686 } -1687 -1688 }; -1689 -1690 extend( CAAT.Path, CAAT.PathSegment, null); -1691 -1692 })(); \ No newline at end of file +1665 var sbx= (this.sb_scaleAnchorX*bbw + bbx); +1666 var sby= (this.sb_scaleAnchorY*bbh + bby); +1667 +1668 mm2+= mm0*sbx + mm1*sby; +1669 mm5+= mm3*sbx + mm4*sby; +1670 +1671 mm0= mm0*this.sb_scaleX; +1672 mm1= mm1*this.sb_scaleY; +1673 mm3= mm3*this.sb_scaleX; +1674 mm4= mm4*this.sb_scaleY; +1675 +1676 mm2+= -mm0*sbx - mm1*sby; +1677 mm5+= -mm3*sbx - mm4*sby; +1678 } +1679 +1680 mm[0]= mm0; +1681 mm[1]= mm1; +1682 mm[2]= mm2; +1683 mm[3]= mm3; +1684 mm[4]= mm4; +1685 mm[5]= mm5; +1686 +1687 return this; +1688 +1689 }, +1690 +1691 setRotationAnchored : function( angle, rx, ry ) { +1692 this.rb_angle= angle; +1693 this.rb_rotateAnchorX= rx; +1694 this.rb_rotateAnchorY= ry; +1695 return this; +1696 }, +1697 +1698 setScaleAnchored : function( scaleX, scaleY, sx, sy ) { +1699 this.sb_scaleX= scaleX; +1700 this.sb_scaleAnchorX= sx; +1701 this.sb_scaleY= scaleY; +1702 this.sb_scaleAnchorY= sy; +1703 return this; +1704 }, +1705 +1706 setLocation : function( x, y ) { +1707 this.tb_x= x; +1708 this.tb_y= y; +1709 return this; +1710 } +1711 +1712 }; +1713 +1714 extend( CAAT.Path, CAAT.PathSegment, null); +1715 +1716 })(); \ No newline at end of file diff --git a/src/model/actor.js b/src/model/actor.js index 14c86235..e5c6e363 100644 --- a/src/model/actor.js +++ b/src/model/actor.js @@ -45,9 +45,11 @@ this.modelViewMatrix= new CAAT.Matrix(); this.worldModelViewMatrix= new CAAT.Matrix(); + /* this.modelViewMatrixI= new CAAT.Matrix(); this.worldModelViewMatrixI= new CAAT.Matrix(); this.tmpMatrix= new CAAT.Matrix(); + */ this.resetTransform(); this.setScale(1,1); @@ -69,7 +71,7 @@ CAAT.Actor.prototype= { - tmpMatrix : null, +// tmpMatrix : null, lifecycleListenerList: null, // Array of life cycle listener diff --git a/src/model/actorCSS.js b/src/model/actorCSS.js index 00bc97ca..34303fc5 100644 --- a/src/model/actorCSS.js +++ b/src/model/actorCSS.js @@ -48,16 +48,18 @@ this.modelViewMatrix= new CAAT.Matrix(); this.worldModelViewMatrix= new CAAT.Matrix(); + /* this.modelViewMatrixI= new CAAT.Matrix(); this.worldModelViewMatrixI= new CAAT.Matrix(); this.tmpMatrix= new CAAT.Matrix(); + */ return this; }; CAAT.Actor.prototype= { - tmpMatrix : null, +// tmpMatrix : null, lifecycleListenerList: null, // Array of life cycle listener behaviorList: null, // Array of behaviors to apply to the Actor diff --git a/src/model/conpoundimage.js b/src/model/conpoundimage.js index 05b51174..ee49fec1 100644 --- a/src/model/conpoundimage.js +++ b/src/model/conpoundimage.js @@ -7,12 +7,13 @@ (function() { - CAAT.SpriteImageHelper= function(x,y,w,h) { + CAAT.SpriteImageHelper= function(x,y,w,h, iw, ih) { this.x= x; this.y= y; this.width= w; this.height= h; + this.setGL( x/iw, y/ih, (x+w-1)/iw, (y+h-1)/ih ); return this; }; @@ -234,7 +235,7 @@ var u1 = u + w; var v1 = v + h; - helper= new CAAT.SpriteImageHelper().setGL( + helper= new CAAT.SpriteImageHelper(u,v,(u1-u),(v1-v),tp.width,tp.height).setGL( u / tp.width, v / tp.height, u1 / tp.width, @@ -248,7 +249,7 @@ sx0 = ((i % this.columns) | 0) * this.singleWidth; sy0 = ((i / this.columns) | 0) * this.singleHeight; - helper= new CAAT.SpriteImageHelper( sx0, sy0, this.singleWidth, this.singleHeight ); + helper= new CAAT.SpriteImageHelper( sx0, sy0, this.singleWidth, this.singleHeight, image.width, image.height ); this.mapInfo[i]= helper; } } @@ -626,7 +627,9 @@ value.x, value.y, value.width, - value.height + value.height, + image.width, + image.height ); this.mapInfo[key]= helper; @@ -640,6 +643,80 @@ } return this; + }, + + /** + * + * @param image + * @param map + */ + initializeAsFontMap : function( image, map ) { + this.initialize( image, 1, 1 ); + + var key; + var helper; + var count=0; + + for( key in map ) { + var value= map[key]; + + helper= new CAAT.SpriteImageHelper( + value.x, + value.y, + value.width, + value.height, + image.width, + image.height + ); + + helper.xoffset= typeof value.xoffset==='undefined' ? 0 : value.xoffset; + helper.yoffset= typeof value.yoffset==='undefined' ? 0 : value.yoffset; + helper.xadvance= typeof value.xadvance==='undefined' ? value.width : value.xadvance; + + this.mapInfo[key]= helper; + + // set a default spriteIndex + if ( !count ) { + this.setAnimationImageIndex( [key] ); + } + + count++; + } + + return this; + }, + + stringWidth : function( str ) { + var i,l,w=0,charInfo; + + for( i=0, l=str.length; i