steven
08cfcb50b0
- 基于 Electron + React + TypeScript + Vite - Fabric.js 画布编辑引擎 - Ant Design UI 组件 + Zustand 状态管理 - 支持文字添加、拖拽、字体/颜色/特效编辑 - 支持 PNG / JPEG / WebP 导出
1.8 KiB
1.8 KiB
TinyLabel 🎨
TinyLabel 是一款轻量级的跨平台图像文字编辑桌面工具。你可以选择背景图片，在上面添加和编辑文字，最后导出为高质量图片。
功能特性
- ✅ 背景图管理 — 从文件夹加载或上传图片作为背景
- ✅ 文字编辑 — 添加文字，自由拖拽移动位置
- ✅ 字体属性 — 修改字体、字号、字重、颜色、对齐方式
- ✅ 文字特效 — 描边效果、阴影效果、透明度调节
- ✅ 图片导出 — 支持 PNG / JPEG / WebP 格式，可调节尺寸和质量
- ✅ 系统字体 — 自动加载系统已安装字体
- ✅ 跨平台 — 支持 Windows 和 macOS
快速开始
# 安装依赖
npm install
# 开发模式
npm run dev
# 构建 Windows 版本
npm run build:win
# 构建 macOS 版本
npm run build:mac
技术栈
| 技术 | 用途 |
|---|---|
| Electron | 跨平台桌面框架 |
| React + TypeScript | UI 界面 |
| Fabric.js | 画布编辑引擎 |
| Ant Design | UI 组件库 |
| Zustand | 状态管理 |
| Vite | 构建工具 |
| electron-builder | 打包分发 |
使用指南
- 启动程序后，点击左侧「选择文件夹」或「上传图片」加载背景图
- 点击背景图缩略图选中它
- 点击「添加文字」按钮在画布中添加文字
- 选中文字后，在右侧面板调整字体、大小、颜色、特效等属性
- 点击顶部的「导出」按钮，选择格式、质量、尺寸后导出图片
快捷键
| 快捷键 | 功能 |
|---|---|
Delete / Backspace |
删除选中文字 |
Escape |
取消选中 |
Ctrl/Cmd + E |
导出图片 |
构建说明
Windows
npm run build:win
生成 release/TinyLabel Setup x.x.x.exe
macOS
npm run build:mac
生成 release/TinyLabel-x.x.x.dmg
许可证
MIT