6

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

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

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

我怎样才能做到这一点？有没有什么好的图书馆可以在图像上绘制正方形？如果我能记住它的坐标宽度、高度和矩形的位置就更好了。

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

这是下面的示例

在此处输入图像描述

4

2 回答 2

2

您可以将子项（在您的情况下为方形视图）添加到图像标签，因此您可以执行类似的操作

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

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

编辑：RN 50=< 删除了对内部嵌套内容的支持，改用ImageBackground

于 2017-10-21T18:00:44.947 回答
2

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

关于算法：

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

从这往哪儿走：

于 2017-10-21T15:12:01.327 回答