Pixel Atelier · 像素画工作台

一个零依赖的 48×48 响应式像素画编辑器，支持桌面浏览器与触屏设备。

主要功能

• 画笔和橡皮分别保存圆形/方形笔尖及 0～8 px 半径，默认均为方形单像素；画笔支持 Shift + 点击 从上一笔终点连续画直线
• 填充工具提供“邻接填充”和“选区填充”；选区填充在没有选区时会填满整个画布
• 水平、垂直、双向、四向和八向对称
• 矩形/手涂选区，以及复制、剪切、移动和粘贴；矩形选区可拖到画布外并自动裁切，存在选区时局部绘图和填充不会改动选区外像素
• 默认隐藏、可随时切换的像素网格；支持 20%～800% 视角缩放、滚轮按 10% 步进、鼠标右键平移和双指手势
• 独立透明像素和可调上限（默认 16、可设 1–16）的动态调色板，支持感知顺序自动排序、拖动重排、更新、添加、删除和整体清空
• 空调色板的默认候选颜色为 #777777，首次绘制时按需自动加入调色板
• 响应式颜色工作室：宽屏为右侧栏，窄屏或竖屏为可滚动底栏
• Lab 色域、HSL 色相环、RGB/HSL/Lab 通道三种选色视图；色图和明度滑块支持实时候选预览与限制边界重绘
• 基于 CIEDE2000 的可调颜色距离限制，默认 ΔE00 = 12、内置下限为 8，主界面与图片导入界面保持同步
• 图片定位与量化预览，以及无偏差、颜色偏移恢复、邻接对比增强、区域感知均衡等可选导入算法和参数
• 项目数据、透明 PNG 导入导出和本地自动保存（按住 Alt 导出 1× PNG）
• 从配置导入：粘贴 pngs2yml.py 生成的 floor_patterns 配置（name/colors/pattern）即可还原为画布像素与调色板，带实时预览
• 工具、对称模式、颜色规则和画布状态可自动恢复；所有有效修改进入统一的撤销/重做历史
• 单文件离线版 ΔE00 颜色分辨测试工具，可调整 2×2～6×6 候选布局，保证候选颜色互不重复，并按本轮候选色差范围连续评分

关键操作

• 色图拖动只改变候选颜色，不会自动修改调色板或历史记录
• 在色图上 Shift + 点击 添加新颜色，Alt + 点击 更新当前选中颜色；也可以使用侧栏按钮确认
• 在画布上按住 Alt 临时启用取色，可从其他像素切换当前颜色
• 更新调色板颜色会立即刷新所有引用该颜色 ID 的像素；此类全局颜色操作不受选区限制
• 候选颜色尚未加入调色板时直接绘制会自动添加；调色板已满或候选色不符合距离规则时，会提示并回退到当前选中颜色
• 删除单个颜色或清空调色板前会要求确认，相关画布像素会变为透明，并可通过撤销恢复
• 新增或导入颜色达到颜色数量上限（主界面与图片导入同步可调）时会阻止操作并提示；把上限调到低于当前颜色数会被阻止并标红，回退到当前颜色数；低于最小 ΔE00 下限的输入会标红并回退

浏览器兼容性

建议使用当前仍受支持的 Chrome、Edge、Firefox 或 Safari。项目依赖原生对话框、Pointer Events、ResizeObserver 和 Canvas；较旧的浏览器或内嵌 WebView 不在兼容范围内。通过 file:// 直接打开时，项目数据复制会在 Clipboard API 不可用时自动回退到传统复制方式。

文件结构

index.html                  编辑器页面
color-test-standalone.html  单文件离线颜色分辨测试
css/global.css              编辑器设计系统与响应式布局
js/app.js                   编辑器状态、绘图、颜色和文件逻辑
重做方向.md                 产品需求与交互规格

快捷键

• B 画笔、E 橡皮、F 填充、M 选区、G 网格，按住 Alt 临时取色
• 使用画笔完成一笔后，Shift + 点击 可从上一笔终点连接到新位置
• Ctrl/Cmd + Z 撤销，Ctrl/Cmd + Y 重做
• Ctrl/Cmd + C/X/V 复制、剪切、粘贴选区
• Delete 删除选区内像素并保留选区
• Enter 放置，Esc 取消选区或移动

数据模型

像素保存稳定的颜色 ID，而不是直接保存 HEX。调色板重排只改变导出索引，不改变画面；编辑颜色会同步影响引用该 ID 的所有像素。透明使用 null 独立表示，不占用颜色名额。