JS Paint 项目路线图解析：从 TODO.md 看经典画图工具的开源演进方向

前端桌面应用图像处理【免费下载链接】jspaint Classic MS Paint, ✨Extras项目地址https://gitcode.com/gh_mirrors/js/jspaint点击查看免费下载JS Paint 是一个用 Web 技术还原经典 MS Paint 体验的开源项目其 TODO.md 是作者维护的“未来规划清单”集中记录了帮助系统、编辑能力、设备适配、工具交互以及 Electron 桌面端等方向的演进设想。本文以该清单为骨架结合仓库内 src/sessions.js、src/tools.js、src/image-manipulation.js、src/electron-main.js 等源码逐项解读其规划意图与落地现状帮助读者理解项目当前能力边界与可能的演进路径。一、文档定位这是一份路线图而非缺陷列表TODO.md 开篇以图标与 JS Paint Todo 标题起头正文按Help帮助系统、Visual视觉、Extended editing扩展编辑、Device support设备支持、Tools工具、Desktop App (Electron)桌面应用、Also其他七个板块组织。它记录的并非崩溃或 bug 清单而是作者对功能形态的构想与未完成项例如“可选填充容差”“多子图像文档”“在线多人会话”等。阅读时应注意清单中的条目大多带有“可选optional”“可能maybe”“应该should”等措辞属于设计意向而非承诺部分功能如多用户会话在源码中已有雏形另有相当一部分仍停留在构想阶段。二、帮助系统Help从静态页面到交互式教程的设想TODO 清单在 Help 板块提出了一系列增强帮助体验的想法可归为两类。链接化与主题组织作者希望帮助系统中的“链接式事物”改造成弹窗并将弹窗内文字设为可选中、将“相关主题”做成标题加链接而非现在的“奇怪右键菜单”同时补充“Tips and Tricks”“透明度”“多人协作/在线共享文档”等主题并完善索引、搜索与键盘支持。交互式教程设想由 Clippy 助手托管交互式教程并提到基于 ClippyJS 目录内含大量paint_*.html主题页与default.html帮助入口相衔接当前帮助以静态页面为主交互式教程属于向前演进的方向。三、视觉与光标Visual.cur文件与光标兼容性的技术细节Visual 板块记录了一个非常具体的技术痛点填充桶与喷枪光标需要在部分区域反转背景色这对.png格式不可行而 Microsoft Edge 还要求自定义光标必须使用.cur格式。仓库中现代主题已备好.cur文件见 images/modern/cursors 下的airbrush.cur、paint-bucket.cur、magnifier.cur等经典主题的光标则在仓库外提取。计划内容是“复制、语义化重命名、启用并测试格式回退是否按预期工作”。这解释了为何光标配置在 src/tools.js 中大量使用cursor: [precise, [16, 16], crosshair]这类数组形式——既有精确点位光标也有按工具语义划分的光标未来统一迁移到.cur后即可在 Edge 等浏览器中获得一致的回退表现。四、扩展编辑能力Extended editing透明度、多子图像与多人会话这是 TODO.md 篇幅最重的板块也最能体现作者对“超越经典 MS Paint”的野心。4.1 可选填充容差Fill tolerance清单提出“可选的填充容差从设置菜单启用的滑块”。对应源码中src/image-manipulation.js 定义了const fill_threshold 1并在 src/tools.js 再次出现同样取值注释说明该值“刚好足以规避 Brave 浏览器的 farbling 指纹问题”。flood-fill 函数 的起点颜色比较正是基于该阈值Math.abs(fill_r - start_r) fill_threshold Math.abs(fill_g - start_g) fill_threshold Math.abs(fill_b - start_b) fill_threshold Math.abs(fill_a - start_a) fill_threshold源码注释src/image-manipulation.js#L407明确写道“允许在填充阈值内填充相近颜色”是待办项当前阈值过低导致问题不易被发现但作为用户可配置选项会更理想。可见“填充容差滑块”的设想已具备底层常量基础缺的只是 UI 暴露与阈值算法完善。4.2 透明度扩展清单列出三点颜色不透明度滑块、混合blend与复制copy/overwrite模式切换、以及在填充算法中归一化任何rgba(X, X, X, 0)。最后一点的动机很务实通过“取色器 不透明度滑块”组合调色时用户很容易自然产生大量零透明度但 RGB 值互不相同的像素若不归一化透明像素的颜色值差异会造成不必要的噪声。这与 src/OnCanvasSelection.js 中FIXME: if you have both transparency modes on and you try to clear an area to transparency, it doesnt work所反映的透明度逻辑复杂度相互印证——透明度模式组合是项目编辑模型中的已知难点。4.3 多子图像文档GIF / APNG / 多尺寸图标 / 分层 / 分页清单将“多子图像文档”视为一个统一主题计划提供子图像切换组件并让撤销/重做覆盖各子图像具体形态包括文档类型计划采用的库当前状态动画 GIFjnordberg/gif.js已有部分支持动画透明 APNGUPNG.js已用于 PNG 加载/保存加载/保存已落地多尺寸 Windows ICOjBinary可读写 ICO待实现Mac ICNS—待实现分层 PSDpsd.js待实现OpenRaster ORAora.js待实现分页 PDFpdf.js单页已支持单页已落地DjVudjvu.js待实现多帧 TIFFUTIF.js单页/单帧已支持单页/单帧已落地源码印证了部分条目已从“计划”变为“实现”src/functions.js 中GIF 渲染使用lib/gif.js/gif.worker.js作为 worker 脚本L1921PNG 编码采用 UPNG.js注释明确“UPNG.js 比浏览器内置 PNG 编码器压缩更好”L3853TIFF 编解码走 UTIF.jsL3864-L3990PDF 则通过lib/pdf.js/build/pdf.worker.js与lib/pdf.js/web/cmaps/加载L4001-L4007。这些第三方库在仓库 lib 目录中均可找到对应文件如 lib/gif.js、lib/UPNG.js、lib/UTIF.js、lib/pdf.js。值得注意的是这些能力大多以“导入/导出”形式存在而 TODO 中设想的子图像切换组件与跨子图像撤销/重做仍是增量工作。4.4 在线多人与本地单用户会话清单明确指向 sessions.js并列出三个已知问题没有冲突解决机制用户编辑会覆盖其他用户的编辑不是最终一致eventually consistent的其他用户移出父元素之外的光标可能导致页面可滚动。src/sessions.js 展示了该模块的真实形态LocalSession类将画布以image#session_id为键写入本地存储localStore.set(ls_key, main_canvas.toDataURL(image/png))并通过 100ms 防抖debounce自动保存会话结束时取消防抖并立即落盘L112-L170。多用户部分则维护user对象光标坐标、当前工具、HSL 颜色与随机生成的用户 ID注释说明“用户 ID 不持久同一人每次进入会话都会获得新 ID”并提及“本可以让颜色持久化”L173-L198。此外 src/sessions.js#L34-L91 的“Recover Document”对话框会在画布被清空时弹出提示可通过撤销恢复文档或打开“文件 管理存储”查看备份——这正是 TODO 中桌面端“文档恢复”能力在 Web 端的对应实现。4.5 对称、镶嵌、3D 纹理与无限画布的统一系统清单设想用一个共享系统统一支撑对称symmetry、镶嵌tessellation、3D 模型贴图绘制甚至无限画布无限画布引擎生成简单正方形几何但需要“多可编辑纹理”支持对 3D 模型同样有用而分层、动画、多尺寸图标也需要类似的多子图像系统。针对 3D 贴图绘制作者梳理了两类方案UV 动态如 Chameleon / Chameleon.js随绘制自适应纹理分辨率UV 静态光线追踪指针求纹理坐标默认得到纹理坐标空间缩放结果屏幕空间绘制默认得到屏幕空间缩放结果。作者还强调某些方案可能无法扩展到镶嵌与对称并引用“假设 UV 无重叠三角形、无可平铺纹理”作为关键约束同时列举了自适应的开源方案与具备自适应/静态双 UV 模式的绘画雕刻项目作为参考。这部分属于高度实验性的远期构想仓库中尚无对应实现代码。4.6 以 SVG/HTML 保存可编辑文本清单提出保存文本并记录变换使图像能以 SVG或 HTML保存包含不可见但可被屏幕阅读器读到的可选择文本元素每次移动选区时复制文本并为两部分创建 clip-path且只让其中一个对屏幕阅读器发声。这是关于无障碍a11y与可编辑性结合的细致设想当前源码中文本编辑由 src/OnCanvasTextBox.js 承担尚未见到 SVG 导出链路。五、设备支持Device support触屏、指针类型与替代输入Device support 板块集中处理非桌面指针设备的体验问题阻止按钮和历史条目中的文本被选中触屏设备放大菜单与窗口标题栏关闭按钮放大镜工具在触屏上等待 pointerup 再缩放——作者还自问“要检测触屏是否只需跟踪上次 pointermove 是否有按键按下……或者直接用pointerType”为“彩色橡皮擦”Color Eraser提供不依赖鼠标右键的访问方式——src/tools.js#L376-L379 显示橡皮擦工具名为Eraser/Color Eraser其语音识别关键词包含color eraser, color replacer, replace color等说明该能力已通过语音识别src/speech-recognition.js获得了一种替代入口但鼠标/触屏上的替代操作方式仍是待办为依赖小键盘的功能提供替代方案数字键盘/-增大/减小笔刷尺寸、选区尺寸加倍/减半Shift 语境化切换比例缩放、涂抹/拖尾选区、吸附 8 方向并提到等轴测模式CtrlSelect触发“裁剪到选区”菜单项避免触屏上误把工具栏拖成独立窗口。其中“Shift 比例缩放选区”在 src/OnCanvasSelection.js#L135-L153 已有部分呼应选区拖拽时若按住 Shift 会执行“Stamp Selection”盖印选区Ctrl 同样触发盖印代码旁标注TODO: how should this work for macOS? where ctrlclick secondary click?——这正体现了清单中反复出现的“跨平台输入语义”考量。六、工具细节Tools选区、文本与形状样式Tools 板块聚焦三个具体工具方向。Select / Free-Form Select被动模式设想选区在真正执行“移动”或“反选”等操作前不产生撤销记录——用户可以先建立选区、再更换次要颜色、然后拖出选区使其以所选颜色切出若选区后没有任何操作就取消则不应产生任何 undoable。同时希望按住 Shift 比例缩放选区作者自注“也许应该默认如此”。Text若文本将超出画布边缘则拒绝输入作者注明“至少 mspaint 是这样做的”当字体含有向左延伸的字形如 Times New Roman 的斜体 f时在文本区左侧补内边距。作者给出了一个精巧的检测方案将文本中所有字形外加一组常见字母全部重叠放置、绝对定位在左侧留出探测空间扫描最左侧像素得到最大向左延伸量并按“字体 字号 属性”缓存已测字形与最大延伸值避免重复渲染斜体 f 比常规 f 延伸更多因此缓存键须包含属性。此外还希望持久化 FontBox 的位置。Shape Styles形状工具响应 Ctrl作者标注“它很复杂”黑白模式与冬季主题下的图案填充需确保各工具对齐并应建立“颜色值与图案填充”之间的映射——由文本工具以及模式切换时的调色板共用黑白模式往返切换时应保留颜色。仓库中冬季主题的图案资源见 images/winter如grinch-smile-spritesheet.png黑白模式则与monochrome_palette等全局状态相关src/functions.js 顶部声明。七、桌面应用Electron从“浏览器页面”到“桌面程序”的改造清单TODO 清单将 Electron 改造拆为三层。Electron 样板记住窗口位置/状态、配置自动更新、用show: false配合ready-to-show事件让窗口在加载完成前保持隐藏。安全开启上下文隔离context isolation、确认多人在线功能关闭无碍。功能子窗口作为独立窗口无需用户主动打开“文件 管理存储”即可进行文档恢复需要时通过对话框上下文弹出在状态栏显示悬停链接的 URL作者提到 Electron 的update-target-url事件给了灵感也可用鼠标事件实现最近文件列表未来也可能应用于 98.js.org 网页版macOS 上用win.setSheetOffset配合菜单栏高度Windows 上处理session-end事件并询问是否保存检测磁盘上文件变化并询问是否重新加载。对照源码 src/electron-main.js其中contextIsolation: false表明上下文隔离目前尚未启用与清单的“Security”待办直接对应——即安全加固属于未来工作。而文档恢复能力在 Web 端src/sessions.js 的 Recover Document 对话框已实现桌面端要做的是在恰当时机“上下文弹出”而非依赖用户主动发现。Electron 相关注入逻辑见 src/electron-injected.js内含文件对话框默认扩展名、壁纸设置等平台相关代码。八、代码质量与工程治理AlsoAlso 板块把工程治理也纳入 TODO处理源码中所有TODO/FIXME注释并指向 GitHub IssuesCSS借助 os-gui 抽取按钮样式消除重复DRY用 CSS 变量理清z-index层级JS将代码更好地按文件组织作者自嘲functions.js“只比叫 code.js 高一档”$ToolWindow内置$Button设施而$DialogWindow用更好的实现覆盖了它现在又有了showMessageBox作者考虑是否把show_error_message并入showMessageBox且$ToolWindow是 OS-GUI$Window的包装、应适时移除整体提升代码可读性Images每个主题使用共享 sprite sheet并做优化。仓库中确实散布着大量此类标记例如 src/$ColorBox.js、src/Handles.js、src/OnCanvasSelection.js、src/app.js“最小化 app.js 中的全局变量与导出”、src/app-localization.js 等。这印证了“治理 TODO 标注”是一条贯穿全仓库的长期主线。而 lib 目录中的 os-gui含$Window.js、MenuBar.js、parse-theme.js正是 TODO 提到的 CSS 抽离目标所在。九、结语路线图与现实的对照关系通读 TODO.md 并结合源码可以得出几点判断多文件格式支持已明显推进GIF、APNG、TIFF、PDF单页/单帧借助 lib 中的 gif.js、UPNG.js、UTIF.js、pdf.js 已落地ICO/ICNS、PSD/ORA、DjVu 及多子图像 UI 仍是未竟之业编辑模型是核心难点透明度组合src/OnCanvasSelection.js 的 FIXME、填充容差src/image-manipulation.js、多人会话一致性src/sessions.js 的已知问题均指向“像素级编辑 多用户 多子图像”这一复杂交集Electron 桌面端处于“能用但未加固”阶段上下文隔离未开启src/electron-main.js窗口状态记忆、自动更新、最近文件等桌面特性尚待补齐帮助与无障碍属于体验增强层交互式教程、可读文本的 SVG 导出、触屏与键盘替代输入等设想尚无对应实现。对于希望参与或研究 JS Paint 的开发者TODO.md 是一份难得的“作者视角设计文档”它揭示了每个功能背后“为什么存在”“当前卡在哪”“打算怎么解”。对照 src、lib、images 中的实际代码阅读可以更准确地判断哪些是“计划”哪些是“半成品”哪些已经“超额完成”。相关阅读src/sessions.js会话与备份、src/tools.js工具与光标定义、src/image-manipulation.jsflood-fill 与阈值、src/electron-main.js桌面端主进程、help帮助页面资源。赞分享前端桌面应用图像处理【免费下载链接】jspaint Classic MS Paint, ✨Extras项目地址https://gitcode.com/gh_mirrors/js/jspaint点击查看免费下载相关推荐fq 开发路线图与已知缺陷全解析从 doc/TODO.md 看 jq for binary formats 的演进方向fq 开发路线图与已知缺陷全解析从 doc/TODO.md 看 jq for binary formats 的演进方向 fq 是一个面向二进制格式的 jq 式开发工具CLIUAMP 项目路线图深度解析TODO.md 中的服务端与 UI 演进方向UAMP 项目路线图深度解析TODO.md 中的服务端与 UI 演进方向 导读 本文以 TODO.md https://link.gitcode.com/i/示例工程移动开发音视频Snapcast 开发路线图解析TODO.md 中的未决功能、同步机制与 Meta 流演进方向Snapcast 开发路线图解析TODO.md 中的未决功能、同步机制与 Meta 流演进方向 本文基于 Snapcast 仓库根目录下的 TODO.md h音视频上一篇OpenNFS资产加载器详解解密NFS1-6原始数据文件格式下一篇Unkey前端性能优化代码分割与资源懒加载实践创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考