diff --git a/README.md b/README.md new file mode 100644 index 0000000..a469b96 --- /dev/null +++ b/README.md @@ -0,0 +1,220 @@ +# RefVroid + +一个用于动画参考的桌面应用,支持图片、GIF、视频和文本的管理和查看。 + +## 功能特点 + +### 📸 媒体支持 +- **图片**:支持 PNG、JPG、GIF、BMP、WebP 等格式 +- **GIF 动画**:完整支持 GIF 动画播放和复制(保持动画) +- **视频**:支持 MP4 视频播放和循环 +- **YouTube**:支持嵌入 YouTube 视频 +- **文本**:支持添加文本元素 + +### 🎨 画布操作 +- **缩放**:鼠标滚轮、Ctrl+空格+拖动 +- **平移**:空格+拖动、鼠标中键拖动 +- **多选**:左键框选多个元素 +- **调整大小**:拖动元素边缘 +- **层级管理**:自动管理元素层级 + +### ⌨️ 快捷键 + +#### 文件操作 +- `Ctrl+C` - 复制选中元素 +- `Ctrl+V` - 粘贴图片/文本 +- `Ctrl+Z` - 撤销 +- `Ctrl+Y` / `Ctrl+Shift+Z` - 重做 +- `Ctrl+L` - 加载场景 +- `Ctrl+S` - 保存场景 +- `Ctrl+N` - 新建场景 +- `Ctrl+W` - 关闭窗口 + +#### 窗口操作 +- `Ctrl+F` - 最大化/恢复窗口 +- `Ctrl+M` - 最小化窗口 +- `Ctrl+H` - 显示/隐藏帮助 + +#### 视图操作 +- `空格+拖动` - 平移画布 +- `Ctrl+空格+拖动` - 缩放画布 +- `鼠标滚轮` - 缩放画布 +- `中键拖动` - 平移画布 + +#### 元素操作 +- `左键拖动` - 移动元素 +- `左键框选` - 选择多个元素 +- `拖动边缘` - 调整大小 +- `Delete` - 删除选中元素 +- `Esc` - 取消选择框 + +#### 其他 +- `右键` - 显示菜单 +- `Ctrl+Shift+I` - 打开开发者工具 + +## 安装 + +### 前置要求 +- Node.js 14 或更高版本 +- npm 或 yarn + +### 安装步骤 + +1. 克隆仓库 +```bash +git clone +cd RefVroid +``` + +2. 安装依赖 +```bash +npm install +``` + +3. 运行应用 +```bash +npm start +``` + +### 调试模式 +```bash +npm start debug +``` + +## 使用方法 + +### 添加媒体 +1. **拖放文件**:直接将图片、GIF 或视频文件拖入窗口 +2. **粘贴**: + - 从剪贴板粘贴图片(Ctrl+V) + - 粘贴 YouTube 链接 + - 粘贴文本内容 + +### 管理元素 +- **移动**:左键拖动元素 +- **调整大小**:选中元素后拖动边缘 +- **多选**:按住左键框选多个元素 +- **删除**:选中后按 Delete 键 +- **复制**:选中后按 Ctrl+C,然后 Ctrl+V 粘贴 + +### 保存和加载 +- **保存场景**:Ctrl+S,保存为 `.purgif` 文件 +- **加载场景**:Ctrl+L,选择 `.purgif` 文件 +- **自动加载**:应用会自动加载最近使用的场景 + +### 窗口管理 +- **置顶**:右键菜单 → 总是置顶 +- **透明度**:右键菜单 → 透明度 → 选择透明度 +- **锁定窗口**:右键菜单 → 锁定窗口(防止误操作) +- **解锁**:通过系统托盘图标解锁 + +## 特殊功能 + +### GIF 动画支持 +- 拖放 GIF 文件会自动保存为 base64 格式,保持动画 +- 复制 GIF 时会保持动画(粘贴到 QQ、微信等应用) +- 支持从剪贴板粘贴 GIF 并保持动画 + +### 撤销/重做 +- 支持撤销和重做以下操作: + - 添加元素 + - 删除元素 + - 移动元素 + - 调整大小 +- 历史记录最多保存 50 个状态 + +### 多选复制 +- 选中多个元素后复制,会将所有图片保存为临时文件 +- GIF 文件会保持动画格式 +- 可以一次性粘贴多张图片到其他应用 + +## 技术栈 + +- **Electron** - 桌面应用框架 +- **Node.js** - 后端运行时 +- **Interact.js** - 拖拽和调整大小 +- **noUiSlider** - 视频循环控制(不推荐使用) +- **YouTube IFrame API** - YouTube 视频嵌入(不推荐使用) + +## 文件格式 + +### 场景文件 (.purgif) +场景文件是 JSON 格式,包含: +- 所有元素的位置、大小和内容 +- 画布的缩放和平移状态 +- 视频的循环点设置 + +示例结构: +```json +{ + "currentScale": 1, + "translate": { + "translateX": 0, + "translateY": 0 + }, + "elements": [ + { + "path": "data:image/gif;base64,...", + "type": "dataURL", + "x": 100, + "y": 100, + "width": 200, + "height": 200 + } + ] +} +``` + +## 已知问题 + +### 飞书粘贴显示路径 +- 粘贴多张图片到飞书时,可能会显示文件路径而不是图片 +- 这是因为飞书对剪贴板的处理方式不同 +- 解决方案:直接拖放图片到飞书,而不是复制粘贴 + +### GIF 动画兼容性 +- 某些应用可能不支持从剪贴板粘贴 GIF 动画 +- 如果粘贴后 GIF 不动,尝试将 GIF 保存为文件后再拖入目标应用 + +## 开发 + +### 项目结构 +``` +RefVroid/ +├── main.js # 主进程 +├── preload.js # 预加载脚本 +├── renderer.js # 渲染进程 +├── index.html # 主窗口 +├── help.html # 帮助窗口 +├── index.css # 样式 +└── package.json # 项目配置 +``` + +### 构建 +```bash +npm run build +``` + +## 许可证 + +查看 LICENSE 文件了解详情。 + +## 贡献 + +欢迎提交 Issue 和 Pull Request! + +## 更新日志 + +### 最新版本 +- ✅ 支持 GIF 动画保持(拖放和复制) +- ✅ 支持撤销/重做功能(Ctrl+Z / Ctrl+Y) +- ✅ 支持多选删除 +- ✅ 支持框选多个元素 +- ✅ 改进 GIF 复制兼容性 +- ✅ 添加系统托盘图标 +- ✅ 添加窗口锁定功能 +- ✅ 自动清理临时文件 + +## 支持 + +如有问题或建议,请提交 Issue。