单片机字符 / 图片 / 手绘取模工具

一个面向单片机、嵌入式显示屏、OLED/LCD 点阵屏开发的 单 HTML 文件离线取模工具。它可以把文字、图片或手绘点阵转换为 C、Arduino、HEX、JSON、Python 等格式的数据，方便直接用于 STM32、51 单片机、ESP32、Arduino、RP2040 等嵌入式项目。

当前版本：v2.2 手绘确认版

特性

文字取模

• 支持中文、英文、数字、符号、Unicode 字符和 Emoji。
• 支持逐字、逐行、整段文本取模。
• 可设置字体、字号、字重、斜体、字间距、行高、偏移量等参数。
• 支持导入本地字体文件，例如 TTF、OTF、WOFF、WOFF2。
• 支持自动居中、内边距、裁剪空白边缘等操作。

图片取模

• 支持导入常见图片格式，例如 PNG、JPG、JPEG、BMP、GIF、WebP、SVG。
• 可用于图标、Logo、启动图、提示符号等点阵数据生成。
• 支持阈值调整、透明度阈值、伽马修正。
• 支持反色、镜像、旋转、裁剪空白边缘。

手绘取模

• 支持新建自定义大小的点阵画布。
• 支持鼠标和手机触摸绘制。
• 支持画笔、橡皮、油漆桶、直线、矩形、实心矩形、椭圆、实心椭圆等工具。
• 支持画笔大小调整。
• 支持撤销、重做、清空、反色、上下左右移动画布。
• 支持将文字首字导入到手绘画布继续编辑。
• 支持将图片导入到手绘画布继续编辑。
• 支持保存和载入手绘画布 JSON。

取模与导出

• 支持横向逐行、纵向逐列扫描。
• 支持 MSB first 和 LSB first 位序。
• 支持逐行补齐、逐列补齐、连续打包等数据打包方式。
• 支持输出：
  • C 数组
  • C 单字符数组
  • Arduino PROGMEM
  • HEX
  • 二进制点阵文本
  • JSON
  • Python 列表
• 支持变量名、注释、Unicode 编码、自定义索引等输出配置。
• 支持预览点阵、统计字节数、导出预览 PNG。

自适应界面

• 桌面端采用多栏布局，方便同时调参数、看预览和复制输出。
• 手机端自动切换为单栏布局，支持触摸绘制和移动端浏览器操作。
• 工具为纯前端实现，不需要服务器。

快速开始

1. 下载 HTML 文件。
2. 双击打开，或拖入浏览器打开。
3. 根据需要选择：
   • 文字取模
   • 图片取模
   • 手绘取模
4. 设置画布尺寸、字体、阈值、扫描方向、位序等参数。
5. 查看点阵预览。
6. 复制生成的数据到单片机工程中使用。

使用建议

OLED / LCD 点阵屏

常见 OLED 字模通常按 8 位为一组存储，因此建议根据屏幕驱动方式选择对应参数：

• 如果屏幕按页寻址，通常使用纵向逐列取模。
• 如果屏幕按普通 framebuffer 使用，通常使用横向逐行取模。
• 如果显示结果左右或上下颠倒，可尝试镜像或旋转。
• 如果黑白反了，可开启反色。
• 如果字符错位，检查宽高、补齐方式和位序。

中文取模

中文字符建议使用明确支持中文的字体，例如思源黑体、思源宋体、微软雅黑、宋体等。不同系统默认字体不同，显示效果可能略有差异。如果希望结果稳定，建议导入固定字体文件。

手绘字模

手绘模式适合制作：

• 自定义图标
• 小尺寸像素字
• 启动画面 Logo
• 状态图标
• 方向箭头
• 电池、Wi-Fi、蓝牙等 UI 符号

绘制完成后，可以直接使用同一套导出参数生成 C/Arduino 数据。

隐私说明

本工具是纯前端单文件应用，所有文字、图片、字体文件和手绘数据都在浏览器本地处理，不会上传到服务器。

浏览器兼容性

建议使用较新的浏览器，例如：

• Chrome / Chromium
• Microsoft Edge
• Firefox
• Safari
• Android Chrome
• iOS Safari

部分旧浏览器可能不支持字体导入、触摸绘制或文件保存功能。

文件结构

mcu_font_bitmap_tool_v2_2_draw_confirmed.html  # 主程序，单文件运行
README.md                                      # 项目说明
LICENSE                                        # MIT 开源协议

开发说明

本项目采用单 HTML 文件结构，主要由以下部分组成：

• HTML：界面结构
• CSS：响应式布局和视觉样式
• JavaScript：字体渲染、图片处理、手绘编辑、取模算法、导出逻辑
• Canvas API：文字、图片和点阵预览渲染
• File API：本地字体、图片和 JSON 文件导入

因为项目目标是便携和离线使用，所以默认不依赖外部 CDN 或后端服务。

常见问题

为什么复制到单片机后显示乱码？

请优先检查以下设置：

1. 屏幕驱动需要横向还是纵向数据。
2. 位序是 MSB first 还是 LSB first。
3. 每行或每列是否需要按 8 位补齐。
4. 字符宽高是否与显示函数一致。
5. 是否需要反色。

为什么中文显示为空白或方块？

当前浏览器或系统字体可能不包含该中文字符。建议导入支持中文的字体文件。

为什么手机上不好画？

可以适当放大网格、减小画布尺寸，或横屏使用。手机触摸绘制已支持，但大尺寸点阵更适合电脑端精修。

为什么不同电脑生成的字模略有差异？

如果使用系统字体，不同系统的字体渲染可能不同。需要稳定结果时，请导入同一个字体文件。

许可证

本项目使用 MIT License。详见 LICENSE。