问题标签 [react-canvas]

我是前端的初学者，我有一个用例允许用户选择图像并在其上绘制点。后来我想收集绘制点的坐标并用它们做一些基本的数学运算，比如计算距离、面积等。

我正在使用 react canvas draw 来完成绘图。下面是我到目前为止所做的粗略代码。

下图是结果。用户可以选择图像并在其上绘制东西（屏幕截图中缺少撤消和清除按钮）

以状态存储坐标数据是一种好方法吗？因为如果我想将其扩展到多个图像，这看起来不可扩展。

以下是我坚持并需要一些帮助的事情。

1. react-canvas-draw 读取 mouse-down 和 mouse-up 并根据鼠标指针绘制曲线。如何覆盖它以仅读取鼠标按下，以便我只会得到一个点而不是曲线？
2. 我想允许用户选择多个图像。如何更改<input>标签以实现此目的？
3. 我想在某种图库中显示多个图像。我没有找到太多关于如何做到这一点的资源。
4. 从图库中选择图像时，应该会弹出一个模态框，其中包含画布绘制组件。我该怎么做？

react-canvas-draw 是我在谷歌上找到的一个库。有没有更好的方法来实现这个而不使用 react-canvas-draw？

提前致谢。

我正在开发一个反应应用程序。目前我已经安装了 react@17.0.0 并且我有一些插件需要这个版本的 react。现在我也想使用 react-canvas，它需要 react@15.0.0。

安装 react-canvas 后的警告如下：npm WARN react-canvas@1.3.0 requires a peer of react@^15.0.0 but none is installed。您必须自己安装对等依赖项。

是否可以定义多个反应版本或类似的东西？因为我不能降级反应，因为其他插件和画布只运行反应版本 15。

我正在尝试在 react-native 上制作一些简单的动画。我正在使用react-native-canvas，它似乎很好地实现了普通的 html 画布，但我在真实设备上得到了一些可怕的闪烁。我在 iOS 模拟器上几乎没有闪烁，但 Android 模拟器很糟糕。

我当前的代码已经实现了我发现的以下建议：

• 利用requestAnimationFrame
• 双缓冲
• 帧率处理
• 避免对变量使用状态（因为它们会重新触发渲染）

我的目标是制作不闪烁的动画。我不介意在较慢的设备上播放速度较慢但闪烁对用户来说不是一种好感觉。

我做错了什么？

这是代码：

我创建了一个边界框，并且我有一个图像，我想在图像上添加该边界框。我已经尝试了很多，但没有任何效果。请指导我如何做到这一点。我已经在下面上传了我的代码

反应代码：

目前图像和框分开显示我想在图像上添加边界框请指导我如何做任何帮助将不胜感激

使用 getTrimmedCanvas 时出现上述错误。我读到在使用背景样式时会发生此错误，因为它需要白色背景或类似的东西。

还有更多代码，但我只粘贴了相关的东西。

感谢您的帮助！

我正在使用 canvasDraw，它在我的桌面上运行良好，但是当我在 android 中运行时出现此错误：Unable to preventDefault inside passive event listener invocation。

现在我探索可能的解决方案，作为 css touchAction:none 的设置属性在画布组件或 addEventlistener touchstart 到文档，没有任何效果。请帮帮我，库的名称是react-canvas-draw

我正在 React 上构建一个应用程序，我需要拍照，然后在上面画画，我为此使用“react-webcam”；拍摄照片，并在我使用 CanvasDraw 的图片上绘画时，我的问题是当我将图像传输到 CanvasDraw 时，它变得非常模糊，有没有人有想法，或者可能更改摄影和绘画库？谢谢大家我附上相关代码。