如何在React中的画布ctx上注册鼠标移动事件

Question

我刚刚完成了一门关于React的课程，并将之前的一个普通JS项目移植到React中作为学习练习。

在我之前的代码中(工作正常(，我有一个由2个HTML画布组成的堆栈，其中一个图像加载到底部ctx中，一个白色矩形加载到顶部ctx中。然后，我使用JS"mousemove"事件侦听器擦除顶部的白色矩形，以显示下面的图像。

我认为我已经非常接近React代码中的解决方案了。(如果你点击链接，你只会看到一个白色页面——那是图像顶部的白色矩形。我已经验证了图像确实在下面。(

我已经在useEffect((中加载了底部图像和顶部矩形，这样React在组件首次渲染时就不会得到任何未定义的画布ctx。然而，我在"eraseImageHandler"中连接橡皮擦功能时遇到了困难。你知道我做错了什么吗？谢谢

Answer 1

在初始渲染时，它不知道图像有多大，因此无法正确计算画布大小。如果图像的内在大小如下，那么它就可以计算出来

<Fragment>
<div className={classes.stack}>
<canvas ref={bottomCanvasRef} />
<canvas ref={topCanvasRef} onMouseMove={eraseImageHandler} />
</div>
<img
ref={imageRef}
hidden
width={300}
height={300}
src="https://upload.wikimedia.org/wikipedia/commons/4/41/Sunflower_from_Silesia2.jpg"
alt="Flower"
/>
</Fragment>