CAAT.Actor

Actor Events

An Actor instance has mouse events enabled by default. The mouse control methods are the following:

function mouseEnter(mouseEvent)
Triggered whenever the mouse enters the rectangular area of an Actor. The Actor can be transformed by rotations and scales. That means that CAAT will perform perfect pixel collision detection so the mouse arrow must be inside the contour of the Actor despite the transformation applied to id.
mouseExit(mouseEvent)
Exactly like in mouseEnter, but when leaving the Actors contour.
mouseMove(mouseEvent)
Triggered whenever the mouse arrow traverses inside the Actor's contour.
mouseDown(mouseEvent)
Triggered whenever we press the mouse button inside the Actor's contour.
mouseUp(mouseEvent)
Same as mouseDown but when releasing the mouse button.
mouseClick(mouseEvent)
Triggered whenever a click has been generated on the Actor. That means that previously a mouseDown and then a mouseDown have been triggered on the Actor.
mouseDblClick(mouseEvent)
Same as mouseClick but double click.
mouseDrag(mouseEvent)
Triggered after we perform an equivalent to mouseMove after having done mouseDown. After dragging, when releasing the mouse button, only mouseUp will be triggered avoiding to trigger mouseClick event.

All these methods receive a unique parameter of type CAAT.MouseEvent. It contains the following information:

screenPoint
The 2D point of the screen coordinate that originated the mouse event.
x,y the same as screenPoint but w/o being wrapped in an object.
point
The 2D point of local Actor coordinates. Remember that local coordinates are from (0,0) to actor's (width,height). These 2D point is derived from the screenPoint.
modifiers
Modifiers will tell you whether some special keys where pressed during the mouse input. The CAAT.MouseEvent class has some methods to check for these special keys.
time
The Scene time (more on this later) at which the event was produced.
source
The actor the event was produced at.

If an Actor instance is not supposed to process input from mouse, a call to enableEvents(false) must be explicitly called. This method can be called at any given time with a boolean parameter to set or reset mouse handling.

Two methods of CAAT.Actor instances will change default mouse event handling methods for others:

function enableDrag(). Will set mouse methods to allow an actor instance's drag. Some drag modifiers such as shift, control and shift+control will change actor's rotation and scale.
function setAsButton(). Will set mouse methods to allow a given actor behave as a button.

Other input types such as keys and accelerometer are handled directly by CAAT.Director instances.

Example

In this example, you can see some rectangle-shaped actors with other rectangle child inside.

A CAAT.ActorContainer can contain any number of Actors and hence any number of other ActorContainer instances.

            var director_1 = new CAAT.Director().initialize(
                    600,120,
                    document.getElementById('_c1'));

            var scene_1=     director_1.createScene().setFillStyle('#fff');
            
            // make the scene clear background and draw a black rectangle
            scene_1.paint= function(director, time) {
                var ctx= director.ctx;
                ctx.fillStyle= this.fillStyle;
                ctx.fillRect(0,0,this.width,this.height);
                ctx.strokeStyle= '#000';
                ctx.strokeRect(0,0,this.width-1,this.height-1);
            }


            // create six actors for this scene.
            for(var i=0; i<6; i++ ) {

                // rectangle shaped actors of 80x80 pixels.
                var s = 80;

                // containers can contain other actors or containers.
                var _c1_container = new CAAT.ActorContainer().
                        setBounds(i*100+10, 20, s, s).
                        setRotation( Math.PI*2*Math.random() ).
                        setFillStyle('#ff3fff').
                        enableDrag();

                _c1_container.name = 'rectangle'+i;
                // set container paint routine to draw an arrow
                _c1_container.paint= function(director, time) {

                    var crx= director.ctx;

                    // fill actor
                    crx.fillStyle= this.fillStyle;
                    crx.fillRect(0,0,this.width,this.height );

                    // outline it.
                    crx.strokeStyle= 'black';
                    crx.strokeRect(0,0,this.width,this.height );

                    // draw a white arrow. just to point where position 0,0 is.
                    crx.strokeStyle='white';
                    crx.beginPath();
                    crx.moveTo(5,10);
                    crx.lineTo(20,10);
                    crx.lineTo(15,5);

                    crx.moveTo(20,10);
                    crx.lineTo(15,15);

                    crx.lineWidth=2;
                    crx.lineJoin='round';
                    crx.lineCap='round';

                    crx.stroke();
                };

                // add actor to scene.
                scene_1.addChild(_c1_container);

                // create a container.
                var _c1_container_child= new CAAT.ActorContainer().
                        setBounds(s/2,s/2,s/4,s/4).
                        setRotation( Math.PI*2*Math.random() ).
                        setFillStyle('#00ff00').
                        enableDrag();

                // set a custom paint function for children inside containers.
                _c1_container_child.paint= function(director,time) {
                    // call default container paint method.
                    CAAT.ActorContainer.superclass.paint.call(this,director,time);
                    var ctx= director.ctx;

                    // fill a white circle of 10x10 pixels at position 2,2
                    // just to show where 0,0 is positioned on screen.
                    ctx.fillStyle='white';
                    ctx.beginPath();
                    ctx.arc(7,7,5,0,2*Math.PI,false);
                    ctx.fill();
                }


                // add this container as a child of the previous created container.
                _c1_container.addChild(_c1_container_child);
            }

            // set animation to 10fps.
            CAAT.loop(10);