Aleka ist eine plattformübergreifende Zeichen-App, die auf Flutter basiert

Aleka ist eine leichte, schnelle Zeichen-App, die in Flutter geschrieben wurde. Es funktioniert überall: im Browser, auf dem Desktop (Windows, macOS, Linux) und auf mobilen Geräten (iOS, Android).

Unter der Haube steckt pures Dart, Material 3 und Liebe zum Detail.

Chancen

• Freihandzeichnen: Glatte Striche mit quadratischer Bézier-Interpolation.
• Palette mit 15 Farben: schnelle Auswahl mit visueller Anzeige.
• Pinselgröße: einstellbar mit einem Schieberegler von 1 bis 30 Pixel.
• Rückgängig machen: Machen Sie einen Schritt zurück durch Ihre Striche.
• Löschen Sie die Leinwand: mit einem Klick.
• Flutfüllung: BFS mit Toleranz für glatte Kanten.
• Speichern: Format .aleka (JSON).
• Laden: zuvor gespeicherte Zeichnungen öffnen und fortfahren.
• PNG-Export: Leinwand mit 3-facher Auflösung erfassen.
• 🎬 Animationsmodus: Einzelbildanimation mit Zeitleiste:
  • Rahmen hinzufügen und entfernen, jeder mit seinem eigenen Design.
  • Bilddauer von 50 ms bis 5 s.
  • FPS ändern: 6, 8, 12, 15, 24, 30 oder 60.
  • Export nach MP4 (über ffmpeg auf dem Desktop, ffmpeg.wasm im Browser).
• Dunkles und helles Thema: Material 3, folgt dem System.

Warum Flattern?

Mit Flutter können Sie eine Anwendung für sechs Plattformen schreiben, ohne Code zu duplizieren. Aleka nutzt nur die nativen Funktionen des Dart and Flutter SDK und ein Minimum an Abhängigkeiten von Drittanbietern: file_picker, image für die Arbeit mit Pixeln beim Füllen, ffmpeg_wasm für den Export von Videos im Browser.

Architektur

Das Projekt folgt den Prinzipien sauberer Architektur und SOLID:

• PaintCanvasController – steuert den Zustand von Strichen und Füllungen über das Listener/Observer-Muster.
• PaintToolbar – UI-Komponente der Palette, des Schiebereglers und der Schaltflächen.
• AlekaFile – Serialisierung/Deserialisierung in JSON, PNG-Erfassung.
• MovieController – Modell von Frames und Animationsstatus.
• VideoExport – kapselt MP4-Kodierungslogik (Desktop/Web).

E/A-Funktionen (saveStrokes, loadStrokes, capturePng usw.) werden injizierbar gemacht – sie können beim Testen durch Mocks ersetzt werden. Das Projekt verfügt über 79 Tests: Überprüfung der Serialisierung, Abbruch, Laden/Speichern, PNG- und Videoexport, Frame-Modell und Zeitleiste.

Dateiformat .aleka

Die Datei .aleka ist eine lesbare JSON-Datei, die in jedem Texteditor geöffnet werden kann:

  "aleka": "1.0",
  "strokes": [
    {
      "color": 4278190080,
      "strokeWidth": 3.0,
      "points": [[100.0, 200.0], [150.0, 250.0]]
    }
  ]
}

Jeder Strich speichert eine Farbe (ARGB32), eine Dicke und eine Reihe von Punkten. Das Format wird durch das Feld aleka versioniert.

Animationsmodus

Eines der Hauptmerkmale ist der integrierte Bild-für-Bild-Animationseditor. Sie zeichnen einen Rahmen, fügen einen neuen hinzu, zeichnen den nächsten und so weiter. Die Zeitleiste zeigt Miniaturansichten an und ermöglicht Ihnen, die Reihenfolge und Dauer der Bilder zu ändern. Die fertige Animation kann in MP4 exportiert werden.

Der Exportalgorithmus durchläuft alle Frames, erfasst sie über RepaintBoundary, sammelt PNG-Bytes und überträgt sie an den Encoder. Auf dem Desktop wird das System ffmpeg aufgerufen, im Browser kommt ffmpeg.wasm zum Einsatz – eine vollwertige Portierung von ffmpeg auf WebAssembly, die direkt in der Browser-Sandbox funktioniert.

Flutfüllung

Die Füllimplementierung verwendet Breadth First Search (BFS) mit einer Farbtoleranz (_kFillTolerance = 1000). Dadurch können Sie glatte Kanten von Strichen korrekt verarbeiten – die Füllung fließt nicht über den Umriss hinaus, sondern erfasst durchscheinende Pixel am Rand. Für eine leere Leinwand wird ohne unnötige Berechnungen eine feste Füllung erstellt.

Versuchen Sie es

Aleka ist im Web und als native Anwendung verfügbar:

demensdeum.com/software/aleka/

Der Quellcode ist unter der MIT-Lizenz offen:

github.com/demensdeum/Aleka