CAAT.Actor

Caching actors as bitmaps

The method cacheAsBitmap() creates an image representation of the actor the method is invoked for. The main objective is to cache complex drawing routines into an image to avoid recreating it constantly. It is suited for example for TextActors which drawing operations are quite timely expensive or for any custom drawing actor.

Any CAAT.Actor instance already takes care of drawing the cached image instead of the stroked/filled text. It is developers responsibility to do it if the paint or paintActorGL methods have been overridden.

As it was expected, the cached image will be wrapped into a CAAT.SpriteImage of one row by one column. That means if the cached image is to be accessed in a webGL environment (or just needs be accessed) it could be obtained the associated HTMLCanvasElement by calling actor.backgroundImage.image.

Example

The following example shows some leaning cached text actors.


                function __scene(director) {

                function __scene(director) {

                    var scene= director.createScene();

                    var cc1 = new CAAT.ActorContainer().
                            setBounds(0, 100, 700, 300).
                            create().
                            enableEvents(false);
                    scene.addChild(cc1);

                    cc1.addBehavior(
                            new CAAT.RotateBehavior().
                                    setCycle(true).
                                    setFrameTime(0, 4000).
                                    setValues(-Math.PI / 8, Math.PI / 8, 50, 0).    // anchor at 50%, 0%
                                    setInterpolator(
                                    new CAAT.Interpolator().createExponentialInOutInterpolator(3, true))
                            );

                    var gradient = director.crc.createLinearGradient(0, 0, 0, 50);
                    gradient.addColorStop(0, '#00ff00');
                    gradient.addColorStop(0.5, 'red');
                    gradient.addColorStop(1, 'blue');

                    var text = new CAAT.TextActor().
                            setFont("50px sans-serif").
                            setText("Conpound Path").
                            calcTextSize(director).
                            setAlign("center").
                            setFillStyle(gradient).
                            setOutline(true).
                            setOutlineColor('white').
                            cacheAsBitmap();
                    cc1.addChild(text.setLocation((cc1.width - text.textWidth) / 2, 0));

                    var text2 = new CAAT.TextActor().
                            setFont("50px sans-serif").
                            setText("Quadric,Cubic,Line segments").
                            calcTextSize(director).
                            setAlign("center").
                            setFillStyle(gradient).
                            setOutline(true).
                            setOutlineColor('white').
                            cacheAsBitmap();
                    cc1.addChild(text2.setLocation((cc1.width - text2.textWidth) / 2, 50));

                    var text4 = new CAAT.TextActor().
                            setFont("50px sans-serif").
                            setText("Fish path").
                            calcTextSize(director).
                            setAlign("center").
                            setFillStyle(gradient).
                            setOutline(true).
                            setOutlineColor('white').
                            cacheAsBitmap();
                    cc1.addChild( text4.setLocation((cc1.width - text4.textWidth) / 2, 100) );

                    var text3 = new CAAT.TextActor().
                            setFont("50px sans-serif").
                            setText("Interpolators").
                            calcTextSize(director).
                            setAlign("center").
                            setFillStyle(gradient).
                            setOutline(true).
                            setOutlineColor('white').
                            cacheAsBitmap();
                    cc1.addChild(text3.setLocation((cc1.width - text3.textWidth) / 2, 150));

                }

                function __init()   {

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

                    __scene(director);

                    CAAT.loop(30);
                }

                __init();