Comment dessiner un carré pour marquer un objet. (React Native)

Question

Je vois de nombreuses applications mobiles ayant une fonctionnalité que l'utilisateur peut dessiner un carré pour indiquer quelque chose à marquer sur l'image.

Je construis Face Tagging app et utilisateur dessine essentiellement carré sur la limite du visage de l'homme sur l'image. Je l'ai googlé à plusieurs reprises, mais je ne suis pas sûr que RN a une bibliothèque de fonctionnalités pour le marquage.

Comment puis-je y parvenir? Y at-il une bonne bibliothèque à dessiner un carré sur l'image? Et ce sera encore mieux si je peux me souvenir de la largeur de ses coordonnées, sa hauteur et sa position du rectangle.

Toute idée ou suggestion sera grandement appréciée!

Voici un exemple ci-dessous

Answer 1

Vous pouvez utiliser Native React bibliothèque ART pour dessiner des formes sur le dessus de l'image. C'est une bibliothèque standard qui est livrée avec React Native (bien qu'elle ne soit pas liée au binaire par défaut).

En ce qui concerne l'algorithme:

• Render une image
• superposition d'image avec React ART.Surface
• les robinets Détecter Native pour obtenir les coordonnées + superposer le reste de l'image
• Une fois que vous avez les coordonnées du appuyez sur, vous pouvez dessiner une forme que vous voulez
• Arrêter de dessiner lorsque l'utilisateur retire son doigt (onPressOut événement)

Où aller d'ici:

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

Answer 2

Vous pouvez ajouter des enfants (dans votre cas, vue sur la place) à une balise d'image, de sorte que vous pouvez faire quelque chose comme

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

Vous pouvez obtenir le un x d y coordonne avec l'API PanResponder au lieu de coder en dur les propriétés de style haut et à gauche

Edit: RN 50 = < Prise en charge supprimée du contenu imbriqué à l'intérieur, utilisez ImageBackground à la place