Winwheel.js class reference: Segment
The segment class contains properties and methods for the segments which make up the wheel. A wheel will have 1 or more segment objects in the wheel's segments array.
The properties of a segment are normally set in the JSON structure passed to the Winwheel object at time of its creation. Segments of the wheel can be accessed via the Winwheel's segments array, for example Winwheel.segments[2].text = "Hello World";
One of Winwheel.js features is you can add any additional properties you require to the objects of the segment class including passing them in the JSON structure at time of creation. Refer to tutorial #16 Creating Pie graphs for example of this.
Properties
Note most properties are null by default which means global values for the Winwheel will be used when rendering the segments in it.
| Name | Description | Default |
|---|---|---|
| size |
The size of the segment in terms of degrees of arc 0-360. Leave null for automatic.
Refer to tutorial #16 Creating Pie graphs for example. |
null |
| text |
The text to be rendered in the segment.
Refer to tutorial #3 Segment Colour and Text for example. |
'' (empty string) |
| fillStyle |
Fill style of the segment, can be any valid HTML5 fillStyle including solid colours, colours with alpha and gradients.
Refer to tutorial #7 Colours, Lines, and Fonts for example. |
null |
| strokeStyle |
The line style. Can be any valid HTML5 stroke style.
Refer to tutorial #7 Colours, Lines, and Fonts for example. |
null |
| lineWidth |
Width of the line in pixels. Do not 'px' on the end, just specify numeric value.
Refer to tutorial #7 Colours, Lines, and Fonts for example. |
null |
| textFontFamily |
Named font to be used in rendering the text. E.g. 'Verdana', 'Arial'.
Refer to tutorial #7 Colours, Lines, and Fonts for example. |
null |
| textFontSize |
Size of the font in pixels. Value must be numeric, don't include 'px' on the end.
Refer to tutorial #7 Colours, Lines, and Fonts for example. |
null |
| textFontWeight |
Named or numeric font weight such as 'bold', 'normal', 300.
Refer to tutorial #7 Colours, Lines, and Fonts for example. |
null |
| textOrientation |
The orientation of the text. Valid options are 'horizontal', 'vertical', 'curved'.
Refer to tutorial #6 Text Alignment and Orientation for example. |
null |
| textAlignment |
Alignment of the text. Options are 'inner', 'outer', 'center'.
Refer to tutorial #6 Text Alignment and Orientation for example. |
null |
| textDirection |
Sets the direction of the text. Options are 'normal' and 'reversed'.
Refer to tutorial #6 Text Alignment and Orientation for example. |
null |
| textMargin |
Margin in pixels before or after the text (depends on alignment). Must be numeric, do not include 'px' on the end.
Refer to tutorial #6 Text Alignment and Orientation for example. |
null |
| textFillStyle |
Fill colour or style for the text. Can be any valid HMTL5 fill style including solid colours, colours with alpha, or even gradients.
Refer to tutorial #7 Colours, Lines, and Fonts for example. |
null |
| textStrokeStyle |
Line colour or style for the text. Can be any valid HTML5 stroke style. Line width must also be > 0 in order for lines to be rendered.
Refer to tutorial #7 Colours, Lines, and Fonts for example. |
null |
| textLineWidth |
Numeric width of the lines around text in pixels. Do not include 'px' in the value.
Refer to tutorial #7 Colours, Lines, and Fonts for example. |
null |
Methods
Other than the constructor the Segment class has no methods as rendering of the segments of the wheel is done my the parent Winwheel class.
| Name | Description | Parameters |
|---|---|---|
| constructor |
The constructor of the segment class accepts single options parameter. Options
wanting to set at time of construction must be specified in JSON format.
Normally you would specify segment options at time of Winwheel object creation
and the code there passes down the options for each segment when adding them to itself.
Refer to tutorial #3 Segment Colour and Text for example of specifying segment options JSON at time of Winwheel creation. |
options [JSON structure] |
| < Winwheel Class Reference | Animation Class Reference > |