📖 快速开始

1. 选择功能模块：点击左侧导航菜单，选择「文本/汉字取模」、「图片取模」、「批量取模」或「手绘取模」
2. 配置参数：在左侧配置面板设置点阵大小、字体、取模方式等参数
3. 输入内容：在文本框中输入字符、上传图片文件，或在画布上手绘图形
4. 生成数据：点击「生成点阵」按钮，右侧将显示点阵预览和十六进制数据
5. 导出结果：点击「复制」按钮复制到剪贴板，或点击「导出C文件」下载代码文件

⚙️ 核心参数详解

🔢 点阵大小（Width × Height）

• 定义：点阵的宽度和高度，单位为像素（px）
• 范围：8×8 到 128×128，支持任意尺寸组合
• 常用规格：
  • 8×8：小型图标、简单符号
  • 16×16：标准汉字显示（最常用）
  • 24×24：中等字号，清晰度更高
  • 32×32：大字号标题、重要提示
  • 64×64 / 128×128：超大图标、特殊效果
• 影响：点阵越大，显示越清晰，但占用存储空间越多
• 建议：根据实际显示设备的分辨率选择合适的尺寸

🔤 字体大小（Font Size）

• 定义：渲染文字时的字号大小，单位为像素
• 范围：8px 到当前点阵高度的最大值
• 与点阵关系：
  • 字体大小 ≈ 点阵高度：文字填满整个点阵区域
  • 字体大小 < 点阵高度：文字较小，周围留白较多
  • 字体大小 > 点阵高度：文字被裁剪，可能显示不完整
• 建议值：通常为点阵高度的 70%-90%，例如 16×16 点阵使用 12-14px 字体

🎨 字体选择（Font Family）

• 预设字体：
  • 无衬线字体（Sans-serif）：现代简洁，适合屏幕显示（默认推荐）
  • 衬线字体（Serif）：传统优雅，笔画有装饰
  • 等宽字体（Monospace）：每个字符宽度相同，适合代码显示
  • 微软雅黑：Windows 系统默认中文字体，清晰易读
  • 宋体：传统印刷字体，横细竖粗
  • 黑体：笔画粗细均匀，醒目有力
  • 楷体：书法风格，优雅流畅
  • 仿宋：介于宋体和楷体之间
  • Arial / Times New Roman / Courier New：经典西文字体
• 自定义字体：选择「自定义字体」后，可输入系统中已安装的任意字体名称
• 注意事项：
  • 不同操作系统支持的字体可能不同
  • 如果指定字体不存在，浏览器会自动回退到默认字体
  • 中文显示建议选择中文字体（如微软雅黑、宋体等）

🔄 取模方式（Scan Mode）

作用：决定如何扫描点阵并转换为字节数据，直接影响生成的十六进制代码

➡️ 逐行式（Row Scan / Horizontal）

• 扫描顺序：从左到右，从上到下
• 处理方式：
  1. 从第 1 行开始，每 8 个像素为一组（不足 8 个补 0）
  2. 将这 8 个像素转换为 1 个字节（byte）
  3. 处理完第 1 行后，继续处理第 2 行，依此类推
• 示例（16×16 点阵）：
  • 第 1 行：16 个像素 → 2 个字节
  • 第 2 行：16 个像素 → 2 个字节
  • …
  • 总共：16 行 × 2 字节 = 32 字节
• 适用场景：大多数 OLED/LCD 显示屏（如 SSD1306、ST7735）
• 优点：符合人类阅读习惯，数据处理直观

⬇️ 逐列式（Column Scan / Vertical）

• 扫描顺序：从上到下，从左到右
• 处理方式：
  1. 从第 1 列开始，每 8 个像素为一组（不足 8 个补 0）
  2. 将这 8 个像素转换为 1 个字节
  3. 处理完第 1 列后，继续处理第 2 列，依此类推
• 示例（16×16 点阵）：
  • 第 1 列：16 个像素 → 2 个字节
  • 第 2 列：16 个像素 → 2 个字节
  • …
  • 总共：16 列 × 2 字节 = 32 字节
• 适用场景：某些特殊的 LCD 控制器（如 ILI9341 的部分模式）
• 优点：适合垂直刷新显示的硬件

💡 如何选择？

• 查看您的显示模块数据手册，确认支持的扫描方式
• 如果不确定，优先尝试「逐行式」，这是最常见的模式
• 如果显示的文字方向不对（旋转 90°），切换到另一种模式

🔐 编码方式（Encoding Mode）

作用：决定像素点亮灭状态对应的二进制值

⚫ 阴码（Negative Code）

