reactjs - 如何绘制正方形来标记对象。 ( react native )

标签 reactjs react-native react-animated react-image

我看到许多移动应用程序都有一个功能,用户可以绘制一个正方形来指示要在图像上标记的内容。

我正在构建人脸标记应用程序,基本上用户在图像上人脸的边界上绘制正方形

我已经在 Google 上搜索过很多次,但我不确定 RN 是否有一些用于标记的功能库。

我怎样才能实现这个目标?有没有什么好的库可以在图像上绘制正方形?如果我能记住它的坐标宽度、高度和矩形的位置那就更好了。

任何想法或建议都将受到高度赞赏!

这是下面的示例

enter image description here

最佳答案

您可以使用 React Native ART 库在图像上绘制形状。它是 React Native 附带的标准库(尽管默认情况下未链接到二进制文件)。

关于算法:

  • 渲染图像
  • 使用 React Native 的 ART.Surface 叠加图像
  • 检测点击以获取坐标并覆盖图像的其余部分
  • 获得点击坐标后,您就可以绘制所需的形状
  • 当用户移开手指时停止绘制形状(onPressOut 事件)

从这里去哪里:

关于reactjs - 如何绘制正方形来标记对象。 ( react native ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46864293/

相关文章:

ios - 在 native react 中获取 Assets 的静态路径

reactjs - FlatList 未使用 React Hooks 和 Realm 进行更新

android - React Native 的动画转换无法正常工作

javascript - 如何在 react-native 中插入 Animated 值以生成 bool 值或字符串?

reactjs - 部署新的 Webpack 包会导致错误,直到页面刷新

css - 用户输入的实时配色方案更改

javascript - 在 React 中提交表单时将对象添加到数组

ios - 找不到启动 Storyboard - Xcode 10 上传到应用程序商店

javascript - native react "attempt to set value to an immutable object"

javascript - ReactJS:组件数组问题