Winwheel.js class reference: Pin


This small class contains properties for an optional visual element of Winwheels called Pins. These are small circles near the outside of the wheel which are meant to represent the Pins/Pegs sticking out of real life prizewheels.


A Winwheel has only one property of the Pin class, called Pins.


See tutorial #18 Displaying Pins for an example.


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.pins.visible = true;


Name Description Default
visible By default the pins are displayed if specified as part of the parameters of the wheel. Set this to false if you don't want the pins which exist for a wheel to displayed at some point. true
number The number of pins. The pins are spaced evenly around the wheel so with the default number of 36 there is pin loacted very 10 degrees around the 360 degrees of the wheel. Alter this number to adjust how often around the wheel the pins appear. 36
outerRadius Controls the size of the pins; the number of pixels the radius of the circles which make up the pins is. Value should just be numeric, do NOT include 'px' in the value. 3
fillStyle Basically the fill colour of the pins. Can be any valid HTML5 canvas fill style. grey
strokeStyle Basically the line colour of the pins. Can be any valid HTML5 stroke style. black
lineWidth The width of the line around the outside of the pins. 1
margin The margin between the pins and the outside of the wheel. Use this to adjust the location of the pins. If set to 0 the pins will sit right on the outerRadius of the Winwheel, setting the margin to a positive value will move the pins inward towards the center of the wheel. 3
responsive If set to true the size of the pin will be scaled down by the responsive feature of a Winwheel. false


Methods


Constructor

Creates an object of the Pin class.


	 Winwheel.pins = new Pin(JSON options);

Normally you do not call the pin 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 pin constructor when creating one for itself. For example... 

<script>
    let theWheel = new Winwheel({
        'numSegments'  : 4,
		'pins'		   :
		{
			'fillStyle'   : '#4e38f3',
			'outerRadius' : 5,
			'margin'	  : 8
		},
        'segments'     :
        [
            {'fillStyle' : '#eae56f', 'text' : 'Segment 1'},
            {'fillStyle' : '#89f26e', 'text' : 'Segment 2'},
            {'fillStyle' : '#7de6ef', 'text' : 'Segment 3'},
            {'fillStyle' : '#e7706f', 'text' : 'Segment 4'}
        ]
    });
</script>

If you are happy with the default properties of the Pins you can actually just set 'pins': true in the Winwheel parameters to make the pins appear.



Previous:
< Pointer Guide Class Reference 		Next:
Helper Functions >