# 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。