Slice paths for wheelnav - Source code: wheelnav.slicePath.js

Basic - Click it and create your own!

Number of slices

Pie

Flower

Donut

Cog

Star

Menu

Line

Eye

Some inspiration? Fork it!

Inspiration - for special cases

PieArrow

YinYang

Tab

Wheel

Web

Winter

Tutorial - how to build and customize

Helper methods


reset

MoveTo

LineTo

ArcTo

ArcBackTo

Here is the default TutorialSlice.
The slicePathString is an array and holds the commands for drawing. Every drawing command starts from previous command's end point. End points are absolute coordinates.
The MoveToCenter method doesn't need parameter.
The array must be ended by Close() method for proper fill.

MoveTo
The MoveTo command requires an angle and a length to move pen in the slice.
SVG specification: moveto.

LineTo
The LineTo command requires an angle and a length to draw a line in the slice.
SVG specification: lineto.

ArcTo
The ArcTo command requires a radius, an angle and a length to draw an elliptical arc in the slice.
SVG specification: arc curve.

ArcBackTo
The ArcBackTo command requires a radius, an angle and a length to draw a reverse elliptical arc in the slice.
SVG specification: arc curve. 



            

        


        


        

            

                

            

            

                
Customization

                

                
reset

                
Basic

                
Init

                
Hover

                
Selected


                
                

                
                

                    

                        

                            Here is the default PieSlice.
                            

                            The slices can be customizable via 'custom' parameter.
                            There are helper classes to hold customizable properties.
                            The helper class for PieSlice is the PieSliceCustomization.
                        

                    

                    

                        

                            Basic
                            

                            Customize the basic state with slicePathCustom property.
                        

                    

                    

                        

                            Init
                            

                            Customize the initial state with sliceInitPathCustom property.
                        

                    

                    

                        

                            Hover
                            

                            Customize the hover state  with sliceHoverPathCustom property.
                        

                    

                    

                        

                            Selected
                            

                            Customize the selected state with sliceSelectedPathCustom property.