CAAT.Actor

Actor Paint method

The method paint(director, time) allows developers to create custom drawing routines. Default paint method implementation manages background image and/or color.

With the director parameter, the developer can get directly a canvas 2D rendering context by accessing the attribute director.ctx. This context instance is in save state, that means CAAT has already stacked transformations, transparency, etc. so the developer simply can issue context drawing commands w/o worrying about context state. Don't waste your time calling ctx.save() and restore().

See Sumon's source code for multiple paint method overriding examples.

Override correctly

When overriding the paint method, you must take into account that CAAT actors can be cached. This is done by calling cacheAsBitmap( time, hint ); as explained in Actor CacheAsBitmap.

A correct paint custom implementation must honor a cached as bitmap actor, with the following code:

                actor.paint= function( director, time ) {
                    if ( this.isCached() ) {
                        <Class_that_extends_Actor_or_ActorContainer>.prototype.paint.call(this,director,time);
                        return;
                    }

                    // Add your custom paint code here.
                }

Actor Paint method (WebGL)

When dealing with WebGL enabled contexts, the paintActorGL(director,time) will be called.

The developer must take into account that the context instance is not a 2D rendereing context but a webGL one, so the rendering context drawing primitives are not available.

CAAT only offers availability to draw polylines and must be improved the way it does so take this possibility with care. This method will be changed shortly as well as more drawing primitives will be added.

Actor Paint method (CSS/DOM)

Since DOM/CSS can't handle any drawing primitive, in this renderer the paint method is simply ignored.

Example

The following example shows an actor which faces an arrow to the mouse position.


            function __scene(director) {

                var scene= director.createScene();

                var bg= new CAAT.ActorContainer().
                        setBounds(0,0,director.width,director.height);

                // custom paint: stroke a bounding rectangle
                bg.paint= function(director,time) {
                    var ctx= director.ctx;
                    ctx.stokeStyle='black';
                    ctx.strokeRect(0,0,bg.width,bg.height);
                };

                scene.addChild(bg);

                var arrow= new CAAT.Actor().
                        setBounds(0,0,director.width,director.height).
                        enableEvents(false);
                bg.addChild(arrow);

                // custom paint: draw a proportional arrow
                // DOES NOT HONOR CACHED_AS_BITMAP ACTORS !!!
                arrow.paint= function(director, time) {

                    var ctx= director.ctx;
                    var gap= 80;

                    // build a random color
                    var color= 'rgb(';
                    color+= time%255;
                    color+=',';
                    color+= (time>>8)&255;
                    color+=',';
                    color+= 0xa0;
                    color+=')';

                    ctx.strokeStyle= color;
                    ctx.beginPath();
                    ctx.moveTo(gap, bg.height / 2);
                    ctx.lineTo(bg.width - gap, bg.height/2);
                    ctx.lineTo( bg.width - gap - (bg.height / 4), bg.height / 4);

                    ctx.moveTo(bg.width - gap, bg.height/2);
                    ctx.lineTo(bg.width - gap - (bg.height / 4), bg.height / 2 + bg.height / 4);

                    ctx.lineWidth=15;
                    ctx.lineJoin='round';
                    ctx.lineCap='round';

                    ctx.stroke();
                };

                // make the arrow face the mouse position
                bg.mouseMove= function(e) {
                    var angle= Math.atan2(
                            e.y - arrow.height / 2,
                            e.x - arrow.width / 2 );
                    arrow.setRotation(angle);
                }
            }

            function __init()   {

                var director = new CAAT.Director().
                        initialize(500,500, document.getElementById('_c1'));

                __scene(director);

                CAAT.loop(30);
            }

            __init();