dougTesting.net

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

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

    let 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'}
        ]
    });

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

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

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

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

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