45 lines
2.1 KiB
Markdown
45 lines
2.1 KiB
Markdown
***项目要求***
|
|
一款以手机端为主、电脑端兼容的简易邀请函在线制作工具，无需安装、无需后端，打开浏览器即可使用。用户可上传背景图、添加文字、拖动位置，最终一键生成并保存完整邀请函图片。
|
|
核心功能
|
|
1. 设备适配
|
|
移动端优先设计，手机操作最流畅
|
|
电脑端完全兼容，可正常制作、编辑、保存
|
|
背景图自动适应屏幕大小，不变形、不拉伸
|
|
2. 预览区域规范
|
|
预览区域固定 3:5 比例
|
|
容器居中显示，美观大方
|
|
背景图自适应铺满容器
|
|
3. 背景图上传
|
|
支持本地图片上传
|
|
支持 jpg /png/jpeg 格式
|
|
自动居中、自适应保留原有比例
|
|
4. 输入框功能
|
|
页面加载自动在右下角生成 2 个输入框，输入框为透明无边框设计
|
|
双击输入框 → 编辑文字
|
|
点击 / 长按输入框 → 可拖动位置
|
|
两个输入框完全独立，拖动互不影响
|
|
可随意拖拽到预览区域内任意位置
|
|
5. 操作交互优化
|
|
点击空白区域 → 自动取消输入框选中状态
|
|
未选中时无法编辑、无法拖动
|
|
避免误触、避免乱跑、避免重叠操作
|
|
6. 图片保存 / 导出（最重要）
|
|
电脑端：右键预览区域 → 自动合成并保存图片
|
|
手机端：长按预览区域 → 自动合成并保存图片
|
|
合成内容 = 背景图 + 所有输入框文字
|
|
输出一张完整的邀请函图片
|
|
***使用说明（最简流程）***
|
|
打开页面
|
|
上传背景图
|
|
双击输入框填写文字
|
|
单击输入框拖动到合适位置
|
|
电脑：右键保存图片
|
|
手机：长按保存图片
|
|
完成制作
|
|
|
|
## 要求记录
|
|
1. 我要求打开项目即显示 3:5 空白面板，背景图自动覆盖容器、超出部分自动裁剪，不拉伸、不变形
|
|
2. 我要求两个独立输入框，可双击编辑、可拖动，文字背景透明无边框
|
|
3. 我要求电脑端：右键预览区域可直接复制图片到剪贴板，移动端：长按预览区域可保存图片，操作简单，一键导出图片（复制 / 保存）
|
|
4. 预览的图片样式和保存的样式不一样，需要改成预览是什么样子，保存出来的图片内容就是什么样子
|