🎉 初始提交:TinyLabel 图像文字编辑桌面工具
- 基于 Electron + React + TypeScript + Vite - Fabric.js 画布编辑引擎 - Ant Design UI 组件 + Zustand 状态管理 - 支持文字添加、拖拽、字体/颜色/特效编辑 - 支持 PNG / JPEG / WebP 导出
This commit is contained in:
@@ -0,0 +1,79 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user