CAAT.Path

Complex paths

This kind of path object, gives thorough control on path definition. It asumes new path segments can be added at any time.

Linear Path

To define a linear path, simply call the method setLinear on a CAAT.Path object instance. This method substitutes CAAT.LinearPath and is the preferred way of building paths.

                        var path= new CAAT.Path().
                                setLinear( x0,y0, x1,y1 );

Curve Path

To define a curve path, simply call either the method setQuadric(x0,y0, x1,y1, x2,y2) or setCubic( x0,y0, x1,y1, x2,y2, x3,y3) on a CAAT.Path object instance. This methods substitute CAAT.CurvePath and is the preferred way of building paths.

                        var path= new CAAT.Path().
                                setQuadric( x0,y0, x1,y1, x2,y2 );
                        var path2= new CAAT.Path().
                                setCubic( x0,y0, x1,y1, x2,y2, x3,y3 );

Complex Path

The procedure to define a complex path is to call beginPath() add segments to the path, and finally call either endPath() or closePath().

endPath will terminate adding segments, and closePath will add a final straight line segment to the very beginning point of the path.

Example


                    var p= new CAAT.Path().
                            beginPath(20,20).
                            addCubicTo( 30,80, 90,30, 50,70, 'red' ).
                            addQuadricTo( 80,60, 65,85, 'blue' ).
                            addLineTo( 99,40, 'rgb(0,255,255)' ).
                            endPath().
                            setInteractive(false);

The color parameters are optional, but since I want you to show the different path segments, i've included them. This block of code defines the following path:

This path does noe end with a call to closePath. By doing so, the result would be:

CAAT.Path objects have two interesting properties that other path types don't:

function setTranslation(offsetX,offsetY)
This method applies an extra displacement to the position calculated on path at any given time. As we already saw, an actor's 0,0, position is located at its top left corner. And by default an actor will traverse the path by locating this top left corner over the path. This method gets handy when we want in example, our Actor instances to traverse the path from its center, and not the top left right. So by calling setTranslation( actor.width/2, actor.height/2 ) on a CAAT.PathBehavior instance will solve that it.

function setAutoRotate( boolean )
This method will set the exact rotation angle needed to head from one point in the path to the next one. A CAAT.PathBehavior target Actor should not apply other rotations to make this method work properly.

The methods getBoundingBox, getLength, getPosition, getPositionFromLength, etc. will give its values by taking into account every path segment.