如何绘制方形以标记对象。 （React Native）

Question

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

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

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

我怎样才能做到这一点？是否有任何好的库来在图像上绘制正方形？如果我能记住它的坐标宽度，高度和矩形的位置会更好。

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

这是以下示例

Answer 1

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

关于算法：

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

从这里开始：

• Basic tutorial, explaining how to wire up React Native and ART
• Unofficial(there no official one) documentation

Answer 2

您可以将子项（在您的情况下为方形视图）添加到Image标记中，这样您就可以执行类似

的操作

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

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

编辑：RN 50 =＆lt;删除了对嵌套内容的支持，请使用ImageBackground代替