Winwheel.js class reference: Winwheel
The Winwheel class contains the bulk of the properties and methods for creating prize wheels.
The properties of a Winwheel are normally set in the JSON structure passed to the object at time of its creation. See tutorial #2 Constructor Parameters for an example.
One of Winwheel.js features is you can add any additional properties you require to the Winwheel object because anything included in the JSON structure not a property of the wheel will be added as such. This may come in handy for advanced developers.
Properties
Note that many segment properties can be specified globally for all here on the parent wheel object, or may be set individually for each segment.
| Name | Description | Default |
|---|---|---|
| canvasId |
Id of the canvas which the wheel is to draw on to. If you give your canvas the id of 'canvas' the wheel code will
use it automatically as that is the default.
Refer to tutorial #2 Constructor Parameters for example. |
canvas |
| centerX |
X position of the center of the wheel. The default is null which causes the wheel to be placed in center of the canvas.
Refer to tutorial #8 Wheel Radius and Center Point for example. |
null |
| centerY |
Y position of the center of the wheel. Default is null causing the wheel to be poistioned in the center of the canvas.
Refer to tutorial #8 Wheel Radius and Center Point for example. |
null |
| outerRadius |
The radius of the wheel from the center. If left null it will be set to the radius from the center of the canvas to its shortest side.
Refer to tutorial #8 Wheel Radius and Center Point for example. |
null |
| innerRadius |
Used to create hollow wheels (doughnuts). The larger the value the more hollow space inside the wheel.
Refer to tutorial #8 Wheel Radius and Center Point for example. |
0 |
| numSegments |
The number of segments the wheel is to have. In order for a wheel to be rendered it needs to have at least one segment.
Refer to tutorial #3 Constructor Parameters for example. |
1 |
| drawMode |
Specifies how the wheel is to be drawn. There is are 2 options 'code' where the wheel is created out of code drawn segments, and 'image' where
a graphically rich image is used for the face of the wheel.
Refer to tutorial #9 Creating a Wheel with an Image for example. |
code |
| rotationAngle |
The angle the wheel is rotated. The rotation angle is the property changed during spinning animations
though you can set the rotation angle at any time including specifying this in the parameters passed to the constructor.
Refer to tutorial #10 Prize Pointers and Wheel Backgrounds for example. |
0 |
| textFontFamily |
Named font to be used in rendering the text. E.g. 'Verdana', 'Arial'.
Refer to tutorial #7 Colours, Lines, and Fonts for example. |
Arial |
| textFontSize |
Size of the font in pixels. Value must be numeric, don't include 'px' on the end.
Refer to tutorial #7 Colours, Lines, and Fonts for example. |
20 |
| textFontWeight |
Named or numeric font weight such as 'bold', 'normal', 300.
Refer to tutorial #7 Colours, Lines, and Fonts for example. |
bold |
| textOrientation |
The orientation of the text. Valid options are 'horizontal', 'vertical', 'curved'.
Refer to tutorial #6 Text Alignment and Orientation for example. |
horizontal |
| textAlignment |
Alignment of the text. Options are 'inner', 'outer', 'center'.
Refer to tutorial #6 Text Alignment and Orientation for example. |
center |
| textDirection |
Sets the direction of the text. Options are 'normal' and 'reversed'.
Refer to tutorial #6 Text Alignment and Orientation for example. |
normal |
| textMargin |
Margin between the inner or outer of the wheel (depends on textAlignment). If the value is left null some is added by default
based on the font size to push the text away from edge of wheel. If you don't want any specify 0.
Refer to tutorial #6 Text Alignment and Orientation for 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.
Refer to tutorial #7 Colours, Lines, and Fonts for example. |
black |
| 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.
Refer to tutorial #7 Colours, Lines, and Fonts for example. |
null |
| textLineWidth |
Numeric width of the lines around text in pixels. Do not include 'px' in the value.
Refer to tutorial #7 Colours, Lines, and Fonts for example. |
1 |
| fillStyle |
The fill colour or style for all segments of the wheel unless specified for a particular segment (which overrides global value).
Refer to tutorial #7 Colours, Lines, and Fonts for example. |
sliver |
| strokeStyle |
The line colour or style for all segments of the wheel unless specified for a particular segment (which overrides global value).
Refer to tutorial #7 Colours, Lines, and Fonts for example. |
black |
| lineWidth |
The width of lines around the segments. Specify 0 if you don't want lines.
Refer to tutorial #7 Colours, Lines, and Fonts for example. |
1 |
| clearTheCanvas | When set to true the canvas on which the wheel is rendered is cleared before the wheel is drawn. Set to false if you are also drawing other things on the canvas you want to appear behind the wheel. | true |
| imageOverlay |
If set to true when the wheel has drawMode of image, the outline of the segments will be displayed over top of the image. Does nothing in code drawMode.
Useful for when creating wheels using a image to ensure where the code thinks the segments are lines up with the graphic.
Refer to tutorial #9 Creating a Wheel with an Image for example. |
false |
| drawText |
Set to false if you don't want the text of a segment to be drawn. Useful when creating pie graphs with segments
too small for text to fit inside or if you simply don't want the text displayed which may be the case
when the face of the wheel is a graphically rich image.
Refer to tutorial #9 Creating a Wheel with an Image for example. |
true for code wheels, false for image wheels |
| pointerAngle |
Angle around the wheel 0-360 where the prize pointer is located. You need to specify this to match where the pointer is
if you want to use the Winwheel feature which gets the prize pointed to when the spinning stops.
Refer to tutorial #13 Getting the segment (prize) pointed to for example. |
true for code wheels, false for image wheels |
| wheelImage |
Must be set to the image data of the image to be used for the face of wheel when trying to create a wheel
using graphically rich images.
Refer to tutorial #9 Creating a Wheel with an Image for example. |
true for code wheels, false for image wheels |
| //++ what about etx or ctx and any of the things created not part of default options array? //++ Same for segments as they have start and end angles too which are calculated. |
Methods
Here is a list of the methods in Winwheel.js which you can call to do things. //++ sort if will list all or internal things too, and how to tell which is which?
| Name | Description | Parameters |
|---|---|---|
| constructor |
The constructor of the Winwheel class accepts single options parameter.
Options wanting to set at time of construction must be specified in JSON format and can also
include the options for the segments and animation.
Refer to tutorial #2 Constructor Parameters for example of passing the parameters. |
options [JSON structure] |
| updateSegmentSizes |
This function sorts out the segment sizes. Some segments may have set sizes, for the others what is left out of
360 degrees is shared evenly. What this function actually does is set the start and end angle of each segment
which is needed in the drawing function which create the segment and by other features of the wheel.
Called from the Winwheel constructor after segment objects are added to the segments array of the class. Also when segments are added and updated. //++ what if segment size is changed during animation or just manually before a draw are the others re-sized. Need to test. |
|
| clearCanvas | This function clears the internal canvas, the internal is always cleared before each draw. //++ again to sort internal external thing, why are there 2 canvases still since rotation idea of just rotating internal on external failed. | |
| update | Used internally to update the wheel on the internal canvas. If you want to render change to the wheel call the draw() function instead. | clearTheCanvas |
| draw | This function draws the wheel on the canvas specified by the canvasId property first it calls the internal update function. | clearTheCanvas |
| drawPointerGuide | Draws a line from the center of the wheel to the outside at the angle where the code thinks the pointer is. Uses the properties of the pointerGuide object in the pointerGuide property of the Winwheel object to get colour and line width. | |
| drawWheelImage | This function is called when the wheel has drawMode of image and draws the image data for the face of the wheel on the canvas. | |
| drawSegments | Called when the wheel has drawMode of code. It loops though all the segments in the segments array of the wheel object and using a combination of global and segment specific properties draws the segments of the wheel. | |
| drawSegmentText | Using global or segment specific text properties draws the text for each segment. | |
| degToRad | Converts degrees to radians, used when drawing the segments and text. | d |
| setCenter |
This function sets the center location of the wheel, saves a line of code as don't have to
set the x and then the y property.
//++ Is this even used anywhere or mentioned in one of the tutorials? |
x,y |
| addSegment | This function allows a new segment to be added to the wheel at the specified poistion in the segments array. Options should be the JSON format parameters. | options,position |
| setCanvasId |
This function must be called if the canvasId is changed after wheel creation because we also need
to get the context of the new canvas.
//++ again is this called anywhere or mentioned in a tutorial. |
canvasId |
| deleteSegment | This function deletes the segment at the specified position and calls other functions to update the segment sizes etc. | position |
| windowToCanvas | This function takes the x an the y of a mouse event, such as click or move, and converts the x and the y in to co-ordinates on the canvas as the raw values are the x and the y from the top and left of the user's browser. Used in the Get Segment Clicked feature. | x,y |
| getSegmentAt | Returns the segment object located at the x and y on the canvas provided the user clicked inside a segment. Returns null if the user did not click inside a segment. | x,y |
| getSegmentNumberAt | Similar to the above but only returns the number of the segment in the segments array of the wheel. | x,y |
| updateExternalXY | Re-computes the wheel location on the external canvas. //++ to double-check if still needed. | |
| getIndicatedSegment | Returns pointer to the segment object located where the prize pointer of the wheel is. | |
| getIndicatedSegmentNumber | Similar to the above but only returns the number of the segment in the wheel's segments array. | |
| 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. | |
| startAnimation | Begins the animation by hooking in to GreenSock's animation loop, configures the Tween and then sets it going. | |
| stopAnimation | Stops the animation by killing the Tween and calling back any function specified as the callback. | callback |
| pauseAnimation | Wrapper over the tween.pause() function. Pauses the animation. //++ mention pause and resume in the advanced animation tutorial. | |
| resumeAnimation | Wrapper over the tween.play() function. Resumes the tween animation. | |
| computeAnimation | Called from the startAnimation() function before the animation is started to compute a number of properties based on the animation type specified. | |
| getRandomForSegment | Calculates and returns a random stop angle 0-360 degrees inside the specified segment of the wheel. To be on the safe side will not pick the very start or ending angle of the segment. | segmentNumber |
| < Winwheel Class Reference | Animation Class Reference > |