{"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\/fr\/2026\/07\/30\/aleka\/","title":{"rendered":"Aleka est une application de dessin multiplateforme bas\u00e9e sur Flutter"},"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 est une application de dessin l\u00e9g\u00e8re et rapide \u00e9crite en Flutter. Il fonctionne partout : dans le navigateur, sur le bureau (Windows, macOS, Linux) et sur les appareils mobiles (iOS, Android).<\/p>\n<p>Sous le capot se trouve du pur Dart, du Mat\u00e9riau 3 et une attention aux d\u00e9tails.<\/p>\n<h2>Opportunit\u00e9s<\/h2>\n<ul>\n<li><b>Dessin \u00e0 main lev\u00e9e\u00a0:<\/b> traits fluides avec interpolation quadratique de B\u00e9zier.<\/li>\n<li><b>Palette de 15 couleurs\u00a0:<\/b> s\u00e9lection rapide avec indication visuelle.<\/li>\n<li><b>Taille du pinceau\u00a0:<\/b> r\u00e9glable avec un curseur de 1 \u00e0 30 px.<\/li>\n<li><b>Annuler<\/b>\u00a0: reculez dans vos traits.<\/li>\n<li><b>Effacer le canevas\u00a0:<\/b> en un seul clic.<\/li>\n<li><b>Flood Fill\u00a0:<\/b> BFS avec tol\u00e9rance pour les bords lisses.<\/li>\n<li><b>Enregistrement\u00a0:<\/b> au format <code>.aleka<\/code> (JSON).<\/li>\n<li><b>Chargement\u00a0:<\/b> ouvrez les dessins pr\u00e9c\u00e9demment enregistr\u00e9s et continuez.<\/li>\n<li><b>Exportation PNG\u00a0:<\/b> Capturez le canevas \u00e0 une r\u00e9solution\u00a0x\u00a03.<\/li>\n<li><b>&#x1f3ac; Mode Animation\u00a0:<\/b> Animation image par image avec chronologie\u00a0:\n<ul>\n<li>Ajout et suppression de cadres, chacun avec son propre design.<\/li>\n<li>Dur\u00e9e de trame de 50\u00a0ms \u00e0 5\u00a0s.<\/li>\n<li>Modifier le FPS\u00a0: 6, 8, 12, 15, 24, 30 ou 60.<\/li>\n<li>Exporter au format MP4 (via ffmpeg sur ordinateur, ffmpeg.wasm dans le navigateur).<\/li>\n<\/ul>\n<\/li>\n<li><b>Th\u00e8me sombre et clair\u00a0:<\/b> Mat\u00e9riau\u00a03, suit le syst\u00e8me.<\/li>\n<\/ul>\n<h2>Pourquoi Flutter\u00a0?<\/h2>\n<p>Flutter vous permet d&#8217;\u00e9crire une application pour six plates-formes sans dupliquer le code. Aleka utilise uniquement les capacit\u00e9s natives des SDK Dart et Flutter et un minimum de d\u00e9pendances tierces\u00a0: <code>file_picker<\/code>, <code>image<\/code> pour travailler avec les pixels lors du remplissage, <code>ffmpeg_wasm<\/code> pour exporter la vid\u00e9o dans le navigateur.<\/p>\n<h2>Architecture<\/h2>\n<p>Le projet adh\u00e8re aux principes d\u2019architecture propre et SOLIDE\u00a0:<\/p>\n<ul>\n<li><b>PaintCanvasController<\/b> &#8211; contr\u00f4le l&#8217;\u00e9tat des traits et des remplissages via le mod\u00e8le Listener\/Observer.<\/li>\n<li><b>PaintToolbar<\/b>\u00a0&#8211;\u00a0composant d&#8217;interface utilisateur de la palette, du curseur et des boutons.<\/li>\n<li><b>AlekaFile<\/b> &#8211; s\u00e9rialisation\/d\u00e9s\u00e9rialisation en JSON, capture PNG.<\/li>\n<li><b>MovieController<\/b> &#8211; mod\u00e8le d&#8217;images et \u00e9tat d&#8217;animation.<\/li>\n<li><b>VideoExport<\/b>\u00a0: encapsule la logique d&#8217;encodage MP4 (ordinateur de bureau\/Web).<\/li>\n<\/ul>\n<p>Les fonctions d&#8217;E\/S (<code>saveStrokes<\/code>, <code>loadStrokes<\/code>, <code>capturePng<\/code>, etc.) sont rendues injectables &#8211; elles peuvent \u00eatre remplac\u00e9es par des simulations pendant les tests. Le projet comporte 79 tests\u00a0: v\u00e9rification de la s\u00e9rialisation, annulation, chargement\/enregistrement, exportation PNG et vid\u00e9o, mod\u00e8le d&#8217;image et chronologie.<\/p>\n<h2>Format de fichier .aleka<\/h2>\n<p>Le fichier <code>.aleka<\/code> est un JSON lisible qui peut \u00eatre ouvert dans n&#8217;importe quel \u00e9diteur de texte\u00a0:<\/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>Chaque trait stocke une couleur (ARGB32), une \u00e9paisseur et un tableau de points. Le format est versionn\u00e9 par le champ <code>aleka<\/code>.<\/p>\n<h2>Mode animation<\/h2>\n<p>L&#8217;une des fonctionnalit\u00e9s cl\u00e9s est l&#8217;\u00e9diteur d&#8217;animation image par image int\u00e9gr\u00e9. Vous dessinez un cadre, en ajoutez un nouveau, dessinez le suivant, et ainsi de suite. La chronologie affiche des vignettes et vous permet de modifier l&#8217;ordre et la dur\u00e9e des images. L&#8217;animation termin\u00e9e peut \u00eatre export\u00e9e vers MP4.<\/p>\n<p>L&#8217;algorithme d&#8217;exportation parcourt toutes les images, les capture via <code>RepaintBoundary<\/code>, collecte les octets PNG et les transf\u00e8re \u00e0 l&#8217;encodeur. Sur le bureau, le syst\u00e8me ffmpeg est appel\u00e9, dans le navigateur, ffmpeg.wasm est utilis\u00e9 &#8211; un portage \u00e0 part enti\u00e8re de ffmpeg vers WebAssembly, fonctionnant directement dans le bac \u00e0 sable du navigateur.<\/p>\n<h2>Remplissage d&#8217;inondation<\/h2>\n<p>L&#8217;impl\u00e9mentation de remplissage utilise Breadth First Search (BFS) avec une tol\u00e9rance de couleur (<code>_kFillTolerance = 1000<\/code>). Cela vous permet de g\u00e9rer correctement les bords lisses des traits &#8211; le remplissage ne d\u00e9passe pas le contour, mais capture les pixels translucides sur la bordure. Pour un canevas vide, un remplissage solide est cr\u00e9\u00e9 sans calculs inutiles.<\/p>\n<h2>Essayez<\/h2>\n<p>Aleka est disponible sur le web et en application native :<\/p>\n<p><a href=\"https:\/\/demensdeum.com\/software\/aleka\/\"><b>demensdeum.com\/software\/aleka\/<\/b><\/a><\/p>\n<p>Le code source est ouvert sous licence MIT :<\/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 est une application de dessin l\u00e9g\u00e8re et rapide \u00e9crite en Flutter. Il fonctionne partout : dans le navigateur, sur le bureau (Windows, macOS, Linux) et sur les appareils mobiles (iOS, Android). Sous le capot se trouve du pur Dart, du Mat\u00e9riau 3 et une attention aux d\u00e9tails. Opportunit\u00e9s Dessin \u00e0 main lev\u00e9e\u00a0: traits fluides [&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":"fr","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\/fr\/wp-json\/wp\/v2\/posts\/121","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/comments?post=121"}],"version-history":[{"count":0,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/121\/revisions"}],"wp:attachment":[{"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/media?parent=121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/categories?post=121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/tags?post=121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}