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