Reactjs 如何绘制正方形来标记对象。（本地反应）

我看到许多移动应用程序都有一个功能，用户可以画一个正方形来表示要在图像上标记的东西

我正在构建

人脸标记

应用程序，基本上用户在图像上的人脸边界上画正方形

我已经在谷歌上搜索了很多次，但我不确定RN是否有用于标记的功能库

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

如有任何想法或建议，将不胜感激

下面是一个例子

---

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

关于算法：

• 渲染图像
• 用React Native的

  艺术表面覆盖图像

• 检测点击以获取坐标并覆盖图像的其余部分
• 一旦有了水龙头的坐标，就可以绘制所需的形状
• 当用户移除手指时停止绘制形状（

  onPressOut

  事件）

从这里出发：

您可以将子对象（在您的示例中为方形视图）添加到图像标记中，以便执行以下操作

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

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

---

Edit:RN 50=<删除了对内部嵌套内容的支持，改用

这太令人沮丧了。连一个俱乐部都没有你找到解决办法了吗？如果可以的话，请把你的解决方案贴在这里。如果你解决了这个问题，那么你可以在github中发布你的解决方案并共享链接。非常酷。我发现了非常有用的库：react本机手势响应器PanResponder API在这个项目上似乎非常有用更新了react.surface的链接，看起来不错，但看起来太难实现了（不过还是要谢谢你！