xiaji/game-cards-poker-design

Fork 0

Files

Poker Design Developer 00ac63b85c Add README and design spec for poker card design system

2026-05-31 11:46:24 +08:00

22 KiB

Raw Blame History

扑克牌设计管理系统 - 设计规格文档

日期： 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 模板数据结构

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

interface Project {
  id: string;
  name: string;
  createdAt: Date;
  updatedAt: Date;
  template: string;               // 模板ID
  cardSize: {
    width: number;
    height: number;
  };
  assets: AssetCollection;
  exportSettings: ExportSettings;
}

4.2 素材集合

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 图层配置

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 导出设置

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实现伪代码：

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）、花色图案、牌面尺寸
输出： 花色图案的位置数组

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 模板扩展

系统支持添加新模板，只需创建模板配置文件：

// templates/custom.js
export default {
  id: 'custom',
  name: '自定义模板',
  defaultAssets: { ... },
  colorScheme: { ... }
};

8.2 布局扩展

数字牌布局模板可配置，支持非标准玩法：

// 自定义布局
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

22 KiB Raw Blame History Unescape Escape