Javascript Winwheel在与图像进行反应时

我使用winwheel.js库在ReactJS中渲染一个轮子，如下所示

我试图用一个图像替换轮子，如标准JS中这个非常清晰的示例所示。但是，只要我更改

drawMode:“image”

轮子就根本不会渲染

反应中是否有我遗漏的东西？先谢谢你

import React, { useEffect, useState } from 'react';
import Winwheel from './Winwheel';

function App() {

const img = require('./planes.png');
useEffect(() => {
    window.winwheel = new Winwheel({
          canvasId: "myCanvas",
          numSegments: 4,
          drawMode   : 'code',
          wheelImage : {img},
          segments   :               
            [
               {'text' : 'T-55 Vampire'},
               {'text' : 'P-40 Kittyhawk'},
               {'text' : 'North American Harvard'},
               {'text' : 'L-39C Albatross'}
            ],
          animation: {
            type: "spinToStop",
            duration: 5,
            spins: 8,
          },
        });
    }, [])


  return <canvas id="myCanvas" width="880" height="300"></canvas>;

};

export default App;

import React，{useffect，useState}来自“React”；
从“/Winwheel”导入Winwheel；
函数App（）{
const img=require（'./planes.png'）；
useffect（（）=>{
window.winwheel=新winwheel({
canvasId：“我的画布”，
数字段：4，
drawMode:'代码'，
wheelImage:{img}，
部分：
[
{'text'：'T-55吸血鬼'}，
{'text'：'P-40 Kittyhawk'}，
{'text'：'北美哈佛'}，
{'text'：'L-39C信天翁'
],
动画：{
类型：“旋转停止”，
持续时间：5，
旋转：8，
},
});
}, [])
返回；
};
导出默认应用程序；

更新的代码-控制盘仍未渲染：

import React, { useEffect, useState } from 'react';
import Winwheel from './Winwheel'

function App() {

  useEffect(() => {

    window.winwheel = new Winwheel({
          canvasId: "myCanvas",
          numSegments: 4,
          drawMode   : 'image',
          segments   :               
            [
               {'text' : 'T-55 Vampire'},
               {'text' : 'P-40 Kittyhawk'},
               {'text' : 'North American Harvard'},
               {'text' : 'L-39C Albatross'}
            ],
          animation: {
            type: "spinToStop",
            duration: 5,
            spins: 8,
          },
    });

    let loadedImg = new Image();

    loadedImg.onload = function() {
      window.winwheel.wheelImage = loadedImg;
      window.winwheel.draw();
    }
    loadedImg.src = './planes.png';
  }, [])


  return <canvas id="myCanvas" width="880" height="300" ></canvas>;

};

export default App;

import React，{useffect，useState}来自“React”；
从“./Winwheel”导入Winwheel
函数App（）{
useffect（（）=>{
window.winwheel=新winwheel({
canvasId：“我的画布”，
数字段：4，
drawMode:'图像'，
部分：
[
{'text'：'T-55吸血鬼'}，
{'text'：'P-40 Kittyhawk'}，
{'text'：'北美哈佛'}，
{'text'：'L-39C信天翁'
],
动画：{
类型：“旋转停止”，
持续时间：5，
旋转：8，
},
});
让loadedImg=newimage（）；
loadedImg.onload=函数（）{
window.winwheel.wheelImage=loadedImg；
window.winwheel.draw（）；
}
loadedImg.src='./planes.png'；
}, [])
返回；
};
导出默认应用程序；

更新代码-车轮图像在开始旋转时消失：

import React, { useEffect, useState } from 'react';
import Winwheel from './Winwheel';
import image  from './planes.png';

function App() {
    useEffect(() => {
      window.winwheel = new Winwheel({
        canvasId: "myCanvas",
        numSegments: 4,
        drawMode   : 'image',
        animation: {
          type: "spinToStop",
          duration: 5,
          spins: 8,
        },
      });
 }, [])

 function handleLoaded() {
  window.winwheel.wheelImage = document.getElementById('image');
  window.winwheel.draw();
 }

 return (
  <>
    <canvas id="myCanvas" width="880" height="300" ></canvas>
    <img id="image" src={image} style={{display: "none"}} onLoad={() => handleLoaded()}/>
  </>
 )
};

export default App;

import React，{useffect，useState}来自“React”；
从“/Winwheel”导入Winwheel；
从“/planes.png”导入图像；
函数App（）{
useffect（（）=>{
window.winwheel=新winwheel({
canvasId：“我的画布”，
数字段：4，
drawMode:'图像'，
动画：{
类型：“旋转停止”，
持续时间：5，
旋转：8，
},
});
}, [])
函数handleLoaded（）{
window.winwheel.wheelImage=document.getElementById（'image'）；
window.winwheel.draw（）；
}
返回(
handleLoaded（）}/>
)
};
导出默认应用程序；

您是否尝试在末尾添加

winwheel.draw（）

？

我将其添加为useEffect中的最后一行，并出现以下错误：

TypeError:未能在“CanvasRenderingContext2D”上执行“drawImage”：提供的值不是类型（CSSImageValue或HTMLImageElement或SVGImageElement或HTMLVideoElement或HtmlCanvaElement或ImageBitmap或OffscreenCanvas或VideoFrame）“

我更新了帖子中的代码，添加了绘图功能，但是滚轮仍然没有被渲染。我还缺少什么吗？再次感谢您需要等待图像加载。谢谢，我更新了帖子中的代码。图像现在加载正确，但是当我旋转滚轮时，图像消失了-有什么想法吗？