fix: 优化背景图滑动逻辑,确保居中显示、左右滑动完整,全内容可拖动到预览区

This commit is contained in:
Zhukj
2026-04-15 15:42:58 +08:00
parent e377aaf73c
commit c54050ff79
4 changed files with 313 additions and 93 deletions

View File

@@ -1,4 +1,4 @@
***项目要求***
*** 项目要求 ***
一款以手机端为主、电脑端兼容的简易邀请函在线制作工具,无需安装、无需后端,打开浏览器即可使用。用户可上传背景图、添加文字、拖动位置,最终一键生成并保存完整邀请函图片。
核心功能
1. 设备适配
@@ -7,12 +7,12 @@
背景图自动适应屏幕大小,不变形、不拉伸
2. 预览区域规范
预览区域固定 3:5 比例
容器居中显示,美观大方
容器在页面居中显示,美观大方
背景图自适应铺满容器
3. 背景图上传
支持本地图片上传
支持 jpg /png/jpeg 格式
自动居中、自适应保留原有比例
自动居左显示、自适应保留原有比例
4. 输入框功能
页面加载自动在右下角生成 2 个输入框,输入框为透明无边框设计
双击输入框 → 编辑文字
@@ -38,7 +38,19 @@
完成制作
## 要求记录
1. 我要求打开项目即显示 3:5 空白面板,背景图自动覆盖容器、超出部分自动裁剪,不拉伸、不变形
2. 我要求两个独立输入框,可双击编辑、可拖动,文字背景透明无边框
3. 我要求电脑端:右键预览区域可直接复制图片到剪贴板,移动端:长按预览区域可保存图片,操作简单,一键导出图片(复制 / 保存)
1. 打开项目即显示 3:5 空白面板,背景图自动覆盖容器、超出部分自动裁剪,不拉伸、不变形
2. 要求两个独立输入框,可双击编辑、可拖动,文字背景透明无边框,放置在右下角
3. 要求电脑端:右键预览区域可直接复制图片到剪贴板,移动端:长按预览区域可保存图片,操作简单,一键导出图片(复制 / 保存)
4. 预览的图片样式和保存的样式不一样,需要改成预览是什么样子,保存出来的图片内容就是什么样子
5. 要求鼠标右击或手机长按屏幕3:5预览区域时是保存图片的状态,点击其他区域不是保存状态
6. 要求图片和屏幕尺寸大小不一致时可在预览框中左右滑动图片调整位置,保持图片比例不变,点击空白处不选中任何输入框和图片状态,图片位置调整不影响文字编辑位置调整
7. 文本字体颜色为黑色,字体为 "微软雅黑",字体大小为 16px,输入框放置在右下角
8. 打开项目时预览区域在屏幕居中显示,选择图片后图片在预览区居左显示,将底部请点击上方「添加图片」按钮上传背景图文字移到背景图预览白板提示中
9. 背景图选择后居左显示,图片原比例保存不变,可以左右滑动调节位置不能小于预览区宽度,预览区与图片合并到同一个图层中,不独立存在,以图片左右为边缘不溢出不拉伸,保持图片比例不变
10. 输入框与背景图完全隔离:输入框的文字编辑、拖动、内容溢出,仅改变输入框自身的位置/大小,不带动背景图偏移,不撑大预览容器,背景图的滑动调整,不影响输入框的位置、编辑状态,操作互不干扰
## 需要注意的点
1. 图片要必须能左右滑动调整位置,保持图片比例不变,图片任何内容都可以被拖动到预览区域内任意位置