Winwheel.js class reference: Segment


The segment class contains properties 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. See tutorial #16 Creating Pie graphs for an example of this.



Properties


Most properties are null by default which means global values for the Winwheel will be used when rendering the segments, unless a value has been specifically set for a segment and then that is used instead.


Name Description Default
size The size of the segment in terms of degrees of arc 0-360. Leave null for automatic.

See tutorial #16 Creating Pie graphs for an example.
null
text The text to be rendered in the segment. To do multiline text use the newline \n character in the string where you want the line break.

See tutorial #3 Segment Colour and Text for an example.
'' (empty string)
fillStyle Fill style of the segment, can be any valid HTML5 fillStyle including solid colours, colours with alpha and gradients.

See tutorial #7 Colours, Lines, and Fonts for an example.
null
strokeStyle The line style. Can be any valid HTML5 stroke style.

See tutorial #7 Colours, Lines, and Fonts for an example.
null
lineWidth Width of the line in pixels. Do not 'px' on the end, just specify numeric value.

See tutorial #7 Colours, Lines, and Fonts for an example.
null
textFontFamily Named font to be used in rendering the text. E.g. 'Verdana', 'Arial'.

See tutorial #7 Colours, Lines, and Fonts for an example.
null
textFontSize Size of the font in pixels. Value must be numeric, don't include 'px' on the end.

See tutorial #7 Colours, Lines, and Fonts for an example.
null
textFontWeight Named or numeric font weight such as 'bold', 'normal', 300.

See tutorial #7 Colours, Lines, and Fonts for an example.
null
textOrientation The orientation of the text. Valid options are 'horizontal', 'vertical', 'curved'.

See tutorial #6 Text Alignment and Orientation for an example.
null
textAlignment Alignment of the text. Options are 'inner', 'outer', 'center'.

See tutorial #6 Text Alignment and Orientation for an example.
null
textDirection Sets the direction of the text. Options are 'normal' and 'reversed'.

See tutorial #6 Text Alignment and Orientation for an example.
null
textMargin Margin in pixels before or after the text (depends on alignment). Must be numeric, do not include 'px' on the end.

See tutorial #6 Text Alignment and Orientation for an 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.

See tutorial #7 Colours, Lines, and Fonts for an 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.

See tutorial #7 Colours, Lines, and Fonts for an example.
null
textLineWidth Numeric width of the lines around text in pixels. Do not include 'px' in the value.

See tutorial #7 Colours, Lines, and Fonts for an example.
null
image Name / path to the image for this segment. Used only when wheel drawMode is 'segmentImage'.

See tutorial #17 Creating a Wheel with one Image per segment for an example of using this.
null
imageDirection Direction of the image for the segment. Can be N, E, S, W (North, East, South, West). If not specified for the segment the global value of imageDirection for the Winwheel is used.

See tutorial #17 Creating a Wheel with one Image per segment for an example of using this.
null
imgData Image object used to actually store the image data when creating a wheel out of segment images. The winhweel.js code will load the image specified in the image property in to here at time of wheel creation or when the changeImage() function is called.

See tutorial #17 Creating a Wheel with one Image per segment for an example of using this.
null



Methods


Constructor

Creates an object of the Segment class.


	 Winwheel.segments[1] = new Segment(JSON options);

Normally you do not call the segment constructor directly, but instead specify the properties of segments in the structure passed to the Winwheel object constructor. It then sends these on to the Segment constructor when creating the many segments which make up the wheel.

<script>
    var myWheel = new Winwheel({
        'numSegments'  : 4,
        'segments'     :		// Specify segments and their properties.
        [
            {'fillStyle' : '#eae56f', 'text' : 'Segment 1'},
            {'fillStyle' : '#89f26e', 'text' : 'Segment 2'},
            {'fillStyle' : '#7de6ef', 'text' : 'Segment 3'},
            {'fillStyle' : '#e7706f', 'text' : 'Segment 4'}
        ]
    });
</script>

Note that if you want to add additional segments to a wheel after the wheel has been created, you should use the Winwheel.addSegment() function. See tutorial #5 Adding and Removing Segments for an example.


changeImage

Changes the image displayed for a segment by loading the image specified in to the imgData property, then re-rendering the wheel.


	 Winwheel.segments[1].changeImage(image, imageDirection=null);


Parameter Description Default
image Name / path to the image to change to.
imageDirection Direction of the image. Optional. If null global default is used, or the value that currently exists for the segment. null



Previous:
< Winwheel Class Reference
Next:
Animation Class Reference >