如何绘制正方形来标记对象。 (本机反应)

How to draw square to tag an object. (React Native)

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

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

我用谷歌搜索了很多次,但我不确定 RN 是否有一些用于标记的特征库。

我怎样才能做到这一点?有什么好的库可以在图片上画正方形吗?如果我能记住它的坐标宽高和矩形的位置就更好了。

任何想法或建议将不胜感激!

这是下面的例子

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

关于算法:

  • 渲染图像
  • 使用 React Native 的叠加图像 ART.Surface
  • 检测点击以获取坐标+覆盖图像的其余部分
  • 一旦你有了水龙头的坐标,你就可以画出你想要的形状
  • 当用户移开手指时停止绘制形状(onPressOut 事件)

从这里去哪里:

您可以将子项(在您的情况下为方形视图)添加到图像标签,这样您就可以执行类似

的操作
<Image src={...}>
  <View
    style={{
      position: 'absolute',
      top: 120
      left: 100,
      height: 50,
      width: 50,
      borderWidth: 1
    }}
  />
</Image>

您可以使用 PanResponder 获取 x 和 y 坐标 API 而不是对顶部和左侧样式属性进行硬编码

编辑:RN 50=< 删除了对内部嵌套内容的支持,改为使用 ImageBackground