Winwheel.js tutorial: #8 Wheel Radius and Center Point


In this tutorial we will cover the wheel radius options (this controls the size) and also how to change where the center point of the wheel is on the canvas.


The properties involved are:

  1. outerRadius
  2. innerRadius
  3. centerX
  4. centerY


These can only be set globally for the whole wheel.



outerRadius


The outer radius controls the size of the wheel, the larger the radius the bigger the wheel. The default option, which we have been using in all previous tutorials, is automatically calculated by the code to be half the smallest side of the canvas minus the lineWidth so the wheel is as big as it can be fitting nicely inside the canvas.


However if you don't want the wheel to take up the entire canvas, or even want it to be bigger than the canvas you can set the outerRadius property to a whole or decimal number of your choosing.


To clarify further, the outerRadius is the number of pixels from the center point to the outside edge of the wheel, 2 x the radius is the diameter of the wheel (which you can think of as the width).


    var defaultWheel = new Winwheel({
        'numSegments' : 3,
        'fillStyle'   : '#7de6ef',
        'segments'    :                     // Allow this wheel to have the default radius.
        [
            {'text' : 'Default'},
            {'text' : 'Outer'},
            {'text' : 'Radius'}
        ]
    });

    var smallerWheel = new Winwheel({
        'numSegments'  : 3,
        'fillStyle'    : '#89f26e',
        'textFontSize' : 16,
        'textMargin'   : 3,
        'outerRadius'  : 80,                // Set outer radius as number.
        'segments'     :
        [
            {'text' : 'Smaller'},
            {'text' : 'Outer'},
            {'text' : 'Radius'}
        ]
    });

    var largerWheel = new Winwheel({
        'numSegments' : 3,
        'fillStyle'   : '#e7706f',
        'outerRadius' : 170,                // Larger the radius, the larger the wheel.
        'segments'    :
        [
            {'text' : 'Larger'},
            {'text' : 'Outer'},
            {'text' : 'Radius'}
        ]
    });
    


Default calculated to 1/2
Canvas not supported, please user another browser.
Set small
Canvas not supported, please user another browser.
Set large
Canvas not supported, please user another browser.


innerRadius


The innerRadius can be used to create hollow wheels (doughnuts), where the segments don't go to the center point of the wheel. The default for this is 0.


Like with outerRadius, the innerRadius is the number of pixels out from the center point of the wheel the inside edge is to be drawn. The larger the value the more hollow space will be inside the wheel.


    var smallWheel = new Winwheel({
        'numSegments'   : 3,
        'fillStyle'     : '#7de6ef',
        'innerRadius'   : 20,               // Set inner radius as number.
        'textAlignment' : 'inner',
        'segments'      :
        [
            {'text' : 'Small'},
            {'text' : 'Inner'},
            {'text' : 'Radius'}
        ]
    });

    var mediumWheel = new Winwheel({
        'numSegments'   : 3,
        'fillStyle'     : '#89f26e',
        'innerRadius'   : 70,
        'textAlignment' : 'inner',
        'segments'      :
        [
            {'text' : 'Medium'},
            {'text' : 'Inner'},
            {'text' : 'Radius'}
        ]
    });

    var largeWheel = new Winwheel({
        'numSegments'     : 3,
        'fillStyle'       : '#e7706f',
        'outerRadius'     : 120,
        'innerRadius'     : 90,             // The larger the inner radius, the bigger the
        'textFontSize'    : 20,             // hollow space inside the wheel.
        'textMargin'      : 0,
        'textFontFamily'  : 'Courier',
        'textOrientation' : 'curved',       // Curved text fits best inside.
        'segments'        :
        [
            {'text' : 'Large'},
            {'text' : 'Inner'},
            {'text' : 'Radius'}
        ]
    });
    


Small
Canvas not supported, please user another browser.
Medium
Canvas not supported, please user another browser.
Large
Canvas not supported, please user another browser.

As you can see from the second "Medium" example when the innerRadius is larger using the horizontal or vertical textOrientation to display text becomes an issue, unless you are happy with the text breaking outside the segments.


In the third "Large" example, the solution for the text is to use the 'curved' textOrientation option.



centerX and centerY


By default the code will place the wheel in the center of the canvas by automatically setting the centerX and centerY to half of width of the canvas and half the height.


If you don't want your Winning Wheel in the center of the canvas then you can simply pass the centerX or centerY as parameters to the Winwheel constructor, or set them via the wheel object after it has been created.


Valid values are whole or decimal numbers positive or negative. The location specified is the number of pixels from the left and top of the canvas. Don't include 'px' with the value.


The X axis is the crossways (horizontal) left to right. The Y axis is vertical down-up direction.


        var lowerRightWheel = new Winwheel({
            'numSegments': 5,
            'fillStyle'  : '#e7706f',
            'centerX'    : 200,         // Set x and y as number.
            'centerY'    : 200
        });
    
Y same as canvas height
Canvas not supported, please user another browser.
'centerY' : 260
Negative Y
Canvas not supported, please user another browser.
'centerY' : -20
Lower Right
Canvas not supported, please user another browser.
'centerY' : 200, 'centerX' : 200

As you can see when the Y is the same as the canvas height only the top half of a wheel is displayed, when the Y is 0 or negative you get the lower part of a wheel, and you can set the centerX and centerY to make the wheel appear anywhere on the canvas, in this example to the lower-right.



Previous:
< #7 Colours, Lines, and Fonts
Next:
#9: Creating a Wheel using an Image >