• 规则：1 = 点亮（黑色），0 = 熄灭（白色）
• 逻辑：「有内容」的地方为 1，「空白」的地方为 0
• 示例：字母 “A” 的顶部像素点亮 → 该位为 1
• 适用场景：大多数 OLED 显示屏（SSD1306 系列）
• 特点：符合直觉，「有」= 1，「无」= 0

⚪ 阳码（Positive Code）

• 规则：0 = 点亮（黑色），1 = 熄灭（白色）
• 逻辑：「有内容」的地方为 0，「空白」的地方为 1
• 示例：字母 “A” 的顶部像素点亮 → 该位为 0
• 适用场景：某些 LCD 显示屏、反色显示需求
• 特点：与阴码相反，相当于对阴码数据取反

💡 如何选择？

• 优先尝试「阴码」，这是最常用的模式
• 如果显示的文字是反色的（黑白颠倒），切换到「阳码」
• 阴码和阳码可以互相转换：对所有字节执行按位取反（~操作）即可

🔢 字节顺序（Byte Order）

作用：决定一个字节内 8 个位的排列顺序

⬅️ MSB（Most Significant Bit – 高位在前）

• 规则：从左到右扫描时，左边的像素对应高位（bit 7），右边的像素对应低位（bit 0）
• 示例：8 个像素 [1,0,1,1,0,0,1,0] → 二进制 10110010 → 十六进制 0xB2
• 计算：第 1 个像素 × 2⁷ + 第 2 个像素 × 2⁶ + … + 第 8 个像素 × 2⁰
• 适用场景：大多数嵌入式系统和显示控制器

➡️ LSB（Least Significant Bit – 低位在前）

• 规则：从左到右扫描时，左边的像素对应低位（bit 0），右边的像素对应高位（bit 7）
• 示例：8 个像素 [1,0,1,1,0,0,1,0] → 二进制 01001101 → 十六进制 0x4D
• 计算：第 1 个像素 × 2⁰ + 第 2 个像素 × 2¹ + … + 第 8 个像素 × 2⁷
• 适用场景：少数特殊的显示控制器

💡 如何选择？

• 优先尝试「MSB」，这是最常用的模式
• 如果显示的文字左右镜像翻转，切换到「LSB」
• MSB 和 LSB 可以通过位反转算法互相转换

🖼️ 图片取模详解

📤 上传步骤

1. 点击上传区域或拖拽图片到上传框
2. 支持的格式：PNG、JPG、JPEG、GIF、BMP、WebP
3. 图片会自动缩放到配置的点阵大小
4. 建议在上传前将图片调整为合适的尺寸，以获得最佳效果

🎯 单色取模（Monochrome）

• 原理：将彩色图片转换为黑白二值图像
• 处理流程：
  1. 计算每个像素的灰度值：Gray = (R + G + B) / 3
  2. 与阈值比较：Gray < 阈值 → 点亮（黑色），Gray ≥ 阈值 → 熄灭（白色）
  3. 按照配置的取模方式生成字节数据
• 阈值调节：
  • 阈值越小（如 64）：更多像素被判定为「点亮」，图像更暗
  • 阈值越大（如 192）：更少像素被判定为「点亮」，图像更亮
  • 默认值 128：平衡效果，适合大多数图片
• 适用场景：单色 OLED/LCD 显示屏、图标、Logo
• 优点：数据量小，处理速度快，兼容性好

🌈 彩色取模（Color）

• 原理：保留图片的颜色信息，每个像素用多个字节表示
• 色彩深度选项：
  • 8 位（256 色）：每个像素 1 字节，适合低端彩屏
  • 16 位（65536 色）：每个像素 2 字节，RGB565 格式，最常用
  • 24 位（真彩色）：每个像素 3 字节，RGB888 格式，高质量
• 数据格式：
  • RGB565：R(5位) + G(6位) + B(5位) = 16 位
  • RGB888：R(8位) + G(8位) + B(8位) = 24 位
• 适用场景：彩色 TFT LCD、IPS 屏幕、需要显示照片的场景
• 注意：彩色取模数据量较大，16×16 的 16 位彩色需要 512 字节

✍️ 手绘取模详解

作用：通过鼠标或触摸屏直接绘制字符，适合自定义图标、特殊符号、手写字体等场景

🎨 工具栏功能

✏️ 画笔工具（Pen）

• 功能：在画布上绘制黑色像素点
• 使用方式：
  1. 点击「画笔」按钮选择画笔工具
  2. 在画布上按住鼠标左键并拖动即可绘制
  3. 支持触摸屏操作（手机/平板）
• 画笔大小调节：
  • 范围：1px – 10px
  • 默认值：2px
  • 较大的画笔适合快速填充大面积区域
  • 较小的画笔适合精细绘制细节

