Entwicklungstagebuch / Fluffmark
Fluffmark-Entwicklungsjournal: So wird das Kommentieren von Bildern zum Vergnügen
Wie sich Fluffmark von einer gemeinsamen Anmerkungskomponente zu einer eigenen App entwickelte, mit automatischem Textlayout, Betreffumbruch, einem Textpinsel, animierten Strichen und plattformspezifischen Interaktionen.

Woher die Idee kam
Fluffmark hat einen lustigen Ursprung. Ich wollte eine gemeinsame Anmerkungskomponente für alle meine Bild-Apps erstellen. Während ich daran arbeitete, entwickelte ich unerwartet eine Leidenschaft für das Produkt selbst. Ich war begeistert davon, damit Bilder mit Worten zu posten, und hatte den Wunsch, mehr auszudrücken.
Was die App macht
Kommen wir gleich zu den Funktionen.
Erstens handelt es sich um eine Bildanmerkungs-App, die Standbilder, GIFs und Live-Fotos verarbeitet. Es exportiert dasselbe Format, das Sie importiert haben. Anmerkungen zu GIFs und Live-Fotos werden als Überlagerung hinzugefügt, wobei die zugrunde liegende Animation erhalten bleibt.
Zu den Anmerkungstools gehören:
Text hinzufügen
Zeichnen von Linien mit konfigurierbaren Pfeilspitzen an beiden Enden
Freihandzeichnen
Unschärfe
Pixelierung
Rechtecke
Kreise
Bilder einfügen
Zuschneiden oder Erweitern der Leinwand
Abgerundete Ecken
Ich werde mich auf die Funktionen konzentrieren, über die ich am meisten nachgedacht habe.
Text hinzufügen
Meine Freunde Xiaoyun und Xiaoyu haben in WeChat Moments oft Bilder mit direkt darauf geschriebenen Worten gepostet. Da habe ich mich gefragt: Wie schön wäre es, nur die Wörter zu schreiben, ohne den Stil und die Position anzupassen? Also habe ich ein automatisches Textlayout mit ein paar nützlichen Details erstellt:
Vermeiden Sie das Thema automatisch. Suchen Sie eine Stelle für den Text, die nicht mit dem Inhalt des Bildes interferiert.
Farben automatisch anpassen. Verwenden Sie Schlüsselfarben aus dem Bild, um mehrere Textpaletten vorzuschlagen. Normalerweise sieht die Standardeinstellung bereits gut aus.

Automatische Layout- und Farbanpassung
Über die gewöhnlichen Textsteuerelemente hinaus habe ich einige weitere ungewöhnliche Funktionen hinzugefügt:
Umhüllen Sie das Thema. Ordnen Sie die Wörter entlang der Umrisse des Hauptthemas, normalerweise einer Person, an, um einen umhüllenden Effekt zu erzielen.

Text, der das Thema umschließt Textpinsel. Stellen Sie sich das wie einen manuellen Betreffumbruch vor, mit mehr Freiheit, Wörter in unerwartete Formen zu zeichnen.

Textpinsel Adaptiver zweifarbiger Text. Jedes Zeichen wechselt je nach Bild darunter zu Schwarz oder Weiß, wodurch ein stärkerer Kontrast entsteht.

Adaptiver zweifarbiger Text WeChat-Chat-Blasen. Diese neue Ergänzung stellt den vertrauten, auffälligen Look einer WeChat-Konversation wieder her. Wählen Sie beim ersten Mal Avatar-Bilder für sich selbst und die andere Person aus und verwenden Sie sie beim nächsten Mal wieder.

WeChat-Chatblasen
Freihandzeichnen
Kalligraphie-Pinselstriche. Ich habe eine frühere Kalligraphie-Pinsel-Demo in dieses Projekt eingebracht. Fluffmark kann sehr realistische Tintenstriche erzeugen; Selbst ein einfacher handgezeichneter Kreis sieht viel ausdrucksvoller aus als eine gewöhnliche digitale Pinselmarkierung.

Kalligraphie-Pinselstriche, auch mit abgerundeten Ecken Spielen Sie die Striche ab. Aktivieren Sie beim Bearbeiten eines Live-Fotos die Strichwiedergabe. Im exportierten Live-Foto erscheint Ihre Zeichnung in Bewegung, als würden Sie sie noch einmal schreiben.

Animierte Strichwiedergabe
Bilder
Beim Einfügen eines Bildes können Sie auch dessen Motiv extrahieren. Das eröffnet allerlei spielerische Collagemöglichkeiten.

Weitere Details
Ich habe viel Zeit damit verbracht, diese App zu verbessern und verwende sie jeden Tag. Zu den Interaktionsdetails gehören:
Die Benutzeroberfläche wird ausgeblendet, während Sie Werkzeuge auf dem Bild verwenden, sodass Sie das gesamte Bild sehen können.
Das Zeichnen und Zoomen des Bildes beeinträchtigen sich nicht.
Die Symbolleiste wurde mehrfach überarbeitet, damit sie auch auf kleinem Raum gut funktioniert.
Die App ist für iOS, iPadOS und macOS verfügbar. Auf dem Mac habe ich plattformspezifische Verbesserungen vorgenommen, z. B. das Einziehen von Bildern, die Verwendung von Finder-basierten Öffnen- und Speicherdialogen und die Unterstützung von Tastaturkürzeln.
Preis
Dies ist auch das, was ich als mein erstes völlig kostenloses Produkt bezeichne, mit nur optionaler finanzieller Unterstützung. Wenn es Ihnen gefällt, können Sie einmalig 18 RMB oder 18 RMB pro Jahr spenden, um mir dabei zu helfen, bessere und erschwinglichere Produkte herzustellen. Die Entscheidung, keinen Beitrag zu leisten, hat keinerlei Auswirkungen auf die Funktionalität. Ich nenne es scherzhaft den Beginn meines Bettelns im Internet.
Wie bei meinen anderen Apps gibt es nicht viel Händchenhalten. Probieren Sie die Tools aus und erkunden Sie sie. Das Rückgängigmachen und Wiederherstellen ist gut entwickelt, sodass Sie sich beim Experimentieren keine Sorgen machen müssen, dass Ihre Arbeit verloren geht. Ich hoffe, dass Ihnen die Nutzung Spaß macht und Sie sich mehr dazu inspiriert fühlen, sich auszudrücken.