# 扑克牌设计管理系统 - 设计规格文档 **日期：** 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