🧹 橡皮擦工具（Eraser）

• 功能：擦除已绘制的像素点，恢复为白色背景
• 使用方式：
  1. 点击「橡皮擦」按钮选择橡皮擦工具
  2. 在需要擦除的区域按住鼠标左键并拖动
  3. 橡皮擦大小与画笔大小相同，可通过滑块调节
• 应用场景：
  • 修正绘制错误
  • 清理多余像素
  • 创建镂空效果

↩️ 撤销功能（Undo）

• 功能：撤销上一次的绘制操作
• 使用方式：点击「撤销」按钮，恢复到上一次操作前的状态
• 历史记录：
  • 最多保存 20 步操作历史
  • 每次开始绘制前自动保存当前状态
  • 可以连续多次撤销
• 注意：清空画布也会计入历史记录，可以撤销清空操作

🗑️ 清空画布（Clear）

• 功能：清除画布上的所有内容，恢复为空白状态
• 使用方式：点击「清空」按钮
• 效果：
  • 所有绘制的像素被清除
  • 画布恢复为纯白色背景
  • 如果开启了网格显示，网格会重新绘制
• 提示：清空操作可以撤销，不用担心误操作

📐 画布与网格

🖼️ 画布尺寸

• 实际尺寸：由左侧配置的「点阵大小」决定（如 16×16、32×32）
• 显示尺寸：每个像素放大 20 倍显示，方便精确绘制
• 示例：
  • 16×16 点阵 → 画布显示为 320×320 像素
  • 32×32 点阵 → 画布显示为 640×640 像素
• 优势：放大显示便于精细控制每个像素的位置

🔲 网格显示

• 功能：在画布上显示网格线，辅助对齐和定位
• 开关方式：点击「网格显示」旁边的开关按钮
• 网格样式：
  • 浅灰色细线（#e0e0e0）
  • 线宽 0.5px，不干扰绘制
  • 每个网格单元对应一个点阵像素
• 建议：
  • 初学者建议开启网格，便于理解点阵结构
  • 熟练后可以关闭网格，获得更清晰的视觉效果

🎯 绘制技巧

💡 技巧 1：从简单形状开始

• 先绘制基本几何形状（圆形、方形、三角形）
• 熟悉画笔的控制和像素的分布
• 逐步过渡到复杂图形

💡 技巧 2：利用对称性

• 对于对称图形，可以先绘制一半
• 观察整体效果后再补充另一半
• 保持图形的平衡和美观

💡 技巧 3：善用撤销功能

• 不要害怕犯错，随时可以撤销
• 大胆尝试不同的绘制方式
• 通过撤销对比不同效果

💡 技巧 4：参考现有字库

• 先用「文本取模」生成标准字符
• 观察点阵分布规律
• 在手绘时参考这些规律

💡 技巧 5：分层绘制

• 先绘制轮廓框架
• 再填充内部区域
• 最后细化边缘和细节

⚙️ 生成点阵数据

• 操作步骤：
  1. 完成绘制后，点击「生成点阵数据」按钮
  2. 系统会自动提取画布上的像素信息
  3. 根据配置的取模方式、编码方式、字节顺序生成数据
  4. 结果显示在下方，支持三种格式查看
• 数据处理流程：
  1. 将放大的画布缩小到实际点阵尺寸
  2. 提取每个像素的灰度值
  3. 根据阈值判断点亮/熄灭状态（灰度 < 128 为点亮）
  4. 按照配置的扫描方式转换为字节数据
• 注意事项：
  • 确保绘制的内容清晰可辨
  • 避免过于复杂的细节（点阵分辨率有限）
  • 黑色表示点亮，白色表示熄灭

📤 导出与使用

📋 复制数据

• 操作：点击「复制」按钮
• 效果：当前选中的格式数据复制到剪贴板
• 用途：直接粘贴到代码编辑器中使用

📥 导出 C 文件

• 操作：点击「导出C文件」按钮
• 文件名：自动生成，如 hand_drawn_16x16.c
• 文件内容：// 手绘字符点阵数据 (16×16) const uint8_t hand_drawn_char[] = { 0x00, 0x00, 0x18, 0x3C, … };
• 用途：直接嵌入嵌入式项目，无需额外处理

🎨 应用场景

• 自定义图标：
  • 设计独特的 UI 图标
  • 创建品牌 Logo 的点阵版本
  • 制作个性化的状态指示符
• 特殊符号：
  • 数学符号、箭头、标记等
  • 标准字库中不存在的字符
  • 行业专用符号
