Add README and design spec for poker card design system
This commit is contained in:
Poker Design Developer
160
README.md
Normal file
160
README.md
Normal file
@@ -0,0 +1,160 @@
|
||||
# 扑克牌设计管理系统
|
||||
|
||||
一个基于 Django + Vue.js 的扑克牌设计管理系统，支持个人从零开始设计完整的54张扑克牌系列。
|
||||
|
||||
## 功能特性
|
||||
|
||||
- **模板系列库** - 提供经典、现代、卡通、复古等预设模板，快速开始设计
|
||||
- **素材管理** - 上传自定义花色图案、JQK人像、大小王、背面图案等
|
||||
- **实时预览** - 基于 Fabric.js 的可视化编辑器，实时预览54张牌面
|
||||
- **自动对称化** - JQK人像上传后自动生成中心对称版本
|
||||
- **多图层支持** - 支持背景、边框、人像、装饰等多层次图像叠加
|
||||
- **批量导出** - 一键导出整套扑克牌为PNG格式，支持多种分辨率
|
||||
|
||||
## 技术栈
|
||||
|
||||
### 后端
|
||||
- Django 5.x
|
||||
- Django REST Framework
|
||||
- SQLite
|
||||
- Pillow (图像处理)
|
||||
|
||||
### 前端
|
||||
- Vue.js 3.x
|
||||
- Fabric.js 6.x (Canvas图形库)
|
||||
- Pinia (状态管理)
|
||||
- Element Plus (UI组件库)
|
||||
- Vite (构建工具)
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
poker-design-system/
|
||||
├── backend/ # Django后端
|
||||
│ ├── poker_api/ # Django项目配置
|
||||
│ ├── apps/
|
||||
│ │ ├── projects/ # 项目管理
|
||||
│ │ ├── templates/ # 模板管理
|
||||
│ │ └── exports/ # 导出服务
|
||||
│ ├── media/ # 上传的素材文件
|
||||
│ ├── db.sqlite3 # SQLite数据库
|
||||
│ └── requirements.txt
|
||||
│
|
||||
├── frontend/ # Vue前端
|
||||
│ ├── src/
|
||||
│ │ ├── components/ # Vue组件
|
||||
│ │ ├── views/ # 页面视图
|
||||
│ │ ├── stores/ # Pinia状态管理
|
||||
│ │ ├── api/ # Django API调用
|
||||
│ │ └── utils/ # 工具函数
|
||||
│ ├── public/
|
||||
│ └── package.json
|
||||
│
|
||||
└── docs/
|
||||
└── specs/ # 设计规格文档
|
||||
```
|
||||
|
||||
## 快速开始
|
||||
|
||||
### 后端启动
|
||||
|
||||
```bash
|
||||
cd backend
|
||||
pip install -r requirements.txt
|
||||
python manage.py migrate
|
||||
python manage.py runserver
|
||||
```
|
||||
|
||||
后端服务将运行在 http://localhost:8000
|
||||
|
||||
### 前端启动
|
||||
|
||||
```bash
|
||||
cd frontend
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
前端服务将运行在 http://localhost:5173
|
||||
|
||||
## 扑克牌结构
|
||||
|
||||
系统支持完整的54张标准扑克牌：
|
||||
|
||||
| 类型 | 数量 | 说明 |
|
||||
|------|------|------|
|
||||
| 数字牌 | 40张 | 4花色 × 10张（A, 2-10） |
|
||||
| 花牌 JQK | 12张 | 4花色 × 3张（J, Q, K） |
|
||||
| 大小王 | 2张 | 大王、小王 |
|
||||
|
||||
**花色分类：**
|
||||
- ♠ 黑桃 (Spade) - 黑色
|
||||
- ♥ 红桃 (Heart) - 红色
|
||||
- ♣ 梅花 (Club) - 黑色
|
||||
- ♦ 方块 (Diamond) - 红色
|
||||
|
||||
## 核心功能
|
||||
|
||||
### 1. 模板系列库
|
||||
|
||||
系统提供多种预设模板：
|
||||
- **经典风格** - 标准扑克牌设计，传统花色和字体
|
||||
- **现代简约** - 扁平化设计，简洁线条
|
||||
- **卡通风格** - Q版可爱人像，圆润花色图案
|
||||
- **复古风格** - 复古色调和纹理
|
||||
|
||||
### 2. 素材上传
|
||||
|
||||
支持上传的素材类型：
|
||||
- 花色图案 (PNG/SVG)
|
||||
- JQK人像 (PNG/JPG)
|
||||
- 大小王图案 (PNG/JPG)
|
||||
- 背面图案 (PNG/JPG)
|
||||
- 边框装饰 (SVG)
|
||||
- 数字字体 (TTF/OTF)
|
||||
|
||||
### 3. 设计编辑器
|
||||
|
||||
- 实时预览和编辑
|
||||
- 多图层管理
|
||||
- 缩放和平移
|
||||
- 中心对称生成（JQK）
|
||||
- 批量应用样式
|
||||
|
||||
### 4. 导出功能
|
||||
|
||||
- 单张导出 PNG
|
||||
- 批量导出整副牌（ZIP压缩包）
|
||||
- 多种分辨率选择：
|
||||
- 标准 (750×1050px)
|
||||
- 高清 (1500×2100px)
|
||||
- 超高清 (3000×4200px)
|
||||
|
||||
## API 文档
|
||||
|
||||
### 项目管理
|
||||
|
||||
- `GET /api/projects/` - 获取所有项目
|
||||
- `POST /api/projects/` - 创建新项目
|
||||
- `GET /api/projects/{id}/` - 获取项目详情
|
||||
- `PUT /api/projects/{id}/` - 更新项目
|
||||
- `DELETE /api/projects/{id}/` - 删除项目
|
||||
|
||||
### 素材管理
|
||||
|
||||
- `GET /api/projects/{id}/assets/` - 获取项目素材
|
||||
- `POST /api/projects/{id}/assets/` - 上传素材
|
||||
- `DELETE /api/projects/{id}/assets/{asset_id}/` - 删除素材
|
||||
|
||||
### 导出服务
|
||||
|
||||
- `POST /api/projects/{id}/export/` - 批量导出
|
||||
- `GET /api/projects/{id}/export/{card_key}/` - 导出单张牌
|
||||
|
||||
## 开发计划
|
||||
|
||||
详细的设计规格文档请查看：`docs/superpowers/specs/2026-05-31-poker-card-design-system.md`
|
||||
|
||||
## 许可证
|
||||
|
||||
MIT License
|
||||
874
docs/superpowers/specs/2026-05-31-poker-card-design-system.md
Normal file
874
docs/superpowers/specs/2026-05-31-poker-card-design-system.md
Normal file
@@ -0,0 +1,874 @@
|
||||
# 扑克牌设计管理系统 - 设计规格文档
|
||||
|
||||
**日期：** 2026-05-31
|
||||
**项目类型：** Web应用 - 个人扑克牌设计工具
|
||||
**目标用户：** 个人用户从零开始设计扑克牌系列
|
||||
|
||||
---
|
||||
|
||||
## 1. 项目概述
|
||||
|
||||
### 1.1 核心目标
|
||||
|
||||
构建一个基于Web的扑克牌设计管理系统，支持：
|
||||
- 基于模板快速创建扑克牌系列
|
||||
- 上传自定义素材（花色、人像、边框等）
|
||||
- 实时预览和编辑54张扑克牌
|
||||
- 批量导出PNG格式图片
|
||||
|
||||
### 1.2 设计原则
|
||||
|
||||
- **混合模式：** 系统提供基础模板，用户可选择性替换任意元素
|
||||
- **自动对称化：** JQK人像上传后自动生成中心对称版本
|
||||
- **预设布局：** 数字牌花色图案按标准模板排列，用户无需逐张设计
|
||||
- **多图层支持：** JQK花牌支持多层次图像叠加（背景、边框、人像、装饰等）
|
||||
|
||||
### 1.3 扑克牌结构
|
||||
|
||||
**总计：54张牌**
|
||||
|
||||
| 类型 | 数量 | 说明 |
|
||||
|------|------|------|
|
||||
| 数字牌 | 40张 | 4花色 × 10张（A, 2-10） |
|
||||
| 花牌 JQK | 12张 | 4花色 × 3张（J, Q, K） |
|
||||
| 大小王 | 2张 | 大王、小王 |
|
||||
|
||||
**花色分类：**
|
||||
- 黑桃- 黑色
|
||||
- 红桃- 红色
|
||||
- 梅花- 黑色
|
||||
- 方块- 红色
|
||||
|
||||
---
|
||||
|
||||
## 2. 技术架构
|
||||
|
||||
### 2.1 技术栈
|
||||
|
||||
| 技术 | 版本 | 用途 |
|
||||
|------|------|------|
|
||||
| Vue.js | 3.x | 前端框架，响应式UI |
|
||||
| Fabric.js | 6.x | Canvas图形库，图层管理 |
|
||||
| Pinia | 2.x | 状态管理 |
|
||||
| Element Plus | 2.x | UI组件库 |
|
||||
| Vite | 5.x | 构建工具 |
|
||||
| TypeScript | 5.x | 类型安全 |
|
||||
|
||||
### 2.2 架构特点
|
||||
|
||||
- **纯前端应用：** 无需后端服务器，所有处理在浏览器完成
|
||||
- **本地存储：** 使用 IndexedDB 存储项目配置和素材
|
||||
- **Canvas渲染：** Fabric.js 提供高性能图形渲染和图层操作
|
||||
- **模块化设计：** 组件独立，易于维护和扩展
|
||||
|
||||
### 2.3 目录结构
|
||||
|
||||
```
|
||||
poker-design-system/
|
||||
├── public/
|
||||
│ └── templates/ # 预设模板素材
|
||||
│ ├── classic/
|
||||
│ ├── modern/
|
||||
│ ├── cartoon/
|
||||
│ └── vintage/
|
||||
├── src/
|
||||
│ ├── assets/ # 静态资源
|
||||
│ ├── components/ # Vue组件
|
||||
│ │ ├── Editor/ # 编辑器组件
|
||||
│ │ ├── Assets/ # 素材管理组件
|
||||
│ │ ├── Preview/ # 预览组件
|
||||
│ │ └── Export/ # 导出组件
|
||||
│ ├── composables/ # Vue组合式函数
|
||||
│ │ ├── useCanvas.js # Fabric.js封装
|
||||
│ │ ├── useAssets.js # 素材管理
|
||||
│ │ └── useExport.js # 导出功能
|
||||
│ ├── stores/ # Pinia状态管理
|
||||
│ │ ├── projectStore.js # 项目状态
|
||||
│ │ ├── assetStore.js # 素材状态
|
||||
│ │ └── editorStore.js # 编辑器状态
|
||||
│ ├── utils/ # 工具函数
|
||||
│ │ ├── cardLayout.js # 牌面布局计算
|
||||
│ │ ├── symmetry.js # 中心对称处理
|
||||
│ │ └── export.js # 导出工具
|
||||
│ ├── templates/ # 模板配置
|
||||
│ │ ├── classic.js
|
||||
│ │ ├── modern.js
|
||||
│ │ └── ...
|
||||
│ ├── App.vue
|
||||
│ └── main.js
|
||||
├── package.json
|
||||
└── vite.config.js
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. 功能模块设计
|
||||
|
||||
### 3.1 模板系列库
|
||||
|
||||
#### 3.1.1 预设模板
|
||||
|
||||
**经典风格**
|
||||
- 标准扑克牌设计
|
||||
- 传统花色图案（实心黑桃、红桃等）
|
||||
- 经典衬线字体
|
||||
- 简洁边框
|
||||
|
||||
**现代简约**
|
||||
- 扁平化设计
|
||||
- 简洁线条花色
|
||||
- 无衬线字体
|
||||
- 无边框或细边框
|
||||
|
||||
**卡通风格**
|
||||
- Q版可爱人像
|
||||
- 圆润花色图案
|
||||
- 活泼字体
|
||||
- 彩色边框
|
||||
|
||||
**复古风格**
|
||||
- 复古色调（米黄、深红等）
|
||||
- 复杂花纹边框
|
||||
- 装饰性字体
|
||||
- 纹理背景
|
||||
|
||||
#### 3.1.2 模板数据结构
|
||||
|
||||
```typescript
|
||||
interface Template {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
preview: string; // 预览图URL
|
||||
defaultAssets: {
|
||||
suitSymbols: {
|
||||
spade: string;
|
||||
heart: string;
|
||||
club: string;
|
||||
diamond: string;
|
||||
};
|
||||
numberFont: FontConfig;
|
||||
faceCardBorder: string; // JQK边框SVG
|
||||
backPattern: string; // 背面图案
|
||||
};
|
||||
colorScheme: {
|
||||
spade: string; // 黑桃颜色
|
||||
heart: string; // 红桃颜色
|
||||
club: string; // 梅花颜色
|
||||
diamond: string; // 方块颜色
|
||||
background: string; // 牌面背景色
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
### 3.2 素材管理模块
|
||||
|
||||
#### 3.2.1 可上传素材类型
|
||||
|
||||
| 素材类型 | 文件格式 | 数量 | 必需 | 说明 |
|
||||
|---------|---------|------|------|------|
|
||||
| 花色图案 | PNG/SVG | 4个 | 否 | 黑桃、红桃、梅花、方块 |
|
||||
| 数字字体 | TTF/OTF | 1套 | 否 | A, 2-10的数字样式 |
|
||||
| JQK人像 | PNG/JPG | 12张 | 否 | 每种花色的J/Q/K |
|
||||
| 大小王 | PNG/JPG | 2张 | 否 | 大王、小王独立图案 |
|
||||
| 背面图案 | PNG/JPG | 1张 | 否 | 扑克牌背面设计 |
|
||||
| 边框装饰 | SVG | 可选 | 否 | 牌面边框样式 |
|
||||
|
||||
#### 3.2.2 素材存储
|
||||
|
||||
- **IndexedDB：** 存储上传的图片文件（Base64或Blob）
|
||||
- **项目配置：** 存储素材引用路径和配置参数
|
||||
- **混合模式：** 未上传的素材自动使用模板默认值
|
||||
|
||||
#### 3.2.3 素材管理界面
|
||||
|
||||
```
|
||||
┌────────────────────────────────────┐
|
||||
│ 素材库 │
|
||||
├────────────────────────────────────┤
|
||||
│ 花色图案 │
|
||||
│ ┌────┬────┬────┬────┐ │
|
||||
│ │ ♠ │ ♥ │ ♣ │ ♦ │ │
|
||||
│ │上传│上传│上传│上传│ │
|
||||
│ └────┴────┴────┴────┘ │
|
||||
│ │
|
||||
│ JQK人像 │
|
||||
│ ┌─────────────────────────┐ │
|
||||
│ │ 黑桃: J[上传] Q[上传] K[上传]│ │
|
||||
│ │ 红桃: J[上传] Q[上传] K[上传]│ │
|
||||
│ │ 梅花: J[上传] Q[上传] K[上传]│ │
|
||||
│ │ 方块: J[上传] Q[上传] K[上传]│ │
|
||||
│ └─────────────────────────┘ │
|
||||
│ │
|
||||
│ 大小王 │
|
||||
│ ┌────┬────┐ │
|
||||
│ │大王│小王│ │
|
||||
│ │上传│上传│ │
|
||||
│ └────┴────┘ │
|
||||
│ │
|
||||
│ 其他素材 │
|
||||
│ 背面图案: [上传] │
|
||||
│ 边框装饰: [上传] │
|
||||
│ 数字字体: [上传] │
|
||||
└────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 3.3 设计编辑器
|
||||
|
||||
#### 3.3.1 界面布局
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────────────────────┐
|
||||
│ 工具栏：[模板选择] [保存] [导出] [设置] │
|
||||
├──────────────┬─────────────────────────────────────────┤
|
||||
│ │ │
|
||||
│ 左侧面板 │ 中间画布区域 │
|
||||
│ │ │
|
||||
│ [素材库] │ ┌─────────────────────┐ │
|
||||
│ [图层管理] │ │ │ │
|
||||
│ [样式调整] │ │ 实时预览 │ │
|
||||
│ │ │ 当前选中牌面 │ │
|
||||
│ ┌────────┐ │ │ │ │
|
||||
│ │图层列表│ │ │ 支持缩放/平移 │ │
|
||||
│ │├ 背景 │ │ │ │ │
|
||||
│ │├ 边框 │ │ └─────────────────────┘ │
|
||||
│ │├ 人像 │ │ │
|
||||
│ │├ 装饰 │ │ │
|
||||
│ │└ 文字 │ │ │
|
||||
│ └────────┘ │ │
|
||||
│ │ │
|
||||
├──────────────┴─────────────────────────────────────────┤
|
||||
│ 底部牌列表： │
|
||||
│ [♠A][♠2]...[♠K][♥A]...[♥K][♣A]...[♣K][♦A]...[♦K][大][小]│
|
||||
│ 点击切换编辑 │
|
||||
└────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### 3.3.2 Fabric.js 图层结构
|
||||
|
||||
**数字牌图层（A, 2-10）：**
|
||||
```
|
||||
图层栈（从下到上）：
|
||||
├─ 背景层（牌面底色）
|
||||
├─ 边框层（可选装饰边框）
|
||||
├─ 花色图案层（中间排列的花色图案）
|
||||
├─ 角标数字层（左上、右下）
|
||||
└─ 角标花色层（左上、右下）
|
||||
```
|
||||
|
||||
**花牌图层（JQK）：**
|
||||
```
|
||||
图层栈（从下到上）：
|
||||
├─ 背景层（牌面底色）
|
||||
├─ 边框层（装饰边框）
|
||||
├─ 背景装饰层（花纹、纹理）
|
||||
├─ 主体图案层（上传的人像，自动中心对称）
|
||||
│ ├─ 上半部分人像（原始）
|
||||
│ └─ 下半部分人像（翻转180°）
|
||||
├─ 花色装饰层（角标、装饰元素）
|
||||
├─ 字母层（J/Q/K标识，四角）
|
||||
└─ 花色符号层（四角的花色图案）
|
||||
```
|
||||
|
||||
**大小王图层：**
|
||||
```
|
||||
图层栈（从下到上）：
|
||||
├─ 背景层
|
||||
├─ 边框层
|
||||
├─ 主体图案层（上传的图片）
|
||||
└─ 文字标识层（"JOKER"等）
|
||||
```
|
||||
|
||||
#### 3.3.3 核心功能
|
||||
|
||||
**实时预览**
|
||||
- 修改素材立即更新画布
|
||||
- 支持缩放（50% - 200%）
|
||||
- 支持平移查看
|
||||
|
||||
**图层管理**
|
||||
- 调整图层顺序
|
||||
- 控制图层可见性
|
||||
- 设置图层透明度
|
||||
- 锁定图层
|
||||
|
||||
**中心对称生成**
|
||||
- 用户上传单张JQK人像
|
||||
- 系统自动分割为上下两部分
|
||||
- 下半部分垂直翻转
|
||||
- 拼接生成中心对称图案
|
||||
|
||||
**批量应用**
|
||||
- 应用花色图案到所有相关牌面
|
||||
- 应用边框到整副牌
|
||||
- 应用字体样式到所有文字
|
||||
|
||||
### 3.4 数字牌布局模板
|
||||
|
||||
#### 3.4.1 标准布局规则
|
||||
|
||||
**牌面坐标系：**
|
||||
- 牌面尺寸：750×1050px（标准）
|
||||
- 安全区域：距边缘50px
|
||||
- 有效区域：650×950px
|
||||
|
||||
**花色图案尺寸：**
|
||||
- 单个图案：60×60px（可调整）
|
||||
- 间距：根据点数自动计算
|
||||
|
||||
#### 3.4.2 各点数布局
|
||||
|
||||
**A（1个花色）：**
|
||||
```
|
||||
┌─────────────┐
|
||||
│ │
|
||||
│ │
|
||||
│ ● │ 居中
|
||||
│ │
|
||||
│ │
|
||||
└─────────────┘
|
||||
```
|
||||
|
||||
**2（2个花色）：**
|
||||
```
|
||||
┌─────────────┐
|
||||
│ ● │ 上部居中
|
||||
│ │
|
||||
│ │
|
||||
│ │
|
||||
│ ● │ 下部居中
|
||||
└─────────────┘
|
||||
```
|
||||
|
||||
**3（3个花色）：**
|
||||
```
|
||||
┌─────────────┐
|
||||
│ ● │ 上部居中
|
||||
│ │
|
||||
│ ● │ 中部居中
|
||||
│ │
|
||||
│ ● │ 下部居中
|
||||
└─────────────┘
|
||||
```
|
||||
|
||||
**4（4个花色）：**
|
||||
```
|
||||
┌─────────────┐
|
||||
│ ● ● │ 上部左右
|
||||
│ │
|
||||
│ │
|
||||
│ │
|
||||
│ ● ● │ 下部左右
|
||||
└─────────────┘
|
||||
```
|
||||
|
||||
**5（5个花色）：**
|
||||
```
|
||||
┌─────────────┐
|
||||
│ ● ● │ 上部左右
|
||||
│ │
|
||||
│ ● │ 中部居中
|
||||
│ │
|
||||
│ ● ● │ 下部左右
|
||||
└─────────────┘
|
||||
```
|
||||
|
||||
**6（6个花色）：**
|
||||
```
|
||||
┌─────────────┐
|
||||
│ ● ● │ 上部左右
|
||||
│ │
|
||||
│ ● ● │ 中部左右
|
||||
│ │
|
||||
│ ● ● │ 下部左右
|
||||
└─────────────┘
|
||||
```
|
||||
|
||||
**7（7个花色）：**
|
||||
```
|
||||
┌─────────────┐
|
||||
│ ● ● │ 上部左右
|
||||
│ ● │ 上中居中
|
||||
│ ● ● │ 中部左右
|
||||
│ │
|
||||
│ ● ● │ 下部左右
|
||||
└─────────────┘
|
||||
```
|
||||
|
||||
**8（8个花色）：**
|
||||
```
|
||||
┌─────────────┐
|
||||
│ ● ● │ 上部左右
|
||||
│ ● │ 上中居中
|
||||
│ ● ● │ 中部左右
|
||||
│ ● │ 下中居中
|
||||
│ ● ● │ 下部左右
|
||||
└─────────────┘
|
||||
```
|
||||
|
||||
**9（9个花色）：**
|
||||
```
|
||||
┌─────────────┐
|
||||
│ ● ● │ 上部左右
|
||||
│ ● │ 上中居中
|
||||
│ ● ● ● │ 中部三列
|
||||
│ ● │ 下中居中
|
||||
│ ● ● │ 下部左右
|
||||
└─────────────┘
|
||||
```
|
||||
|
||||
**10（10个花色）：**
|
||||
```
|
||||
┌─────────────┐
|
||||
│ ● ● │ 上部左右
|
||||
│ ● ● │ 上中左右
|
||||
│ ● │ 中部居中
|
||||
│ ● ● │ 下中左右
|
||||
│ ● ● │ 下部左右
|
||||
└─────────────┘
|
||||
```
|
||||
|
||||
### 3.5 导出功能
|
||||
|
||||
#### 3.5.1 导出选项
|
||||
|
||||
**导出范围：**
|
||||
- 单张导出：当前选中的牌
|
||||
- 批量导出：整副54张牌
|
||||
- 分类导出：仅数字牌 / 仅花牌 / 仅大小王
|
||||
|
||||
**分辨率选项：**
|
||||
| 分辨率 | 尺寸 | 用途 |
|
||||
|--------|------|------|
|
||||
| 标准 | 750×1050px | 打印质量 |
|
||||
| 高清 | 1500×2100px | 2倍分辨率 |
|
||||
| 超高清 | 3000×4200px | 4倍分辨率 |
|
||||
|
||||
**文件格式：**
|
||||
- PNG（带透明通道）
|
||||
- 文件命名规则：
|
||||
- 数字牌：`{suit}-{number}.png`（如：spade-A.png, heart-7.png）
|
||||
- 花牌：`{suit}-{face}.png`（如：club-J.png, diamond-Q.png）
|
||||
- 大小王：`joker-big.png`, `joker-small.png`
|
||||
- 背面：`back.png`
|
||||
|
||||
#### 3.5.2 导出流程
|
||||
|
||||
```
|
||||
用户点击导出
|
||||
↓
|
||||
选择导出范围和分辨率
|
||||
↓
|
||||
系统遍历所有需要导出的牌
|
||||
↓
|
||||
对每张牌：
|
||||
- 创建临时Canvas
|
||||
- 按图层顺序渲染
|
||||
- 应用分辨率缩放
|
||||
- 导出为PNG Blob
|
||||
↓
|
||||
打包为ZIP文件（批量导出时）
|
||||
↓
|
||||
触发浏览器下载
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. 数据结构设计
|
||||
|
||||
### 4.1 项目配置
|
||||
|
||||
```typescript
|
||||
interface Project {
|
||||
id: string;
|
||||
name: string;
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
template: string; // 模板ID
|
||||
cardSize: {
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
assets: AssetCollection;
|
||||
exportSettings: ExportSettings;
|
||||
}
|
||||
```
|
||||
|
||||
### 4.2 素材集合
|
||||
|
||||
```typescript
|
||||
interface AssetCollection {
|
||||
suitSymbols: {
|
||||
spade?: Asset;
|
||||
heart?: Asset;
|
||||
club?: Asset;
|
||||
diamond?: Asset;
|
||||
};
|
||||
faceCards: {
|
||||
spade: { J?: Asset; Q?: Asset; K?: Asset };
|
||||
heart: { J?: Asset; Q?: Asset; K?: Asset };
|
||||
club: { J?: Asset; Q?: Asset; K?: Asset };
|
||||
diamond: { J?: Asset; Q?: Asset; K?: Asset };
|
||||
};
|
||||
jokers: {
|
||||
big?: Asset;
|
||||
small?: Asset;
|
||||
};
|
||||
backPattern?: Asset;
|
||||
border?: Asset;
|
||||
numberFont?: FontAsset;
|
||||
}
|
||||
|
||||
interface Asset {
|
||||
id: string;
|
||||
type: 'image' | 'font' | 'svg';
|
||||
name: string;
|
||||
data: string; // Base64或Blob URL
|
||||
width?: number;
|
||||
height?: number;
|
||||
uploadedAt: Date;
|
||||
}
|
||||
```
|
||||
|
||||
### 4.3 图层配置
|
||||
|
||||
```typescript
|
||||
interface Layer {
|
||||
id: string;
|
||||
name: string;
|
||||
type: 'background' | 'border' | 'pattern' | 'image' | 'text' | 'symbol';
|
||||
visible: boolean;
|
||||
locked: boolean;
|
||||
opacity: number; // 0-1
|
||||
zIndex: number;
|
||||
properties: {
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
rotation?: number; // 旋转角度
|
||||
scaleX?: number;
|
||||
scaleY?: number;
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
### 4.4 导出设置
|
||||
|
||||
```typescript
|
||||
interface ExportSettings {
|
||||
resolution: 'standard' | 'hd' | 'ultra-hd';
|
||||
format: 'png';
|
||||
includeBack: boolean; // 是否导出背面
|
||||
namingPattern: string; // 文件命名模式
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. 核心算法
|
||||
|
||||
### 5.1 中心对称生成算法
|
||||
|
||||
**输入：** 单张JQK人像图片
|
||||
**输出：** 中心对称的人像图案
|
||||
|
||||
```
|
||||
算法步骤：
|
||||
1. 加载原始图片
|
||||
2. 获取图片高度 height
|
||||
3. 计算分割点：midpoint = height / 2
|
||||
4. 创建上半部分：
|
||||
- 从原始图片裁剪 [0, 0, width, midpoint]
|
||||
5. 创建下半部分：
|
||||
- 从原始图片裁剪 [0, midpoint, width, midpoint]
|
||||
- 垂直翻转（scaleY = -1）
|
||||
6. 创建新画布，高度 = midpoint * 2
|
||||
7. 将上半部分绘制到画布顶部
|
||||
8. 将翻转后的下半部分绘制到画布底部
|
||||
9. 返回中心对称图案
|
||||
```
|
||||
|
||||
**Fabric.js实现伪代码：**
|
||||
```javascript
|
||||
function createSymmetricalImage(originalImage) {
|
||||
const width = originalImage.width;
|
||||
const height = originalImage.height;
|
||||
const halfHeight = height / 2;
|
||||
|
||||
// 创建上半部分
|
||||
const topHalf = new fabric.Image(originalImage, {
|
||||
clipPath: new fabric.Rect({
|
||||
width: width,
|
||||
height: halfHeight,
|
||||
originX: 'left',
|
||||
originY: 'top'
|
||||
})
|
||||
});
|
||||
|
||||
// 创建下半部分并翻转
|
||||
const bottomHalf = new fabric.Image(originalImage, {
|
||||
top: halfHeight,
|
||||
scaleY: -1,
|
||||
clipPath: new fabric.Rect({
|
||||
width: width,
|
||||
height: halfHeight,
|
||||
originX: 'left',
|
||||
originY: 'top'
|
||||
})
|
||||
});
|
||||
|
||||
// 组合成最终图案
|
||||
const group = new fabric.Group([topHalf, bottomHalf]);
|
||||
return group;
|
||||
}
|
||||
```
|
||||
|
||||
### 5.2 数字牌花色排列算法
|
||||
|
||||
**输入：** 点数（1-10）、花色图案、牌面尺寸
|
||||
**输出：** 花色图案的位置数组
|
||||
|
||||
```javascript
|
||||
const LAYOUT_TEMPLATES = {
|
||||
1: [{ x: 0.5, y: 0.5 }], // A
|
||||
2: [{ x: 0.5, y: 0.25 }, { x: 0.5, y: 0.75 }],
|
||||
3: [{ x: 0.5, y: 0.2 }, { x: 0.5, y: 0.5 }, { x: 0.5, y: 0.8 }],
|
||||
4: [{ x: 0.3, y: 0.25 }, { x: 0.7, y: 0.25 },
|
||||
{ x: 0.3, y: 0.75 }, { x: 0.7, y: 0.75 }],
|
||||
5: [{ x: 0.3, y: 0.2 }, { x: 0.7, y: 0.2 },
|
||||
{ x: 0.5, y: 0.5 },
|
||||
{ x: 0.3, y: 0.8 }, { x: 0.7, y: 0.8 }],
|
||||
// ... 6-10的布局
|
||||
};
|
||||
|
||||
function calculateSuitPositions(rank, cardWidth, cardHeight, symbolSize) {
|
||||
const template = LAYOUT_TEMPLATES[rank];
|
||||
return template.map(pos => ({
|
||||
x: pos.x * cardWidth - symbolSize / 2,
|
||||
y: pos.y * cardHeight - symbolSize / 2
|
||||
}));
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. 用户交互流程
|
||||
|
||||
### 6.1 首次使用流程
|
||||
|
||||
```
|
||||
用户打开应用
|
||||
↓
|
||||
欢迎页面：选择模板系列
|
||||
├─ 经典风格
|
||||
├─ 现代简约
|
||||
├─ 卡通风格
|
||||
├─ 复古风格
|
||||
└─ 自定义
|
||||
↓
|
||||
进入设计编辑器（加载模板默认素材）
|
||||
↓
|
||||
用户可立即预览54张牌面
|
||||
↓
|
||||
开始上传自定义素材（可选）
|
||||
↓
|
||||
实时预览更新
|
||||
↓
|
||||
导出PNG
|
||||
```
|
||||
|
||||
### 6.2 素材上传流程
|
||||
|
||||
```
|
||||
用户点击"上传"按钮
|
||||
↓
|
||||
文件选择对话框
|
||||
↓
|
||||
选择文件（验证格式和尺寸）
|
||||
↓
|
||||
文件读取为Base64或Blob
|
||||
↓
|
||||
存储到IndexedDB
|
||||
↓
|
||||
更新项目配置
|
||||
↓
|
||||
触发重新渲染
|
||||
↓
|
||||
画布实时更新
|
||||
```
|
||||
|
||||
### 6.3 导出流程
|
||||
|
||||
```
|
||||
用户点击"导出"按钮
|
||||
↓
|
||||
导出设置对话框：
|
||||
- 选择范围（单张/批量）
|
||||
- 选择分辨率
|
||||
- 是否包含背面
|
||||
↓
|
||||
用户确认
|
||||
↓
|
||||
显示进度条
|
||||
↓
|
||||
遍历需要导出的牌：
|
||||
- 创建临时Canvas
|
||||
- 按图层渲染
|
||||
- 应用分辨率
|
||||
- 生成PNG Blob
|
||||
↓
|
||||
打包为ZIP（批量导出）
|
||||
↓
|
||||
触发下载
|
||||
↓
|
||||
完成提示
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. 性能优化
|
||||
|
||||
### 7.1 渲染优化
|
||||
|
||||
- **虚拟滚动：** 底部54张牌缩略图使用虚拟滚动
|
||||
- **懒加载：** 切换到某张牌时才完整渲染
|
||||
- **缓存：** 已渲染的牌面缓存到内存
|
||||
- **防抖：** 快速切换牌时不立即渲染，等待300ms
|
||||
|
||||
### 7.2 导出优化
|
||||
|
||||
- **并行导出：** 使用Web Worker并行生成PNG
|
||||
- **分批处理：** 大批量导出时分批进行，避免内存溢出
|
||||
- **进度反馈：** 实时显示导出进度
|
||||
|
||||
### 7.3 存储优化
|
||||
|
||||
- **压缩：** 上传的图片压缩后再存储
|
||||
- **IndexedDB：** 大文件使用IndexedDB而非localStorage
|
||||
- **清理：** 提供清理缓存功能
|
||||
|
||||
---
|
||||
|
||||
## 8. 扩展性设计
|
||||
|
||||
### 8.1 模板扩展
|
||||
|
||||
系统支持添加新模板，只需创建模板配置文件：
|
||||
|
||||
```javascript
|
||||
// templates/custom.js
|
||||
export default {
|
||||
id: 'custom',
|
||||
name: '自定义模板',
|
||||
defaultAssets: { ... },
|
||||
colorScheme: { ... }
|
||||
};
|
||||
```
|
||||
|
||||
### 8.2 布局扩展
|
||||
|
||||
数字牌布局模板可配置，支持非标准玩法：
|
||||
|
||||
```javascript
|
||||
// 自定义布局
|
||||
const customLayout = {
|
||||
1: [{ x: 0.5, y: 0.5 }],
|
||||
// ... 自定义位置
|
||||
};
|
||||
```
|
||||
|
||||
### 8.3 导出格式扩展
|
||||
|
||||
未来可扩展支持：
|
||||
- PDF导出（整副牌）
|
||||
- SVG矢量格式
|
||||
- 打印店对接格式
|
||||
|
||||
---
|
||||
|
||||
## 9. 测试策略
|
||||
|
||||
### 9.1 单元测试
|
||||
|
||||
- 中心对称生成算法
|
||||
- 布局计算算法
|
||||
- 文件命名规则
|
||||
- 数据结构验证
|
||||
|
||||
### 9.2 集成测试
|
||||
|
||||
- 素材上传流程
|
||||
- 导出流程
|
||||
- 模板加载流程
|
||||
|
||||
### 9.3 视觉测试
|
||||
|
||||
- 54张牌面渲染正确性
|
||||
- 中心对称效果验证
|
||||
- 不同分辨率导出质量
|
||||
|
||||
---
|
||||
|
||||
## 10. 项目约束
|
||||
|
||||
### 10.1 技术约束
|
||||
|
||||
- 纯前端，无后端依赖
|
||||
- 浏览器兼容：Chrome 90+, Firefox 88+, Safari 14+
|
||||
- 最大图片尺寸：4096×4096px
|
||||
- 最大项目数量：本地存储限制
|
||||
|
||||
### 10.2 设计约束
|
||||
|
||||
- 牌面比例固定：2.5:3.5（标准扑克牌比例）
|
||||
- JQK必须中心对称
|
||||
- 数字牌花色排列遵循标准模板
|
||||
- 导出格式仅支持PNG
|
||||
|
||||
### 10.3 性能约束
|
||||
|
||||
- 单张牌渲染时间：<100ms
|
||||
- 批量导出（54张）：<30秒
|
||||
- 图片上传响应：<500ms
|
||||
|
||||
---
|
||||
|
||||
## 11. 未来增强
|
||||
|
||||
### 11.1 短期增强
|
||||
|
||||
- 撤销/重做功能
|
||||
- 复制/粘贴样式
|
||||
- 对齐辅助线
|
||||
- 网格显示
|
||||
|
||||
### 11.2 中期增强
|
||||
|
||||
- 云端存储（需后端）
|
||||
- 项目分享功能
|
||||
- 协作编辑
|
||||
- 更多模板
|
||||
|
||||
### 11.3 长期增强
|
||||
|
||||
- AI辅助设计
|
||||
- 自动配色建议
|
||||
- 3D预览
|
||||
- AR预览
|
||||
|
||||
---
|
||||
|
||||
## 附录：标准扑克牌尺寸参考
|
||||
|
||||
| 类型 | 尺寸 | 用途 |
|
||||
|------|------|------|
|
||||
| 标准 | 2.5" × 3.5" (63.5×88.9mm) | 常见扑克牌 |
|
||||
| 桥牌 | 2.25" × 3.5" (57×88.9mm) | 桥牌用牌 |
|
||||
| 大号 | 3" × 4.5" (76.2×114.3mm) | 魔术表演 |
|
||||
| 迷你 | 1.75" × 2.5" (44.5×63.5mm) | 旅行便携 |
|
||||
|
||||
**像素尺寸（300 DPI）：**
|
||||
- 标准：750×1050px
|
||||
- 高清（600 DPI）：1500×2100px
|
||||
- 超高清（1200 DPI）：3000×4200px
|
||||
Reference in New Issue
Block a user