2026年5月3日 – ESDkaiyuan

点击前往

📖 快速开始

选择功能模块：点击左侧导航菜单，选择「文本/汉字取模」、「图片取模」、「批量取模」或「手绘取模」
配置参数：在左侧配置面板设置点阵大小、字体、取模方式等参数
输入内容：在文本框中输入字符、上传图片文件，或在画布上手绘图形
生成数据：点击「生成点阵」按钮，右侧将显示点阵预览和十六进制数据
导出结果：点击「复制」按钮复制到剪贴板，或点击「导出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 可以通过位反转算法互相转换

🖼️ 图片取模详解

📤 上传步骤

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

🎯 单色取模（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：准备字库文件

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

🔧 步骤 2：添加到项目

将 .c 和 .h 文件复制到您的嵌入式项目目录
在需要使用字库的源文件中包含头文件：#include "font_data.h"
确保编译器支持 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 等现代浏览器
字体依赖：自定义字体需要在系统中已安装，否则会自动回退
图片大小：过大的图片会导致处理缓慢，建议先缩小再上传
内存限制：批量生成大量字符时，注意浏览器内存使用情况
数据备份：重要的字库数据请及时导出保存，避免丢失
硬件差异：不同显示模块可能需要不同的配置，请以实际测试为准

🎉 总结

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

核心要点：

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

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

日期: 2026年5月3日

在线取模【字库】工具更新[版本V 1.0.0.1]

📖 快速开始

⚙️ 核心参数详解

🔢 点阵大小（Width × Height）

🔤 字体大小（Font Size）

🎨 字体选择（Font Family）

🔄 取模方式（Scan Mode）

➡️ 逐行式（Row Scan / Horizontal）

⬇️ 逐列式（Column Scan / Vertical）

💡 如何选择？

🔐 编码方式（Encoding Mode）

⚫ 阴码（Negative Code）

⚪ 阳码（Positive Code）

💡 如何选择？

🔢 字节顺序（Byte Order）

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

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

💡 如何选择？

🖼️ 图片取模详解

📤 上传步骤

🎯 单色取模（Monochrome）

🌈 彩色取模（Color）

✍️ 手绘取模详解

🎨 工具栏功能

✏️ 画笔工具（Pen）

🧹 橡皮擦工具（Eraser）

↩️ 撤销功能（Undo）

🗑️ 清空画布（Clear）

📐 画布与网格

🖼️ 画布尺寸

🔲 网格显示

🎯 绘制技巧

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

💡 技巧 2：利用对称性

💡 技巧 3：善用撤销功能

💡 技巧 4：参考现有字库

💡 技巧 5：分层绘制

⚙️ 生成点阵数据

📤 导出与使用

📋 复制数据

📥 导出 C 文件

🎨 应用场景

⚠️ 注意事项

💡 最佳实践

📋 输出格式说明

🔢 十六进制（Hex）

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

💻 C 语言代码

💾 导出功能

📋 复制到剪贴板

📥 导出 C 文件

💻 嵌入式系统集成指南

📦 步骤 1：准备字库文件

🔧 步骤 2：添加到项目

📝 步骤 3：编写显示函数

🚀 步骤 4：调用显示

❓ 常见问题（FAQ）

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

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

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

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

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

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

🎓 进阶技巧

💡 技巧 1：预览验证

💡 技巧 2：批量处理

💡 技巧 3：图片预处理

💡 技巧 4：测试验证

💡 技巧 5：性能优化

💡 技巧 6：手绘设计

⚠️ 注意事项

🎉 总结