• 手写字体：
  • 模拟手写效果的个性化字体
  • 书法风格的汉字
  • 艺术字设计
• 游戏素材：
  • 复古游戏的角色 sprite
  • 道具图标、技能图标
  • 地图元素、装饰图案
• 教学演示：
  • 直观展示点阵原理
  • 学生练习字符设计
  • 理解像素与字节的对应关系

⚠️ 注意事项

• 分辨率限制：点阵尺寸较小（通常 8×8 到 32×32），不适合过于复杂的图形
• 颜色限制：仅支持黑白二值，不支持灰度和彩色
• 绘制精度：放大绘制可以提高精度，但最终效果受限于点阵分辨率
• 浏览器兼容：建议使用 Chrome、Edge、Firefox 等现代浏览器
• 触摸设备：支持手机/平板触摸操作，但精度可能不如鼠标
• 数据备份：重要的手绘作品请及时导出保存

💡 最佳实践

• ✅ 先在纸上草拟设计，明确要绘制的图形
• ✅ 从小尺寸开始（如 16×16），熟悉后再尝试大尺寸
• ✅ 定期使用「生成点阵数据」预览效果
• ✅ 结合「文本取模」生成的标准字符作为参考
• ✅ 善用撤销功能，大胆尝试不同设计
• ✅ 完成后导出 C 文件，方便后续使用和修改

📋 输出格式说明

🔢 十六进制（Hex）

• 格式：0x00, 0xFF, 0xAA, 0x55…
• 特点：紧凑、直观，便于手动检查和调试
• 用途：直接嵌入 C/C++ 代码数组

0️⃣1️⃣ 二进制（Binary）

• 格式：0b00000000, 0b11111111, 0b10101010…
• 特点：可直接看到每个像素的状态
• 用途：学习和理解取模原理，教学演示

💻 C 语言代码

• 格式：完整的 C 数组定义，包含注释和 Unicode 信息
• 示例：// 字符: 你 (Unicode: U+4F60) const uint8_t font_4F60[] = { 0x08, 0x30, 0x00, 0x00, 0x08, 0x30, 0x00, 0x00, … };
• 特点：可直接复制到项目中编译使用
• 用途：嵌入式项目开发，字库集成

💾 导出功能

📋 复制到剪贴板

• 操作：点击「复制」按钮
• 效果：当前选中的格式数据会复制到系统剪贴板
• 提示：复制成功后会显示「✓ 已复制」提示
• 粘贴：可在任何文本编辑器中按 Ctrl+V 粘贴

📥 导出 C 文件

• 操作：点击「导出C文件」按钮
• 效果：自动生成 .c 文件并下载到本地
• 文件内容：
  • 文件头注释（生成时间、配置参数）
  • 所有字符的完整 C 代码
  • 可直接编译使用的数组定义
• 文件名：自动生成，如 font_data_20240101_120000.c
• 用途：批量导出字库，方便项目管理

💻 嵌入式系统集成指南

📦 步骤 1：准备字库文件

1. 在本工具中生成所需字符的点阵数据
2. 点击「导出C文件」下载 .c 文件
3. 同时创建对应的 .h 头文件，声明外部数组

🔧 步骤 2：添加到项目

1. 将 .c 和 .h 文件复制到您的嵌入式项目目录
2. 在需要使用字库的源文件中包含头文件：#include "font_data.h"
3. 确保编译器支持 uint8_t 类型（需包含 <stdint.h>）

📝 步骤 3：编写显示函数

void display_char(uint16_t x, uint16_t y, const uint8_t *font_data, 
                  uint8_t width, uint8_t height) {
    // 根据您的显示驱动实现
    // 这里以 SSD1306 OLED 为例
    for (uint8_t row = 0; row < height; row++) {
        for (uint8_t col = 0; col < width; col++) {
            uint8_t byte_index = (row * width + col) / 8;
            uint8_t bit_index = (row * width + col) % 8;
            uint8_t pixel = (font_data[byte_index] >> bit_index) & 0x01;
            
            if (pixel) {
                OLED_DrawPixel(x + col, y + row, WHITE);
            } else {
                OLED_DrawPixel(x + col, y + row, BLACK);
            }
        }
    }
}

🚀 步骤 4：调用显示

// 显示单个字符
display_char(10, 10, font_4F60, 16, 16);  // 显示"你"

// 显示字符串
void display_string(uint16_t x, uint16_t y, const char *str) {
    uint16_t pos_x = x;
    while (*str) {
        // 查找字符对应的字库数据
        const uint8_t *font = find_font_data(*str);
        if (font) {
            display_char(pos_x, y, font, 16, 16);
            pos_x += 16;  // 移动到下一个字符位置
        }
        str++;
    }
}

