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.


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



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...

    var myWheel = 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'}

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.

< Pointer Guide Class Reference
Helper Functions >