ef6010a8b2
重构图片渲染逻辑，引入图片缓存系统和状态压缩机制 添加批量处理层叠图功能，每批5个图片处理 实现内存监控和自动清理机制 增加全局Loading管理器显示操作进度 优化撤销重做功能的状态比较和保存逻辑
79 lines
7.1 KiB
Markdown
79 lines
7.1 KiB
Markdown
*** 项目要求 ***
|
||
一款以手机端为主、电脑端兼容的简易邀请函在线制作工具，无需安装、无需后端，打开浏览器即可使用。用户可上传背景图、添加文字、拖动位置，最终一键生成并保存完整邀请函图片。
|
||
核心功能
|
||
1. 设备适配
|
||
移动端优先设计，手机操作最流畅
|
||
电脑端完全兼容，可正常制作、编辑、保存
|
||
背景图自动适应屏幕大小，不变形、不拉伸
|
||
2. 预览区域规范
|
||
预览区域固定 3:5 比例
|
||
容器在页面居中显示，美观大方
|
||
背景图自适应铺满容器
|
||
3. 背景图上传
|
||
支持本地图片上传
|
||
支持 jpg /png/jpeg 格式
|
||
自动居左显示、自适应保留原有比例
|
||
4. 输入框功能
|
||
页面加载自动在右下角生成 2 个输入框，输入框为透明无边框设计
|
||
双击输入框 → 编辑文字
|
||
点击 / 长按输入框 → 可拖动位置
|
||
两个输入框完全独立，拖动互不影响
|
||
可随意拖拽到预览区域内任意位置
|
||
5. 操作交互优化
|
||
点击空白区域 → 自动取消输入框选中状态
|
||
未选中时无法编辑、无法拖动
|
||
避免误触、避免乱跑、避免重叠操作
|
||
6. 图片保存 / 导出（最重要）
|
||
电脑端：右键预览区域 → 自动合成并保存图片
|
||
手机端：长按预览区域 → 自动合成并保存图片
|
||
合成内容 = 背景图 + 所有输入框文字
|
||
输出一张完整的邀请函图片
|
||
***使用说明（最简流程）***
|
||
打开页面
|
||
上传背景图
|
||
双击输入框填写文字
|
||
单击输入框拖动到合适位置
|
||
电脑：右键保存图片
|
||
手机：长按保存图片
|
||
完成制作
|
||
|
||
## 要求记录
|
||
1. 打开项目即显示 3:5 空白面板，背景图自动覆盖容器、超出部分自动裁剪，不拉伸、不变形
|
||
2. 要求两个独立输入框，可双击编辑、可拖动，文字背景透明无边框，放置在右下角
|
||
3. 要求电脑端：右键预览区域可直接复制图片到剪贴板，移动端：长按预览区域可保存图片，操作简单，一键导出图片（复制 / 保存）
|
||
4. 预览的图片样式和保存的样式不一样，需要改成预览是什么样子，保存出来的图片内容就是什么样子
|
||
5. 要求鼠标右击或手机长按屏幕3：5预览区域时是保存图片的状态，点击其他区域不是保存状态
|
||
6. 要求图片和屏幕尺寸大小不一致时可在预览框中左右滑动图片调整位置，保持图片比例不变，点击空白处不选中任何输入框和图片状态，图片位置调整不影响文字编辑位置调整
|
||
7. 文本字体颜色为黑色，字体为 "微软雅黑"，字体大小为 16px，输入框放置在右下角
|
||
8. 打开项目时预览区域在屏幕居中显示，选择图片后图片在预览区居左显示，将底部请点击上方「添加图片」按钮上传背景图文字移到背景图预览白板提示中
|
||
9. 背景图选择后居左显示，图片原比例保存不变，可以左右滑动调节位置不能小于预览区宽度，预览区与图片合并到同一个图层中，不独立存在，以图片左右为边缘不溢出不拉伸，保持图片比例不变
|
||
10. 输入框与背景图完全隔离：输入框的文字编辑、拖动、内容溢出，仅改变输入框自身的位置/大小，不带动背景图偏移，不撑大预览容器，背景图的滑动调整，不影响输入框的位置、编辑状态，操作互不干扰
|
||
11. 添加图片尺寸不一致时可以左右滑动图片调整位置，并且图片反转拖拽
|
||
12. 电脑端右键保存/复制/预览图片，手机端长按屏幕弹窗保存/复制/预览图片，可预览
|
||
13. 顶部工具栏下方16px的位置，固定放置文本编辑器工具栏，加粗，斜体，字体颜色，字体，字号，可编辑文字样式
|
||
14. 字号逻辑调整，输入框字号只在自身原本字号上增减
|
||
15. 文本输入框添加辅助线，完善辅助线的吸附逻辑更加精准，辅助线颜色为红色
|
||
16. 顶部工具栏新增层叠图，可添加多张层叠图，单击选中状态可缩放删除自由移动位置，置于背景图之上，输入框与层叠图点击只能同时选中一个
|
||
17. 层叠图添加辅助线
|
||
18. 可添加多个文本框，以及文本框删除功能
|
||
19. 添加图片编辑器工具栏，图片编辑器与文本编辑器共用同一位置工具栏，选中对应元素切换对应编辑面板，点击空白处隐藏面板
|
||
20. 当选择文字的时候工具栏对应出现文字编辑器，当选择图片的时候工具栏对应出现图片编辑器，点击其他位置时隐藏工具栏，两个编辑栏的宽高保持和文本编辑器工具栏一致
|
||
21. 调整图文工具栏布局，解决顶部遮挡问题，图片透明度滑块添加百分比
|
||
22. 给背景图添加编辑器，与层叠图编辑器文本编辑器通用一个工具栏，背景图工具栏功能为：背景图可以放大缩小，可以调节透明度，其余功能不受影响，点击层叠图只显示当前编辑器工具栏
|
||
23. 校准画布编辑与图片导出文字垂直位置偏移问题，修改屏幕尺寸为960x1361像素
|
||
24. 添加新输入框，HTML文件里三个文本输入框改为随着添加背景图片后显示，三个输入框的位置分别为left：98px, top: 232.945px；left：98px, top: 275.555px；left：98px, top: 317.548px；
|
||
25. 适配网站子目录部署，项目路由静态资源路径改为 /tool/invitation-maker/
|
||
26. 严格按照输入框功能不变，在这个基础上将三个输入框原本的默认文本，改为占位符，提示语为"请输入"的要求改
|
||
27. 缩小背景图/层叠图/文本按钮宽度，优化手机端保存图片直接存入相册功能
|
||
28. 设置默认背景图，页面打开自动加载，保留原有功能，点击背景图按钮可更换
|
||
29. 将编辑器工具栏颜色，字体，字号间距缩小一些，美观大方
|
||
30. 缩小编辑器工具栏间距，适应小屏幕
|
||
31. 适配微信浏览器优化导出图片质量，优化画布尺寸计算逻辑以保持宽高比
|
||
32. 限制边界不强制吸附，优化移动端编辑交互逻辑，解决ios设备上键盘无法弹出的问题，优化统一桌面和移动端触摸编辑和键盘触发逻辑
|
||
33. 导出高清背景图文本的缩放计算逻辑，优化编辑栏固定与交互，改进字体加载和文本渲染逻辑，支持在选中元素上应用样式
|
||
34. 调整输入框位置，优化字体设置与选择器匹配逻辑，添加输入框字体加粗样式
|
||
35. 添加层叠图片旋转功能，为旋转滑动条添加0度，90度，-90度吸附功能，数值单独占位
|
||
36. 层叠图镜像功能，优化编辑器工具栏按钮样式间距，调整背景图缩放和透明度顺序
|
||
37. 项目添加撤销重做功能，检查修复撤销重做后背景图和文本位置显示异常问题，撤销重做按钮只需要点击一次就能执行操作
|
||
38. 优化撤销功能，优化顶部编辑栏按钮占位，优化撤销/重做按钮与文本按钮和保存/预览按钮的间距，文本按钮 ↔ [4px] ↔ 分隔线 ↔ 撤销按钮 ↔ [3px] ↔ 重做按钮 ↔ 分隔线 ↔ [4px] ↔ 保存按钮
|
||
39. 优化顶部工具栏样式，调整撤销重做按钮分隔栏边距，重构层叠图渲染到最终保存图片上的逻辑 |