Aleka 是一款基于 Flutter 构建的跨平台绘图应用

Written by

in

Aleka 是一款用 Flutter 编写的轻量级、快速绘图应用程序。它适用于任何地方:浏览器、桌面(Windows、macOS、Linux)和移动设备(iOS、Android)。

引擎盖下是纯粹的 Dart、Material 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 允许您为六个平台编写一个应用程序,而无需重复代码。 Aleka 仅使用 Dart 和 Flutter SDK 的本机功能以及最少的第三方依赖项:file_picker、image 用于在填充时处理像素、ffmpeg_wasm 用于在浏览器中导出视频。

架构

该项目遵循简洁架构和 SOLID 的原则:

  • PaintCanvasController – 通过侦听器/观察者模式控制笔划和填充的状态。
  • PaintToolbar – 调色板、滑块和按钮的 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 字段进行版本控制。

动画模式

主要功能之一是内置的逐帧动画编辑器。您绘制一个框架,添加一个新框架,绘制下一个框架,依此类推。时间线显示缩略图并允许您更改帧的顺序和持续时间。完成的动画可以导出为 MP4。

导出算法迭代所有帧,通过 RepaintBoundary 捕获它们,收集 PNG 字节并将它们传输到编码器。在桌面上,调用系统 ffmpeg,在浏览器中,使用 ffmpeg.wasm – ffmpeg 到 WebAssembly 的成熟端口,直接在浏览器沙箱中工作。

洪水填充

填充实现使用宽度优先搜索 (BFS) 和颜色容差 (_kFillTolerance = 1000)。这使您可以正确处理笔画的平滑边缘 – 填充不会超出轮廓,但会捕获边框上的半透明像素。对于空画布,将创建实心填充,无需进行不必要的计算。

尝试

Aleka 可在网络上使用并作为本机应用程序使用:

demensdeum.com/software/aleka/

源代码在 MIT 许可证下开放:

github.com/demensdeum/Aleka

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

DemensDeum
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.