Aleka は、Flutter で書かれた軽量で高速な描画アプリです。ブラウザー、デスクトップ (Windows、macOS、Linux)、モバイル デバイス (iOS、Android) など、どこでも機能します。
ボンネットの下にはピュアダーツ、マテリアル3と細部へのこだわりが詰まっています。
チャンス
- フリーハンド描画: 二次ベジェ補間による滑らかなストローク。
- 15 色のパレット: 視覚的な表示で簡単に選択できます。
- ブラシ サイズ: スライダーで 1 ～ 30 ピクセルの範囲で調整できます。
- 元に戻す: ストロークを元に戻します。
- ワンクリックでキャンバスをクリアします:
- フラッド フィル: 滑らかなエッジに対する許容値を備えた BFS。
- 保存:
.aleka形式（JSON）。 - 読み込み中: 以前に保存した図面を開いて続行します。
- PNG エクスポート: キャンバスを 3 倍の解像度でキャプチャします。
- 🎬 アニメーション モード: タイムラインを使用したフレームごとのアニメーション:
- それぞれ独自のデザインを持つフレームの追加と削除
- フレーム期間は 50 ミリ秒から 5 秒までです。
- FPS を変更します: 6、8、12、15、24、30、または 60。
- MP4 にエクスポートします (デスクトップでは ffmpeg、ブラウザでは ffmpeg.wasm 経由)。
- ダークとライトのテーマ: マテリアル 3、システムに従います。
なぜフラッターするのでしょうか?
Flutter を使用すると、コードを複製することなく 6 つのプラットフォームに対して 1 つのアプリケーションを作成できます。 Aleka は、Dart および Flutter SDK のネイティブ機能と最小限のサードパーティの依存関係のみを使用します: file_picker、塗りつぶし時にピクセルを操作するための image、ブラウザでビデオをエクスポートするための ffmpeg_wasm。
アーキテクチャ
このプロジェクトは、クリーン アーキテクチャとソリッドの原則に準拠しています。
- PaintCanvasController – リスナー/オブザーバー パターンを通じてストロークと塗りつぶしの状態を制御します。
- ペイントツールバー – パレット、スライダー、ボタンの UI コンポーネント。
- AlekaFile – JSON でのシリアル化/逆シリアル化、PNG キャプチャ。
- MovieController – フレームとアニメーション状態のモデル。
- VideoExport – MP4 エンコード ロジック (デスクトップ/ウェブ) をカプセル化します。
I/O 関数 (saveStrokes、loadStrokes、capturePng など) は注入可能になっており、テスト中にモックに置き換えることができます。このプロジェクトには 79 のテストがあります: シリアル化、キャンセル、読み込み/保存、PNG とビデオのエクスポート、フレーム モデルとタイムラインのチェック。
ファイル形式 .aleka
.aleka ファイルは、任意のテキスト エディタで開くことができる読み取り可能な JSON です。
"aleka": "1.0",
"strokes": [
{
"color": 4278190080,
"strokeWidth": 3.0,
"points": [[100.0, 200.0], [150.0, 250.0]]
}
]
}
各ストロークには、色 (ARGB32)、太さ、および点の配列が格納されます。この形式は、aleka フィールドによってバージョン管理されます。
アニメーション モード
主な機能の 1 つは、組み込みのフレームごとのアニメーション エディタです。フレームを描画し、新しいフレームを追加し、次のフレームを描画する、ということを繰り返します。タイムラインにはサムネイルが表示され、フレームの順序と長さを変更できます。完成したアニメーションは MP4 にエクスポートできます。
エクスポート アルゴリズムはすべてのフレームを反復処理し、RepaintBoundary 経由でフレームをキャプチャし、PNG バイトを収集してエンコーダに転送します。デスクトップではシステム ffmpeg と呼ばれ、ブラウザでは ffmpeg.wasm が使用されます。これは、ffmpeg を WebAssembly に完全に移植したもので、ブラウザのサンドボックスで直接動作します。
塗りつぶし
塗りつぶしの実装では、色の許容値 (_kFillTolerance = 1000) を持つ幅優先検索 (BFS) を使用します。これにより、ストロークの滑らかなエッジを正しく処理できるようになります。塗りつぶしは輪郭を超えて流れず、境界上の半透明のピクセルをキャプチャします。空のキャンバスの場合、不必要な計算を行わずに塗りつぶしが作成されます。
試してみる
Aleka は、Web 上およびネイティブ アプリケーションとして利用できます。
demensdeum.com/software/aleka/
ソース コードは MIT ライセンスの下で公開されています。
Leave a Reply