{"id":121,"date":"2026-07-30T06:57:47","date_gmt":"2026-07-30T06:57:47","guid":{"rendered":"https:\/\/demensdeum.com\/blog\/2026\/07\/30\/aleka\/"},"modified":"2026-07-30T06:57:47","modified_gmt":"2026-07-30T06:57:47","slug":"aleka","status":"publish","type":"post","link":"https:\/\/demensdeum.com\/blog\/de\/2026\/07\/30\/aleka\/","title":{"rendered":"Aleka ist eine plattform\u00fcbergreifende Zeichen-App, die auf Flutter basiert"},"content":{"rendered":"<p><a href=\"https:\/\/demensdeum.com\/software\/aleka\/\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2026\/07\/aleka.jpg\"\/><\/a><\/p>\n<p>Aleka ist eine leichte, schnelle Zeichen-App, die in Flutter geschrieben wurde. Es funktioniert \u00fcberall: im Browser, auf dem Desktop (Windows, macOS, Linux) und auf mobilen Ger\u00e4ten (iOS, Android).<\/p>\n<p>Unter der Haube steckt pures Dart, Material 3 und Liebe zum Detail.<\/p>\n<h2>Chancen<\/h2>\n<ul>\n<li><b>Freihandzeichnen:<\/b> Glatte Striche mit quadratischer B\u00e9zier-Interpolation.<\/li>\n<li><b>Palette mit 15 Farben:<\/b> schnelle Auswahl mit visueller Anzeige.<\/li>\n<li><b>Pinselgr\u00f6\u00dfe:<\/b> einstellbar mit einem Schieberegler von 1 bis 30 Pixel.<\/li>\n<li><b>R\u00fcckg\u00e4ngig machen:<\/b> Machen Sie einen Schritt zur\u00fcck durch Ihre Striche.<\/li>\n<li><b>L\u00f6schen Sie die Leinwand:<\/b> mit einem Klick.<\/li>\n<li><b>Flutf\u00fcllung:<\/b> BFS mit Toleranz f\u00fcr glatte Kanten.<\/li>\n<li><b>Speichern:<\/b> Format <code>.aleka<\/code> (JSON).<\/li>\n<li><b>Laden:<\/b> zuvor gespeicherte Zeichnungen \u00f6ffnen und fortfahren.<\/li>\n<li><b>PNG-Export:<\/b> Leinwand mit 3-facher Aufl\u00f6sung erfassen.<\/li>\n<li><b>&#x1f3ac; Animationsmodus:<\/b> Einzelbildanimation mit Zeitleiste:\n<ul>\n<li>Rahmen hinzuf\u00fcgen und entfernen, jeder mit seinem eigenen Design.<\/li>\n<li>Bilddauer von 50 ms bis 5 s.<\/li>\n<li>FPS \u00e4ndern: 6, 8, 12, 15, 24, 30 oder 60.<\/li>\n<li>Export nach MP4 (\u00fcber ffmpeg auf dem Desktop, ffmpeg.wasm im Browser).<\/li>\n<\/ul>\n<\/li>\n<li><b>Dunkles und helles Thema:<\/b> Material 3, folgt dem System.<\/li>\n<\/ul>\n<h2>Warum Flattern?<\/h2>\n<p>Mit Flutter k\u00f6nnen Sie eine Anwendung f\u00fcr sechs Plattformen schreiben, ohne Code zu duplizieren. Aleka nutzt nur die nativen Funktionen des Dart and Flutter SDK und ein Minimum an Abh\u00e4ngigkeiten von Drittanbietern: <code>file_picker<\/code>, <code>image<\/code> f\u00fcr die Arbeit mit Pixeln beim F\u00fcllen, <code>ffmpeg_wasm<\/code> f\u00fcr den Export von Videos im Browser.<\/p>\n<h2>Architektur<\/h2>\n<p>Das Projekt folgt den Prinzipien sauberer Architektur und SOLID:<\/p>\n<ul>\n<li><b>PaintCanvasController<\/b> \u2013 steuert den Zustand von Strichen und F\u00fcllungen \u00fcber das Listener\/Observer-Muster.<\/li>\n<li><b>PaintToolbar<\/b> \u2013 UI-Komponente der Palette, des Schiebereglers und der Schaltfl\u00e4chen.<\/li>\n<li><b>AlekaFile<\/b> \u2013 Serialisierung\/Deserialisierung in JSON, PNG-Erfassung.<\/li>\n<li><b>MovieController<\/b> \u2013 Modell von Frames und Animationsstatus.<\/li>\n<li><b>VideoExport<\/b> \u2013 kapselt MP4-Kodierungslogik (Desktop\/Web).<\/li>\n<\/ul>\n<p>E\/A-Funktionen (<code>saveStrokes<\/code>, <code>loadStrokes<\/code>, <code>capturePng<\/code> usw.) werden injizierbar gemacht \u2013 sie k\u00f6nnen beim Testen durch Mocks ersetzt werden. Das Projekt verf\u00fcgt \u00fcber 79 Tests: \u00dcberpr\u00fcfung der Serialisierung, Abbruch, Laden\/Speichern, PNG- und Videoexport, Frame-Modell und Zeitleiste.<\/p>\n<h2>Dateiformat .aleka<\/h2>\n<p>Die Datei <code>.aleka<\/code> ist eine lesbare JSON-Datei, die in jedem Texteditor ge\u00f6ffnet werden kann:<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism undefined-numbers lang-unknown\" data-lang=\"unknown\"><code>  \"aleka\": \"1.0\",\n  \"strokes\": [\n    {\n      \"color\": 4278190080,\n      \"strokeWidth\": 3.0,\n      \"points\": [[100.0, 200.0], [150.0, 250.0]]\n    }\n  ]\n}\n<\/code><\/pre>\n<\/div>\n<p>Jeder Strich speichert eine Farbe (ARGB32), eine Dicke und eine Reihe von Punkten. Das Format wird durch das Feld <code>aleka<\/code> versioniert.<\/p>\n<h2>Animationsmodus<\/h2>\n<p>Eines der Hauptmerkmale ist der integrierte Bild-f\u00fcr-Bild-Animationseditor. Sie zeichnen einen Rahmen, f\u00fcgen einen neuen hinzu, zeichnen den n\u00e4chsten und so weiter. Die Zeitleiste zeigt Miniaturansichten an und erm\u00f6glicht Ihnen, die Reihenfolge und Dauer der Bilder zu \u00e4ndern. Die fertige Animation kann in MP4 exportiert werden.<\/p>\n<p>Der Exportalgorithmus durchl\u00e4uft alle Frames, erfasst sie \u00fcber <code>RepaintBoundary<\/code>, sammelt PNG-Bytes und \u00fcbertr\u00e4gt sie an den Encoder. Auf dem Desktop wird das System ffmpeg aufgerufen, im Browser kommt ffmpeg.wasm zum Einsatz \u2013 eine vollwertige Portierung von ffmpeg auf WebAssembly, die direkt in der Browser-Sandbox funktioniert.<\/p>\n<h2>Flutf\u00fcllung<\/h2>\n<p>Die F\u00fcllimplementierung verwendet Breadth First Search (BFS) mit einer Farbtoleranz (<code>_kFillTolerance = 1000<\/code>). Dadurch k\u00f6nnen Sie glatte Kanten von Strichen korrekt verarbeiten \u2013 die F\u00fcllung flie\u00dft nicht \u00fcber den Umriss hinaus, sondern erfasst durchscheinende Pixel am Rand. F\u00fcr eine leere Leinwand wird ohne unn\u00f6tige Berechnungen eine feste F\u00fcllung erstellt.<\/p>\n<h2>Versuchen Sie es<\/h2>\n<p>Aleka ist im Web und als native Anwendung verf\u00fcgbar:<\/p>\n<p><a href=\"https:\/\/demensdeum.com\/software\/aleka\/\"><b>demensdeum.com\/software\/aleka\/<\/b><\/a><\/p>\n<p>Der Quellcode ist unter der MIT-Lizenz offen:<\/p>\n<p><a href=\"https:\/\/github.com\/demensdeum\/Aleka\"><b>github.com\/demensdeum\/Aleka<\/b><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aleka ist eine leichte, schnelle Zeichen-App, die in Flutter geschrieben wurde. Es funktioniert \u00fcberall: im Browser, auf dem Desktop (Windows, macOS, Linux) und auf mobilen Ger\u00e4ten (iOS, Android). Unter der Haube steckt pures Dart, Material 3 und Liebe zum Detail. Chancen Freihandzeichnen: Glatte Striche mit quadratischer B\u00e9zier-Interpolation. Palette mit 15 Farben: schnelle Auswahl mit visueller [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-121","post","type-post","status-publish","format-standard","hentry","category-software"],"translation":{"provider":"WPGlobus","version":"3.0.3","language":"de","enabled_languages":["en","ru","zh","de","ja","fr","es","pt","hi"],"languages":{"en":{"title":true,"content":true,"excerpt":false},"ru":{"title":true,"content":true,"excerpt":false},"zh":{"title":true,"content":true,"excerpt":false},"de":{"title":true,"content":true,"excerpt":false},"ja":{"title":true,"content":true,"excerpt":false},"fr":{"title":true,"content":true,"excerpt":false},"es":{"title":false,"content":false,"excerpt":false},"pt":{"title":true,"content":true,"excerpt":false},"hi":{"title":true,"content":true,"excerpt":false}}},"_links":{"self":[{"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/posts\/121","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/comments?post=121"}],"version-history":[{"count":0,"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/posts\/121\/revisions"}],"wp:attachment":[{"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/media?parent=121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/categories?post=121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/tags?post=121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}