221 lines
5.1 KiB
Markdown
221 lines
5.1 KiB
Markdown
# 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。
|