docs: 添加项目README文件，包含功能说明和使用指南
This commit is contained in:
220
README.md
Normal file
220
README.md
Normal file
@@ -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 <repository-url>
|
||||||
|
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。
|
||||||
Reference in New Issue
Block a user