CAAT.Actor

Actor Paint method

The method paint(director, time) allows developers to create custom drawing routines. CAAT's core functionality will call the default CAAT.Actor paint method which 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 must issue context drawing commands w/o worrying about context state.

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

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
                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();