javascript 未在callbackFinished上定义函数(winwheel库)

2ic8powd  于 2023-04-10  发布在  Java
关注(0)|答案(1)|浏览(99)

当我试图调用一个函数的callbackFinished属性内的动画winwheel我得到的功能是没有定义,而它的定义在同一个类。

import React from 'react'
import Winwheel from 'winwheel'
import TweenMax from 'gsap'

const Roulette = ({ width, height, canvasId}) => {
    let winWheel = null

    const wheelData = {}

    const animation = {
            'type': 'spinToStop',
            'duration': 5,
            'spins': 8,
            'easing': 'Power2.easeInOut',
            'callbackFinished': 'alertPrize()' //Error here, can't get alertPrize() function
    }

    wheelData['animation'] = animation
    
    function alertPrize()
    {
        createWheel()
        // Call getIndicatedSegment() function to return pointer to the segment pointed to on wheel.
        let winningSegment = winWheel.getIndicatedSegment();
        // Basic alert of the segment text which is the prize name.
        alert("You have won " + winningSegment.text + "!");
    }

    const startAnimation = () => {
        winWheel = null
        createWheel()
        winWheel.startAnimation()
    }

    const createWheel = () => {
        if (typeof window !== 'undefined' && winWheel == null) {
            winWheel = new Winwheel(wheelData)
        }
    }

    createWheel()

    return (
        <div>
            <canvas id={canvasId} width={width} height={height} className='z-0'>
                Canvas not supported
            </canvas>
            <button onClick={startAnimation} className='absolute w-full h-full top-0'></button>
        </div>
    )
}

有什么方法可以在callbackFinished上得到函数?

aemubtdh

aemubtdh1#

你需要将函数名作为string传递,而不是作为reference传递,这里是固定代码。

const animation = {
    'type': 'spinToStop',
    'duration': 5,
    'spins': 8,
    'easing': 'Power2.easeInOut',
    'callbackFinished': alertPrize
}

相关问题