Winwheel.js class reference: Pointer Guide


This small class contains properties for the pointer guide which is a line starting from the center of the wheel drawn out past the edge (outerRadius) at the angle where the prize pointer is specified by the wheel's pointerAngle property.


The pointer guide can be helpful during development to ensure that visual elements such as the prize pointer, or whatever you have to visually indicate the prize which will be won if a segment of the wheel stops under it, is located where the code thinks it is.


A Winwheel has only one property of the PointerGuide class.


See tutorial #13 Getting the segment (prize) pointed to for an example of using the Pointer Guide.


Properties


The properties of this object can be specified as part of the structure passed to the Winwheel object (for example see constructor below) or after a Winwheel object has been created by using the dot operator to access or modify them like this Winwheel.pointerGuide.display = true;


Name Description Default
display By default the guide is not displayed. After wheel creation set Winwheel.pointerGuide.display = true; then call the Winwheel.draw(); function to have the guide rendered, or pass this in to the wheel's constructor as part of the JSON structure. false
strokeStyle Basically the line colour of the pointerGuide. Can be any valid HTML5 stroke style. red
lineWidth The width of the pointer guide line. 3


Methods


Constructor

Creates an object of the PointerGuide class.


	 Winwheel.pointerGuide = new PointerGuide(JSON options);

Normally you do not call the pointer guide constructor directly, but instead specify the properties of it in the structure passed to the Winwheel object constructor. It then sends these on to the pointer guide constructor when creating one for itself. For example... 

<script>
    let theWheel = new Winwheel({
        'numSegments'  : 4,
		'pointerAngle' : 45,
        'segments'     :
        [
            {'fillStyle' : '#eae56f', 'text' : 'Segment 1'},
            {'fillStyle' : '#89f26e', 'text' : 'Segment 2'},
            {'fillStyle' : '#7de6ef', 'text' : 'Segment 3'},
            {'fillStyle' : '#e7706f', 'text' : 'Segment 4'}
        ],
		'pointerGuide' :		// Specify pointer guide properties.
		{
			'display'     : true,
			'strokeStyle' : 'red',
			'lineWidth'   : 3
		}
    });
</script>


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