❓ 常见问题（FAQ）

Q1: 为什么显示的文字是乱码或方块？

• 原因：取模方式、编码方式或字节顺序配置不正确
• 解决：
  1. 尝试切换「逐行式」↔「逐列式」
  2. 尝试切换「阴码」↔「阳码」
  3. 尝试切换「MSB」↔「LSB」
  4. 查看显示模块的数据手册，确认正确的配置

Q2: 为什么文字显示不完整或被裁剪？

• 原因：字体大小超过点阵高度
• 解决：减小字体大小，或增大点阵尺寸
• 建议：字体大小设置为点阵高度的 70%-90%

Q3: 如何生成完整的 ASCII 字库（0-127）？

• 方法：使用「批量取模」功能
• 步骤：
  1. 切换到「批量取模」标签
  2. 在文本框中输入所有 ASCII 字符（可使用脚本生成）
  3. 点击「批量生成」
  4. 导出完整的 C 文件

Q4: 点阵数据太大，如何优化存储空间？

• 方法 1：减小点阵尺寸（如从 32×32 改为 16×16）
• 方法 2：只生成实际使用的字符，不要生成完整字库
• 方法 3：使用压缩算法（如 RLE 行程编码）
• 方法 4：对于重复字符，只存储一份数据，通过索引引用

Q5: 如何在 STM32/Arduino 上使用生成的字库？

• STM32：
  1. 将 .c/.h 文件添加到 Keil/IAR/STM32CubeIDE 项目
  2. 在 main.c 中包含头文件
  3. 调用您编写的显示函数
• Arduino：
  1. 将 .c 文件改名为 .cpp（或直接包含 .c 文件）
  2. 在 .ino 文件中包含头文件
  3. 使用 Adafruit_GFX 或其他图形库的 drawBitmap 函数显示

Q6: 支持哪些编程语言和平台？

• 支持的语言：C、C++、Python、JavaScript、Java 等
• 支持的平台：
  • 嵌入式：STM32、Arduino、ESP32、51单片机、AVR、PIC
  • 桌面：Windows、Linux、macOS
  • 移动端：Android、iOS
• 通用性：生成的十六进制数据是通用的，任何平台都可以使用

🎓 进阶技巧

💡 技巧 1：预览验证

• 生成点阵后，仔细观察右侧的点阵预览图
• 对比原始字符，确认点阵质量
• 如果效果不佳，调整字体大小或更换字体类型

💡 技巧 2：批量处理

• 使用「批量取模」一次性生成多个字符
• 适合生成常用汉字表、ASCII 全集、数字符号集
• 导出的 C 文件可直接用于项目，无需逐个复制

💡 技巧 3：图片预处理

• 上传前使用图像处理软件（如 Photoshop、GIMP）优化图片
• 调整为黑白二值，去除噪点和杂边
• 确保图片比例为正方形，避免变形

💡 技巧 4：测试验证

• 先在模拟器或小屏幕上测试字库效果
• 确认显示正常后再部署到正式项目
• 保存多套配置，针对不同显示设备优化

💡 技巧 5：性能优化

• 将常用字库存储在 Flash 中，节省 RAM
• 使用 DMA 传输提高显示速度
• 对于频繁显示的字符，可以缓存到 RAM 中

💡 技巧 6：手绘设计

• 利用「手绘取模」功能创建自定义图标和特殊符号
• 先在纸上草拟设计，再在画布上精确绘制
• 善用撤销功能和网格辅助，提高绘制效率
• 结合文本取模生成的标准字符作为参考

⚠️ 注意事项

• 浏览器兼容性：建议使用 Chrome、Edge、Firefox 等现代浏览器
• 字体依赖：自定义字体需要在系统中已安装，否则会自动回退
• 图片大小：过大的图片会导致处理缓慢，建议先缩小再上传
• 内存限制：批量生成大量字符时，注意浏览器内存使用情况
• 数据备份：重要的字库数据请及时导出保存，避免丢失
• 硬件差异：不同显示模块可能需要不同的配置，请以实际测试为准

🎉 总结

本工具提供了完整的点阵字库生成功能，适用于各种嵌入式显示设备。通过合理配置参数，您可以生成高质量的点阵数据，轻松集成到您的项目中。

核心要点：

• ✅ 正确配置取模方式、编码方式和字节顺序是关键
• ✅ 根据实际需求选择合适的点阵尺寸和字体
• ✅ 善用批量处理和导出功能提高工作效率
• ✅ 在实际硬件上测试验证，必要时调整参数

祝您使用愉快！如有问题，欢迎反馈。🚀