pureref/pureRef
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
pureRef/README.md

5.1 KiB
Raw Permalink Blame History

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. 克隆仓库
git clone <repository-url>
cd RefVroid
  1. 安装依赖
npm install
  1. 运行应用
npm start

调试模式

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 格式，包含：

  • 所有元素的位置、大小和内容
  • 画布的缩放和平移状态
  • 视频的循环点设置

示例结构：

{
  "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      # 项目配置

构建

npm run build

许可证

查看 LICENSE 文件了解详情。

贡献

欢迎提交 Issue 和 Pull Request！

更新日志

最新版本

  • ✅ 支持 GIF 动画保持（拖放和复制）
  • ✅ 支持撤销/重做功能（Ctrl+Z / Ctrl+Y）
  • ✅ 支持多选删除
  • ✅ 支持框选多个元素
  • ✅ 改进 GIF 复制兼容性
  • ✅ 添加系统托盘图标
  • ✅ 添加窗口锁定功能
  • ✅ 自动清理临时文件

支持

如有问题或建议，请提交 Issue。