Other CAAT actors

CAAT.PathActor

A CAAT.PathActor object instance draws a path on screen. The path can be as complex as needed, and each path segment can have its own color.

This actors, simply delegates its drawing to the contained CAAT.Path object.

Besides drawing, this actors allows for real-time path segment manipulation. The addition of new segments and type change is not allowed, only path control points manipulation. As in the drawing, this actor delegates control point maniulation to the contained CAAT.Path object.

Refer to Chapter 8 - CAAT.Path to learn how to build complex paths.

To set a contained CAAT.PathActor object interactive, the method setInteractive( bool ) must be called. Setting this to true, will make this PathActor object instance to draw handles for each control points which can be moved dynamically. This setInteractive method can be called directly on the contained path object instance as well.

The method showBoundingBox : function(show, color) can be invoked to draw this path's bounding box on screen. If the color parameter is set, it will define the path bounding stroke style.

Example

In this example you can manipulate a complex path composed of a mix of quadric and cubic bezier segments.

                        var director= new CAAT.Foundation.Director().initialize(800,500,'_c1');
                        var scene= director.createScene().setFillStyle('#fff');

                        // path actor. to show the path and manipulate its control points.
                        var pa= new CAAT.Foundation.UI.PathActor().
                            setBounds(100,0,600,director.height).
                            setPath(
                                new CAAT.PathUtil.Path().
                                    beginPath(200,200).
                                    addCubicTo( 300,15, 400,10, 500,200 ).
                                    addQuadricTo( 550,300, 450,350 ).
                                    addQuadricTo( 400,400, 350,200 ).
                                    addCubicTo( 100,300, 300,450, 10,400).
                                    addQuadricTo( 40,200, 200,200 ).
                                    endPath() ).
                            setInteractive(true);


                        scene.addChild(pa);

                        CAAT.loop(20);