dougTesting.net

<script>
	let theWheel = new Winwheel({
		'canvasId'       : 'myCanvas',
		'numSegments'    : 12,
		'innerRadius'	 : 50,
		'fillStyle'      : '#e7706f',
		'lineWidth'      : 3.
		'textFontFamily' : 'Verdana',
		'textFontSize'   : 30
    });
</script>

Methods

Constructor

Creates an object of the Winwheel class.

	let theWheel = new Winwheel(JSON options, boolean drawWheel=true);

Parameter	Description	Default
options	JSON structure containing the properties of the wheel and sub-objects such as all the segments and the animation.	Refer to list of Winwheel properties above.
drawWheel	Controls if the wheel is drawn at time of creation on the canvas. Set to false to prevent this.	true

See tutorial #2 Constructor Parameters for an example of passing the options.

addSegment

This function allows a new segment to be added to the wheel properly at the specified position in the segments array (default is at the end). The properties of the new segment can be passed in via the options JSON structure.

	let newSegment = theWheel.addSegment(JOSN options, int position=null);

Parameter	Description	Default
options	JSON structure of properties for the segment just like those passed to the Winwheel constructor when specifying the segments.
position	Position in the Winwheel.segments array the segment is to be added at. The default is at the end of the wheel so the new segment appears after the currently last segment. If another value is specified the new segment will be interested in to that location in the segments array after the existing ones are moved along to make a gap. Note the segments array starts at 1, not 0, so to put a segment first specify 1 as the location.	The end of the wheel

Returns: a reference to the newly created segment object.

See tutorial #5 Adding and Removing Segments for an example.

clearCanvas

Completely clears the canvas the wheel is drawn on. Used internally to clear the canvas before the wheel is rendered on if the clearTheCanvas property is set to true.

	theWheel.clearCanvas();

computeAnimation

Called from the startAnimation() function before the animation is started to compute a number of properties based on the animation type specified.

	theWheel.computeAnimation();

degToRad

Helper function used internally to convert from degrees to radians during drawing.

	let radians = theWheel.degToRad(float d);

Parameter	Description	Default
d	Value in degrees.

Returns: a number.

deleteSegment

Use this function to delete a segment from the wheel at the specified position in the Wheel's segments array. This function takes care up updating a number of things under the hood once the segment is removed.

	theWheel.deleteSegment(int position=null);

Parameter	Description	Default
position	Position in the wheel's segments array to be deleted. Remember the segments array of the wheel starts at 1 not 0.	The last segment

See tutorial #5 Adding and Removing Segments for an example.

draw

Draws the wheel on the canvas. You will need to call this to render any changes to the wheel after it has been created.

	theWheel.draw(boolean clearTheCanvas=true);

Parameter	Description	Default
clearTheCanvas	When called manually if you don't want the canvas cleared pass false. When called internally the clearTheCanvas parameter is passed the value from the Winwheel.clearTheCanvas property.	true

See tutorial #4 Altering Segment Properties for an example.

drawPointerGuide

Draws the pointer guide line on the canvas from the center of the wheel out to the edge at the angle specified in the Winwheel.pointerAngle property. Used during development and debugging to ensure the pointerAngle lines up with the visuals of any prize pointer.

Called internally from the wheel's draw function when the Winwheel.pointerGuide.display property is set to true. Can also be called manually after the creation of the wheel to display the pointer guide.

	theWheel.drawPointerGuide();

See tutorial #13 Getting the segment (prize) pointed to for more about the pointer guide.

drawSegments

Called from the draw() function of the wheel when drawMode = 'code' (the default) to draw all of the segments which make up the wheel. Loops through the segments array of the Winwheel and uses html canvas functions to draw lines and arcs to create the shapes and fill them.

If specified, uses the properties of the segment to draw it, or falls back to global values.

	theWheel.drawSegments();

drawSegmentText

Called from the draw() function of the wheel to draw the text in the segments. Segment text can be displayed when wheel is made of code drawn segments or a graphically rich image. The drawText property of the wheel controls if this function is called from the draw() function of the wheel.

If specified, uses the properties of the segment to draw the text, or falls back to global values.

	theWheel.drawSegmentText();

drawWheelImage

Called from the draw() function of the wheel when the wheel is rendered using a graphically rich image (drawMode = 'image').

	theWheel.drawWheelImage();

getIndicatedSegment

