1. 项目概述与核心价值最近在整理一些老项目时翻到了一个用C和EasyX图形库实现的简易文本编辑器。这玩意儿虽然比不上VS Code、Sublime这些现代编辑器但作为学习图形界面编程、理解文本处理底层逻辑的练手项目价值巨大。很多朋友学C总停留在控制台的黑白世界里觉得枯燥。EasyX这个轻量级的图形库就像给C开了扇窗让你能用熟悉的语法画出窗口、按钮处理鼠标键盘事件瞬间把编程从“命令行艺术”变成了“可视化创造”。这个“文本编辑器”项目正是打通从算法逻辑到图形交互的绝佳桥梁。它本质上是一个基于像素绘制的、自定义UI的文本编辑工具。你需要自己管理字符的存储、光标的位置、滚动的逻辑以及用图形函数将这一切“画”出来。这个过程会让你深刻理解一个看似简单的“打字”功能背后有多少细节需要考虑从字符串的内存管理到光标的闪烁计时再到滚动条与文本内容的联动。通过实现它你不仅能巩固C核心的std::string、std::vector使用更能掌握消息循环、事件处理和自定义渲染这些GUI编程的通用思想。无论你是想为小游戏添加一个存档说明界面还是想深入理解更复杂编辑器的原理这个项目都是一个扎实的起点。2. 整体设计与核心思路拆解2.1 技术选型为什么是C和EasyX首先得说清楚选型逻辑。用C做桌面应用主流方向其实是Qt、MFC或者Win32 API。那为什么选EasyX核心在于轻量、直接和教学友好。EasyX是一个针对C/C的图形库它封装了Windows的GDI函数提供了一系列像line、circle、outtextxy这样简单的绘图函数。它的优势在于零门槛接入只需包含一个头文件graphics.h链接一个库就能开始画图。无需像Qt那样理解信号槽、元对象系统等复杂概念。过程式编程友好它的API是直观的函数调用非常符合从控制台转向图形界面的C学习者的思维习惯。你写一个循环在循环里检测事件、更新数据、重绘界面逻辑清晰。专注于绘图与交互它不提供现成的按钮、文本框控件。这意味着文本框、滚动条、光标全都要你自己用绘图函数画出来用逻辑去控制。这正是本项目最大的学习价值所在——你是在从零构建UI组件而不是在组装控件。当然它有明显的局限仅支持Windows平台且更适合小型项目或教学演示。但对于我们这个文本编辑器目标来说它恰到好处。2.2 核心架构数据、逻辑与渲染分离一个健壮的编辑器哪怕再简单也要遵循一定的架构原则避免代码变成一团乱麻。我采用的是经典的模型-视图-控制器MVC思想的简化版在这里可以理解为数据层、逻辑层、渲染层分离。数据层Model负责存储文本内容。最简单的方式是用一个std::vectorstd::string来存储每一行的文本。为什么不用一个巨大的std::string因为按行处理如插入、删除、光标移动会更高效直观。我们还需要记录一些状态比如光标所在的行列位置、视图的滚动偏移量scrollX, scrollY、选区的起止点等。逻辑层Controller负责处理所有的输入事件键盘、鼠标并更新数据层。例如用户按下字母‘A’逻辑层需要在数据层当前光标位置插入字符‘A’并将光标列位置加1。用户点击鼠标逻辑层需要计算点击位置对应到文本的哪一行哪一列并更新光标状态。渲染层View负责将数据层的状态“画”到屏幕上。它根据当前存储的文本、光标位置、滚动偏移量调用EasyX的outtextxy等函数在正确的位置绘制出文本、光标、选区背景以及滚动条。整个程序的驱动核心是一个消息循环。在EasyX中通常是while循环配合peekmessage或kbhit、mousepos等函数来获取输入然后调用逻辑层处理最后调用渲染层重绘。2.3 功能边界定义我们具体要实现什么在动手前明确范围很重要。我们这个编辑器v1.0的目标是基本文本编辑字符输入、删除Backspace, Delete、回车换行。光标导航通过键盘方向键、Home、End键移动光标通过鼠标点击移动光标。视图滚动当文本行数或行长超过可视区域时实现垂直和水平滚动条或通过键盘PgUp/PgDown滚动。文件操作打开、保存纯文本文件.txt。选区与基础编辑支持鼠标拖动选择文本支持对选中文本的复制、剪切、粘贴依赖系统剪贴板这里需要调用Windows API。光标闪烁一个可见的、周期性闪烁的插入符增强编辑体验。先实现这些一个可用的编辑器雏形就出来了。更高级的功能如语法高亮、多标签、查找替换可以放在v2.0。3. 核心模块实现与关键技术点3.1 数据结构的定义与初始化一切从定义核心数据结构开始。我创建了一个Editor类来封装所有状态。#include graphics.h #include vector #include string #include chrono class Editor { private: // 核心数据文本行 std::vectorstd::string lines; // 光标状态 (行、列从0开始计数) int cursorRow; int cursorCol; // 视图偏移滚动量 int scrollX; // 水平滚动像素 int scrollY; // 垂直滚动行数 // 编辑区尺寸 int editAreaWidth; int editAreaHeight; // 字体尺寸用于计算行列位置 int charWidth; int charHeight; // 光标闪烁控制 bool cursorVisible; std::chrono::steady_clock::time_point lastCursorToggleTime; // 选区状态 bool hasSelection; int selectStartRow, selectStartCol; int selectEndRow, selectEndCol; public: Editor(int width, int height); void handleInput(); void render(); void loadFile(const char* filename); void saveFile(const char* filename); // ... 其他成员函数 };关键点解析lines使用vectorstringlines[0]就是第一行。初始化时可以放入一个空字符串“”代表空文档。cursorCol的值不能超过当前行lines[cursorRow].length()在行尾时它等于长度值。scrollY是滚动的行数scrollX是滚动的像素。因为垂直滚动通常按行计算更方便而水平滚动需要精确到像素来对齐字符。字体尺寸charWidth和charHeight需要通过EasyX的gettextwidth和gettextheight函数针对你选用的字体和字号进行计算并在初始化时获取。这是后续所有坐标计算的基础。3.2 输入事件处理键盘与鼠标输入处理是逻辑层的核心在handleInput函数中完成。键盘处理 EasyX中常用kbhit()和getch()获取键盘输入。需要注意getch()在获取方向键等功能键时会返回两个值第一个是0或224第二个是扫描码。void Editor::handleInput() { // 处理键盘输入 while (kbhit()) { int key getch(); if (key 0 || key 224) { // 功能键前缀 key getch(); // 获取真正的扫描码 switch (key) { case 72: cursorUp(); break; // 上箭头 case 80: cursorDown(); break; // 下箭头 case 75: cursorLeft(); break; // 左箭头 case 77: cursorRight(); break; // 右箭头 case 71: moveToLineHome(); break; // Home case 79: moveToLineEnd(); break; // End case 73: pageUp(); break; // PgUp case 81: pageDown(); break; // PgDn // ... 处理Delete等 } } else { // 普通字符 switch (key) { case 8: // Backspace deleteCharBeforeCursor(); break; case 13: // Enter insertNewLine(); break; default: // 可打印字符 if (key 32 key 126) { // ASCII可打印字符范围 insertCharAtCursor((char)key); } break; } } // 每次按键后确保光标可见并重置闪烁计时 cursorVisible true; lastCursorToggleTime std::chrono::steady_clock::now(); } // 处理鼠标输入 MOUSEMSG m; if (MouseHit()) { m GetMouseMsg(); if (m.uMsg WM_LBUTTONDOWN) { // 将鼠标坐标转换为文档行列坐标 int clickRow (m.y / charHeight) scrollY; int clickCol (m.x - scrollX) / charWidth; // 注意水平滚动偏移 // 边界检查 if (clickRow 0 clickRow lines.size()) { if (clickCol 0) clickCol 0; else if (clickCol lines[clickRow].length()) clickCol lines[clickRow].length(); setCursor(clickRow, clickCol); clearSelection(); // 点击新位置清除旧选区 hasSelection false; } } else if (m.uMsg WM_MOUSEMOVE m.mkLButton) { // 鼠标拖动扩展选区 // ... 计算当前鼠标位置对应的行列更新selectEndRow/Col } } }注意鼠标坐标转换是难点。m.x和m.y是窗口客户区坐标。需要先减去编辑区左上角坐标如果编辑区不是从(0,0)开始再除以字符宽高并加上滚动偏移才能得到文档中的行列坐标。务必做好边界检查防止数组越界。3.3 文本渲染与光标绘制渲染层在render函数中负责将一切可视化。核心是遍历当前可见行将文本画出来然后画光标和选区。void Editor::render() { cleardevice(); // 清屏 // 1. 计算当前可见的行范围 int startRow scrollY; int endRow scrollY (editAreaHeight / charHeight); if (endRow lines.size()) endRow lines.size(); // 2. 绘制文本考虑水平滚动 settextcolor(BLACK); for (int i startRow; i endRow; i) { int yPos (i - scrollY) * charHeight; // 绘制当前行文本。如果行太长可以只绘制可见部分。 std::string visiblePart lines[i].substr(scrollX / charWidth); // 简单处理实际需考虑字符边界 outtextxy(0 - scrollX % charWidth, yPos, visiblePart.c_str()); // 处理亚像素级滚动 // 3. 绘制选区背景如果该行在选区内 if (hasSelection) { // 计算当前行选区的起始和结束列这是一个复杂逻辑需要比较selectStart/End和当前行 int selStartColInLine, selEndColInLine; if (getSelectionInLine(i, selStartColInLine, selEndColInLine)) { // 计算选区矩形坐标并填充颜色 int selX1 selStartColInLine * charWidth - scrollX; int selX2 selEndColInLine * charWidth - scrollX; int selY yPos; setfillcolor(EGERGB(200, 220, 255)); // 淡蓝色填充 solidrectangle(selX1, selY, selX2, selY charHeight); // 重新绘制该行文本确保文本在选区上层 outtextxy(0 - scrollX % charWidth, yPos, visiblePart.c_str()); } } } // 4. 绘制光标如果可见 if (cursorVisible) { int cursorX cursorCol * charWidth - scrollX; int cursorY (cursorRow - scrollY) * charHeight; // 确保光标在可见区域内 if (cursorRow startRow cursorRow endRow cursorX 0 cursorX editAreaWidth) { line(cursorX, cursorY, cursorX, cursorY charHeight - 1); } } // 5. 绘制滚动条简易版用矩形表示位置 // 垂直滚动条 float scrollRatio (float)scrollY / (lines.size() - (editAreaHeight/charHeight)); scrollRatio std::max(0.0f, std::min(1.0f, scrollRatio)); int scrollBarY scrollRatio * (editAreaHeight - 20); setfillcolor(LIGHTGRAY); solidrectangle(editAreaWidth - 10, 0, editAreaWidth, editAreaHeight); setfillcolor(DARKGRAY); solidrectangle(editAreaWidth - 10, scrollBarY, editAreaWidth, scrollBarY 20); }关键点与避坑指南性能优化cleardevice()会重绘整个屏幕如果文本量大频繁重绘会卡顿。一个优化是局部重绘只重绘文本发生变化的区域脏矩形。但对于初学者项目全量重绘更简单。光标闪烁需要在主循环中根据时间控制cursorVisible的状态。例如每500毫秒切换一次可见性。auto now std::chrono::steady_clock::now(); auto duration std::chrono::duration_caststd::chrono::milliseconds(now - lastCursorToggleTime); if (duration.count() 500) { cursorVisible !cursorVisible; lastCursorToggleTime now; }选区绘制这是最复杂的部分之一。你需要一个函数getSelectionInLine它能判断给定行i是否被选中并计算出在该行内的起始列和结束列需要处理选区跨行、反向选择等情况。正确的逻辑是将选区的起点和终点规范化确保(startRow, startCol)在(endRow, endCol)之前然后判断当前行是否在这个规范化后的区间内。文本换行与水平滚动我们目前实现的是“不换行”模式超长的行会产生水平滚动条。如果你想实现自动换行软换行那么数据结构需要改变需要将一行原始文本根据编辑区宽度拆分成多个“显示行”这会大大增加复杂度。建议v1.0先做水平滚动。3.4 文件读写与系统剪贴板集成文件操作相对简单使用C标准库的fstream即可。void Editor::loadFile(const char* filename) { std::ifstream file(filename); lines.clear(); std::string line; while (std::getline(file, line)) { // 注意getline会丢弃换行符我们需要把它加回来吗 // 在我们的数据模型中换行符由行的分割本身表示所以不需要。 // 但Windows的换行是\r\ngetline只去掉\n可能会留下\r需要处理。 if (!line.empty() line.back() \r) { line.pop_back(); } lines.push_back(line); } if (lines.empty()) lines.push_back(); // 确保至少有一行 cursorRow 0; cursorCol 0; scrollX scrollY 0; file.close(); } void Editor::saveFile(const char* filename) { std::ofstream file(filename); for (size_t i 0; i lines.size(); i) { file lines[i]; if (i ! lines.size() - 1) { file \n; // 或 \r\n 用于Windows格式 } } file.close(); }系统剪贴板集成则需要调用Windows API。这是项目中与操作系统交互最深的部分。#include windows.h // 需要包含Windows头文件 void Editor::copyToClipboard() { if (!hasSelection) return; // 1. 获取选中的文本 std::string selectedText getSelectedText(); // 需要实现遍历选区行并拼接 // 2. 打开剪贴板 if (OpenClipboard(NULL)) { EmptyClipboard(); // 清空剪贴板 // 3. 分配全局内存并复制文本 HGLOBAL hMem GlobalAlloc(GMEM_MOVEABLE, selectedText.size() 1); if (hMem) { char* pMem (char*)GlobalLock(hMem); strcpy(pMem, selectedText.c_str()); GlobalUnlock(hMem); // 4. 设置剪贴板数据 SetClipboardData(CF_TEXT, hMem); } // 5. 关闭剪贴板系统会管理hMem的生命周期 CloseClipboard(); } } void Editor::pasteFromClipboard() { if (OpenClipboard(NULL)) { HANDLE hData GetClipboardData(CF_TEXT); if (hData) { char* pszText (char*)GlobalLock(hData); if (pszText) { insertStringAtCursor(pszText); // 需要实现插入字符串的函数 GlobalUnlock(hData); } } CloseClipboard(); } }重要提示剪贴板API是Windows特有的。如果你的项目考虑跨平台这部分需要条件编译或者使用第三方库如SDL、GLFW的剪贴板功能。getSelectedText函数需要正确处理跨多行的选区在每行末尾添加换行符\r\n或\n。4. 工程搭建、调试与进阶优化4.1 开发环境配置与项目设置我使用的是Visual Studio 2022这是Windows下C开发最方便的选择。当然你也可以用VSCode配合MinGW但配置EasyX会稍麻烦一些。在VS中配置EasyX的步骤下载EasyX从官网下载安装包。安装运行安装程序它会自动检测已安装的Visual Studio版本并将头文件和库文件复制到对应的VC目录下。创建项目新建一个“空项目”或“控制台应用”。设置子系统在项目属性 - 链接器 - 系统中将子系统设置为“窗口(/SUBSYSTEM:WINDOWS)”。这是关键一步否则程序会一闪而过的控制台窗口。包含头文件在代码中直接#include graphics.h即可。EasyX安装程序已经帮你配置好了库路径。主程序框架#include graphics.h #include “Editor.h” // 假设我们的Editor类在这个头文件 int main() { // 初始化图形窗口例如800x600 initgraph(800, 600); // 设置字体必须在initgraph之后 LOGFONT f; gettextstyle(f); f.lfHeight 20; // 字体高度 f.lfWidth 0; // 0表示由系统根据高度匹配宽度 _tcscpy_s(f.lfFaceName, _T(“Consolas”)); // 使用等宽字体 settextstyle(f); setbkmode(TRANSPARENT); // 设置文字背景透明 // 创建编辑器实例传入编辑区域尺寸可留出边距 Editor editor(780, 580); // 主消息循环 while (true) { // 处理输入 editor.handleInput(); // 更新状态如光标闪烁计时 editor.update(); // 渲染 editor.render(); // 延时控制帧率降低CPU占用 Sleep(10); // 休眠10毫秒 } closegraph(); return 0; }4.2 常见问题与调试技巧实录在开发过程中我踩过不少坑这里记录几个典型的问题1输入法无法正常输入中文。现象在编辑器中切换中文输入法打出的字直接上屏没有候选框或者候选框出现在奇怪的位置。原因EasyX是基于GDI的绘图窗口它没有像标准Win32窗口那样处理IME输入法编辑器消息。默认情况下对于直接接收键盘消息的图形窗口IME支持不完整。解决方案一个比较彻底的方案是创建一个透明的、覆盖在EasyX窗口上的标准Win32编辑控件来接管输入法输入然后将得到的文本传递给我们的编辑器逻辑。但这很复杂。对于学习项目一个折中方案是接受这个限制或者提示用户暂时使用英文输入。另一种思路是尝试拦截并处理WM_IME_*系列消息但这需要对Windows IME编程有较深了解。问题2滚动时文本闪烁严重。现象滚动滚动条或快速按键时屏幕闪烁。原因cleardevice()清屏和逐行绘制文本之间有时间差造成了视觉上的闪烁。解决方案启用双缓冲。EasyX提供了BeginBatchDraw()、FlushBatchDraw()和EndBatchDraw()函数。// 在渲染开始前 BeginBatchDraw(); cleardevice(); // ... 你的所有绘制操作 FlushBatchDraw(); // 一次性输出到屏幕 // 不需要EndBatchDraw除非你想开始新的不批量绘制的操作将所有绘制操作放在BeginBatchDraw和FlushBatchDraw之间图形会先在内存中画好然后一次性刷新到屏幕能有效消除闪烁。问题3鼠标点击位置计算不准尤其是水平滚动后。现象点击某行文字中间光标却跳到了行首或行尾。原因坐标转换公式错误。clickCol (m.x - scrollX) / charWidth;这里m.x是鼠标在窗口中的x坐标scrollX是文档水平滚动的像素值。但你的编辑区域可能不是从窗口(0,0)开始的比如有边距。另外scrollX可能不是charWidth的整数倍导致亚像素对齐问题。排查与修复在鼠标点击时将m.x,m.y, 计算出的clickRow,clickCol打印到控制台或窗口标题上进行对比调试。确保公式正确clickCol (m.x - editAreaLeft - scrollX) / charWidth。其中editAreaLeft是编辑区域距离窗口左边的像素值。对于亚像素滚动clickCol应该是整数。除法结果需要向下取整(floor)。可以使用(int)((m.x - editAreaLeft - scrollX) / charWidth)。问题4处理长行时性能急剧下降。现象当某一行有几千个字符时滚动或编辑变得非常卡顿。原因每次渲染都绘制整行长文本outtextxy函数在处理超长字符串时效率低。并且水平滚动计算也可能遍历整个长字符串。优化方案渲染优化只绘制可见部分。计算startCol scrollX / charWidthendCol startCol (editAreaWidth / charWidth) 1然后使用substr截取这一部分进行绘制。数据结构优化对于超长行可以考虑引入“行块”或“分片”的概念将一行拆分成多个固定长度的片段来管理但这会显著增加复杂度。对于学习项目可以加一个警告或建议用户不要编辑超长行。4.3 功能进阶与扩展思路当基础版本稳定后你可以尝试添加更多功能让这个编辑器更像一个“产品”语法高亮思路为不同的语言定义关键词、字符串、注释等规则正则表达式或状态机。实现在渲染每一行时不是调用一次outtextxy而是遍历该行字符串根据规则将不同词法单元用不同颜色绘制。这需要你按词法单元分段调用settextcolor和outtextxy。挑战高性能实时高亮需要优化词法分析算法避免在每次按键后都全文档重新分析。多文档标签页思路将Editor实例封装到Document类中再用一个std::vectorDocument管理所有打开的文档。顶部绘制标签栏点击标签切换当前活动的Editor。实现主循环中处理当前活动编辑器的输入和渲染。鼠标点击标签栏区域时切换活动编辑器索引。查找与替换思路弹出一个简单的对话框可以自己用矩形和输入框画获取查找关键词和替换词。实现遍历lines向量使用std::string::find进行搜索。找到后高亮显示匹配位置可以修改选区绘制逻辑来实现临时高亮。替换操作就是修改对应行的字符串。撤销/重做思路这是编辑器最经典的功能之一。需要实现命令模式。实现定义一个Command基类有execute和undo方法。派生InsertCommand、DeleteCommand等。维护两个栈undoStack和redoStack。每次执行编辑操作时创建一个对应的Command对象执行它并压入undoStack同时清空redoStack。撤销时从undoStack弹出命令执行undo并压入redoStack。实现这些进阶功能每一项都是一个不小的挑战但每完成一项你对软件架构、数据结构和算法的理解都会更深一层。这个用C和EasyX搭建的文本编辑器就像一棵技能树的主干你可以沿着它不断生长出新的枝丫。