dougTesting.net : Winwheel.js class reference: Segment

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>
    let theWheel = 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 >