Journal de développement Fluffmark : faire de l'annotation d'images une joie

D'où est venue l'idée

Fluffmark a une drôle d’origine. Je voulais créer un composant d'annotation partagé pour toutes mes applications d'images. Au fur et à mesure que je travaillais dessus, je suis devenu étonnamment passionné par le produit lui-même. Je suis tombé amoureux de l'utiliser pour publier des images avec des mots et j'ai eu envie d'en exprimer davantage.

Que fait l'application

Passons directement aux fonctionnalités.

1. Premièrement, il s'agit d'une application d'annotation d'images qui gère les images fixes, les GIF et les Live Photos. Il exporte le même type de format que celui que vous avez importé. Les annotations sur les GIF et les Live Photos sont ajoutées en superposition, préservant l'animation sous-jacente.

2. Les outils d'annotation incluent :

   1. Ajout de texte

   2. Tracer des lignes, avec des pointes de flèches configurables à chaque extrémité

   3. Dessin à main levée

   4. Flou

   5. Pixelisation

   6. Rectangulaires

   7. Cercles

   8. Insérer des images

   9. Recadrer ou étendre la toile

   10. Coins arrondis

Je me concentrerai sur les fonctionnalités auxquelles j’ai le plus réfléchi.

Ajout de texte

Mes amis Xiaoyun et Xiaoyu publiaient souvent des photos avec des mots écrits directement dessus dans WeChat Moments. Cela m’a fait me demander : à quel point serait-il agréable d’écrire simplement les mots, sans ajuster le style et la position ? J'ai donc construit une mise en page automatique du texte, avec quelques détails utiles :

1. Évitez automatiquement le sujet. Trouvez un endroit pour le texte qui n'interfère pas avec le sujet de l'image.

2. Faites correspondre les couleurs automatiquement. Utilisez les couleurs clés de l'image pour suggérer plusieurs palettes de texte. Habituellement, la valeur par défaut semble déjà bonne.

   

Au-delà des contrôles de texte ordinaires, j'ai ajouté plusieurs fonctionnalités plus inhabituelles :

1. Enroulez autour du sujet. Disposez les mots le long du contour du sujet principal, généralement une personne, pour créer un effet d'enveloppement.

   

2. Pinceau de texte. Considérez-le comme un habillage manuel du sujet, avec plus de liberté pour dessiner des mots dans des formes inattendues.

   

3. Texte adaptatif bicolore. Chaque caractère passe au noir ou au blanc en fonction de l'image située en dessous, créant ainsi un contraste plus fort.

   

4. Bulles de discussion WeChat. Cet ajout récent recrée l'aspect familier et accrocheur d'une conversation WeChat. Choisissez des images d'avatar pour vous et l'autre personne la première fois, puis réutilisez-les la prochaine fois.

   

Dessin à main levée

1. Coups de pinceau de calligraphie. J'ai apporté une précédente démo de pinceau de calligraphie dans ce projet. Fluffmark peut produire des traits d'encre très réalistes ; même un simple cercle dessiné à la main semble beaucoup plus expressif qu’une marque de pinceau numérique ordinaire.

   

2. Lisez les traits. Lors de la modification d'une photo en direct, activez la lecture des traits. Dans la Live Photo exportée, votre dessin apparaît en mouvement, comme si vous l'écriviez à nouveau.

   

Images

Lors de l'insertion d'une image, vous pouvez également extraire son sujet. Cela ouvre toutes sortes de possibilités de collage ludiques.

Autres détails

J'ai passé beaucoup de temps à peaufiner cette application et je l'utilise tous les jours. Certains des détails de l'interaction incluent :

1. L'interface se cache pendant que vous utilisez des outils sur l'image, afin que vous puissiez voir l'image dans son ensemble.

2. Le dessin et le zoom de l'image n'interfèrent pas les uns avec les autres.

3. La barre d'outils a subi de nombreuses révisions pour qu'un petit espace fonctionne bien.

4. L'application est disponible sur iOS, iPadOS et macOS. Sur Mac, j'ai apporté des améliorations spécifiques à la plate-forme, telles que le glisser-déposer d'images, l'utilisation de boîtes de dialogue d'ouverture et d'enregistrement basées sur le Finder et la prise en charge des raccourcis clavier.

Prix

C'est aussi ce que je décris comme mon premier produit entièrement gratuit, avec uniquement un soutien financier optionnel. Si cela vous plaît, vous pouvez contribuer 18 RMB une fois ou 18 RMB par an pour m'aider à fabriquer des produits meilleurs et abordables. Choisir de ne pas contribuer n’affecte aucune fonctionnalité. En plaisantant, j’appelle cela le début de ma mendicité sur Internet.

Comme avec mes autres applications, il n’y a pas beaucoup de prise en main. Essayez les outils et explorez. Annuler et refaire sont bien développés, vous n'avez donc pas à craindre de perdre votre travail en expérimentant. J'espère que vous apprécierez l'utiliser et que vous vous sentirez plus inspiré pour vous exprimer.