# 【新春创造营】春节剪纸DIY
## 项目简介
春节剪纸DIY是一个民俗游戏主题的创意工具项目，让用户可以在线创作春节剪纸作品。项目采用红色背景和木纹风格设计，提供多种剪纸模板、颜色选择、自定义参数等功能，支持生成和下载剪纸作品，让用户在创作中体验传统剪纸文化的魅力。
**核心特点：**
- 丰富模板：6种剪纸模板（春、福、灯笼、鱼、花、云）
- 颜色选择：6种剪纸颜色（中国红、粉色、紫色、蓝色、绿色、金色）
- 自定义参数：复杂度、对称性、细节密度可调节
- SVG生成：基于SVG生成剪纸图案，支持下载
- 实时预览：生成结果实时显示在画布上
## iFlow CLI使用功能
本项目开发过程中使用了以下iFlow CLI功能：
1. **write_file** - 创建HTML文件
2. **文件路径管理** - 使用绝对路径确保文件创建位置正确
3. **文档系统化创建** - 标准化的项目文档
## 实现过程
### 1. 页面结构设计
- 采用2列网格布局，左侧为剪纸画布，右侧为剪纸控制面板
- 头部：剪纸风格的标题区域，带有剪刀和画笔emoji（✂️🎨）
- 主内容区：剪纸画布、生成按钮、下载按钮、重置按钮
- 侧边栏：模板选择、颜色选择、自定义参数、使用说明、统计面板、分享功能
### 2. 视觉风格
- **色彩方案**：红色（#ff6b6b、#ee5a24）+ 深红（#c0392b、#e74c3c）+ 金色（#f1c40f）+ 棕色（#8b4513）
- **字体选择**：Microsoft YaHei微软雅黑，现代简洁
- **布局特点**：剪纸画布背景纹理、模板卡片悬停效果、颜色选择圆形
- **视觉元素**：剪刀emoji（✂️）、画笔emoji（🎨）、模板图标、颜色圆点
### 3. 功能实现
#### 3.1 剪纸模板数据
```javascript
const TEMPLATES = [
{ id: 'spring', name: '春', icon: '🌸', pattern: 'spring' },
{ id: 'fu', name: '福', icon: '🎋', pattern: 'fu' },
{ id: 'lantern', name: '灯笼', icon: '🏮', pattern: 'lantern' },
{ id: 'fish', name: '鱼', icon: '🐟', pattern: 'fish' },
{ id: 'flower', name: '花', icon: '🌺', pattern: 'flower' },
{ id: 'cloud', name: '云', icon: '☁️', pattern: 'cloud' }
];
```
#### 3.2 剪纸颜色数据
```javascript
const COLORS = [
{ id: 'red', name: '中国红', value: '#c0392b' },
{ id: 'pink', name: '粉色', value: '#e91e63' },
{ id: 'purple', name: '紫色', value: '#9c27b0' },
{ id: 'blue', name: '蓝色', value: '#2196f3' },
{ id: 'green', name: '绿色', value: '#4caf50' },
{ id: 'gold', name: '金色', value: '#f1c40f' }
];
```
#### 3.3 游戏状态管理
```javascript
let paperState = {
selectedTemplate: null, // 选中的模板
selectedColor: COLORS[0], // 选中的颜色
complexity: 3, // 复杂度（1-5）
symmetry: 2, // 对称性（1-4）
detail: 3, // 细节密度（1-5）
createdCount: 0 // 创作数量
};
```
#### 3.4 核心功能（8个）
1. **模板选择** - 选择剪纸模板（春、福、灯笼、鱼、花、云）
2. **颜色选择** - 选择剪纸颜色（6种颜色可选）
3. **参数调节** - 调节复杂度、对称性、细节密度
4. **剪纸生成** - 根据模板、颜色、参数生成SVG剪纸图案
5. **剪纸下载** - 将生成的剪纸下载为PNG图片
6. **剪纸重置** - 清空画布，重新创作
7. **统计显示** - 显示模板数量、创作数量、可选颜色
8. **作品分享** - 分享作品信息到社交平台
#### 3.5 SVG剪纸图案生成
每个模板都有对应的图案生成函数，基于SVG绘制：
- **春字图案**：中心"春"字，周围对称装饰
- **福字图案**：中心"福"字，多层边框装饰
- **灯笼图案**：椭圆灯笼主体，内部装饰线条
- **鱼图案**：鱼形主体，内部鱼鳞装饰
- **花图案**：多层花瓣围绕花心
- **云图案**：多个云朵图案组合
### 4. 交互设计
- 点击模板卡片选择模板，选中状态高亮
- 点击颜色圆点选择颜色，选中状态边框
- 拖动滑块调节复杂度、对称性、细节密度
- 点击"生成剪纸"按钮在画布上生成图案
- 点击"下载剪纸"按钮将作品保存为PNG
### 5. 响应式设计
- 2列布局在小屏幕（<900px）变为单列
- 模板网格在小屏幕（<768px）从3列变为2列
- 颜色选择在小屏幕从6列变为4列
- 剪纸画布在小屏幕自适应缩小
## 截图
项目包含以下截图位置：
- 剪纸画布显示
- 模板选择区域
- 颜色选择区域
- 参数调节面板
## 体验链接
网页体验路径：
```
40_春节剪纸DIY.html
```
在线部署后可分享链接。
## 技术亮点
1. **SVG图案生成** - 基于SVG动态生成剪纸图案
2. **丰富模板** - 6种不同风格的剪纸模板
3. **自定义参数** - 复杂度、对称性、细节密度可调
4. **颜色丰富** - 6种传统剪纸颜色
5. **下载功能** - 支持将作品下载为PNG图片
## 文化意义
本项目通过剪纸DIY，让用户：
- 体验传统剪纸文化
- 了解剪纸的基本技巧
- 培养创造力和审美能力
- 增强对传统文化的认同感
## 未来改进方向
1. 添加更多剪纸模板
2. 实现自定义图案上传
3. 添加剪纸教程和技巧
4. 实现剪纸动画效果
5. 开发剪纸分享社区
6. 实现剪纸比赛功能
嗷嗷，好，我是2.10之前发的帖子，现在改完应该可以吧
活动已结束，抱歉 需要活动期间完成项目优化修改