zarocknz/javascript-winwheel

pointers doesnt appears at start by 'drawMode' = 'segmentImage'

MaliugaSergiy opened this issue · 2 comments

@zarocknz , I do not want to be annoying, but there it one more problems by me
when I use 'drawMode' : 'segmentImage', and try set pointer after involking your library

            let acanvas = document.getElementById('canvas');
                let ax = acanvas.getContext('2d');
                
                if (ax) {
                    drawTriangle();
                }

It doesn't appears at start/ Only as 'callbackAfter' : drawTriangle after spinning

it is happened only by 'drawMode' : 'segmentImage',
when i delete this line, pointer appers at start

Hi @MaliugaSergiy thanks for letting me know; I must not have tested this particular combination of parameters before. The triangle is disappearing because the wheel is drawn once all the images for the segments have loaded wiping anything currently on the canvas.

I think a check for a callback function is needed after the drawing of the wheel once all the segment images have loaded so that the triangle can be drawn again.

Please try altering Winwheel.js around line 2279 in the winwheelLoadedImage() function to be like this...

// If number of images loaded matches the segments then all the images for the wheel are loaded.
if (winwheelImageLoadCount == winwheelToDrawDuringAnimation.numSegments) {
    // Call draw function to render the wheel.
    winhweelAlreadyDrawn = true;
    winwheelToDrawDuringAnimation.draw();

    // ADD THIS...
    // If there is a callback function which is supposed to be called after the images for the wheel have loaded then call it.
    if (winwheelToDrawDuringAnimation.callbackLoaded != null) {
        // If the property is a function then call it, otherwise eval the proptery as javascript code.
        if (typeof winwheelToDrawDuringAnimation.callbackLoaded === 'function') {
            winwheelToDrawDuringAnimation.callbackLoaded();
        } else {
            eval(winwheelToDrawDuringAnimation.callbackLoaded);
        }
    }
}

This adds a check for callbackLoaded after the winwheelToDrawDuringAnimation.draw();

Then in your Winwheel.js config, after the 'drawmode' : 'segementImage' please add the following...

'callbackLoaded' : 'drawTriangle()',

Once these changes are made Winwheel.js should call the drawTriangle() function after the wheel has initially drawn. So hopefully its still visible on the canvas before the animation starts.

Kind regards,
DouG.