CAAT.Actor

Clip

Clipping is by default disabled on CAAT. Enabling it results in slowe performance, so it must be treated carefully. It can be enabled globally by setting CAAT.Actor.prototype.clip= true.

Optionally, the developer can enable/disable clipping for individual actors by settings Actor's clip attribute to true or false or by calling the method setClip(bool).

The clip area will the actor's bounding box with all its transformations applied.

Clip will work only on canvas and DOM/CSS renderers. I've still to implement the GL scissors for the webGL renderer.

Example

This example allows dragging of its content and subcontent. Use shift+alt+control to modify default drag behavior. One of the Scene Actors will have clipping enabled. You'll see that in one instance you're able to drag the inner green Actor outside the Magenta one area. But after dropping it outside its parent area, you won't be able to gain mouse control over the inner Actor again. This is because of the way CAAT routes events to its Actors. In order to send an event to an Actor, the Actor must be contained into its parent area. Period.


                var _director_5= new CAAT.Director().initialize(
                        600,
                        200,
                        document.getElementById('_c5') );

                var _scene_5= _director_5.createScene().setFillStyle('#c0c0c0');

                for(var i=0; i<2; i++ ) {

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

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

                    // set container paint routine to draw an arrow
                    _c5_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_5.addChild(_c5_container);

                    // create a container.
                    var _c5_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.
                    _c5_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.
                    _c5_container.addChild(_c5_container_child);
                }

                CAAT.loop(20);