Returns a reference to the segment pointed to / indicated by the prize pointer (well actually just where the pointerAngle is). Useful after a spinning animation has stopped to get the prize indicated by the prize pointer so you can inform the user of what they have won, perhaps even do some further animation.

	let segment = theWheel.getIndicatedSegment();

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

getIndicatedSegmentNumber

Similar to the above but returns the number / position of the segment in the wheel's .segments array of the indicated segment.

	let segmentNumber = theWheel.getIndicatedSegmentNumber();

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

getRandomForSegment

Calculates and returns a random stop angle inside the specified segment of the wheel.

	let angle = theWheel.getRandomForSegment(int segmentNumber);

Parameter	Description	Default
segmentNumber	The number / position of the segment in the Wheel's .segments array the random angle should be computed for.

See tutorial #14 Setting the Prize to be won before spinning for an example.

getRotationPosition

Returns the rotation angle of the wheel corrected to 0-360 (i.e. removes all the multiples of 360). Used in the the feature which works out the segment pointed to when the spinning has stopped.

	let angle = theWheel.getRotationPosition();

getSegmentAt

Returns a reference to the segment located at the specified x and y position or null if there is no segment located there. Can be used in conjunction with a click event to get the segment a user clicked.

	let segment = theWheel.getSegmentAt(int x, int y);

Parameter	Description	Default
x	X coordinate of the mouse.
y	Y coordinate of the mouse.

Returns: a reference to a segment object if one was found at that location, otherwise null.

See tutorial #15 Getting the segment clicked for an example.

getSegmentNumberAt

Similar to the above but only returns the number / position of the found segment in the Wheel's .segments array, if one was infact found.

	let segmentNumber = theWheel.getSegmentNumberAt(int x, int y);

Parameter	Description	Default
x	X coordinate of the mouse.
y	Y coordinate of the mouse.

Returns: if a segment was found at the x,y its position in the segments array of the wheel. Null if no segment found.

See tutorial #15 Getting the segment clicked for an example.

pauseAnimation

Pauses the Tween animation. Animations can then be resumed by calling resumeAnimation().

	theWheel.pauseAnimation();

See tutorial #12 Animation - More Details for an example.

resumeAnimation

Resumes a paused animation.

	theWheel.resumeAnimation();

See tutorial #12 Animation - More Details for an example.

setCanvasId

This function must be called if you want to change the canvas that the wheel is to be drawn on after the Winwheel object has been created. This function updates the .canvas and 2D context .ctx properties of the wheel to the new canvas so when .draw() is called the wheel draws on the different canvas.

	theWheel.setCanvasId(int canvasId);

Parameter	Description	Default
canvasId	Id of the canvas DOM element on the page the wheel is to use for drawing.

setCenter

This function sets the center location of the wheel, saves a line of code as don't have to set the .centerX and then the .centerY properties of the wheel individually.

	theWheel.setCenter(int x, int y);

Parameter	Description	Default
x	X coordinate, updates the centerX of the wheel.
y	Y coordinate, updates the centerY of the wheel.

See tutorial #8 Wheel Radius and Center Point for an example.

startAnimation

Begins the animation by first computing any needed animation properties and configuring the GreenSock Tween, then sets the animation going.

	theWheel.startAnimation();

See tutorial #12 Animation - More Details for an example.

stopAnimation

Stops the animation, then if a callbackFinished function is specified calls that provided it is allowed to callback.

	theWheel.stopAnimation(boolean canCallback=true);

Parameter	Description	Default
canCallback	If set to false then the code won't call the function specified as the callbackFinished on the animation.	true

See tutorial #12 Animation - More Details for an example.

updateSegmentSizes

Works out the segment sizes so that unless there is a set size for a segment it gets a equal share of the 360 degrees (or less if there is some segments with set sizes) which makes up the wheel.

This function is called automatically in the Winwheel constructor and also from the addSegment() and deleteSegment() functions of the wheel to maintain the complete circle.

Only time you may ever need to call this function is if animating a segments size so the others in the wheel adjust appropriately.

	theWheel.updateSegmentSizes();

windowToCanvas

Used internally to work out where on the canvas the user's mouse is when an event such as a click happens. Converts the clientX and clientY from the event in to coordinates on the canvas which can then be used, for example, to work out which segment the user clicked inside of.

	let loc = theWheel.windowToCanvas(int x, int y);

Parameter	Description	Default
x	X coordinate of the mouse.
y	Y coordinate of the mouse.

Returns: an object containing an x and y property.