画布产品课程项目 (Canvas Product Project)

1. 项目简介

本项目是一个基于 Web 的轻量级画布产品（类似 Figma 或 Excalidraw 的简化版），旨在通过从零实现一个功能完备的图形编辑器，深入探索图形渲染、交互设计与状态管理等核心领域。

项目采用 Vue 3 + TypeScript 作为核心框架，使用 PixiJS 作为高性能 2D 渲染引擎，并通过 Pinia 进行全局状态管理。

2. 如何启动项目

环境要求

• Node.js >= 16.0.0
• npm >= 7.0.0

安装依赖

npm install

启动开发服务器

npm run dev

启动后访问: http://localhost:5173 (默认端口)

构建生产版本

npm run build

3. 主要目录结构说明

src/
├── assets/              # 静态资源文件
├── components/          # Vue UI 组件
│   ├── CanvasBoard.vue  # 核心画布组件 (PixiJS 渲染容器)
│   ├── Toolbar.vue      # 底部固定工具栏 (工具切换)
│   ├── FloatingToolbar.vue # 上下文浮动工具栏 (属性设置)
│   └── Transformer.vue  # 变换控制器 (缩放/旋转手柄)
├── composables/         # 组合式函数
│   └── useCanvasRenderer.ts # PixiJS 应用实例初始化逻辑
├── stores/              # Pinia 状态管理
│   └── canvasStore.ts   # 画布核心状态 (元素列表、视口变换、选中态)
├── types/               # TypeScript 类型定义
│   └── element.ts       # 画布元素数据模型 (Shape, Image, Text)
├── utils/               # 工具函数
│   └── coordinates.ts   # 坐标转换算法 (屏幕坐标 <-> 世界坐标)
├── App.vue              # 根组件
└── main.ts              # 入口文件

4. 已实现功能列表

• 基础图形绘制: 支持矩形、圆形、圆角矩形、三角形的创建与渲染。
• 画布交互:
  • 无限画布漫游（中键拖拽平移）。
  • 鼠标滚轮缩放（以鼠标为中心）。
• 元素交互:
  • 点击选中元素。
  • 拖拽移动元素。
  • 选中后按 Delete/Backspace 删除元素。
• 图片支持: 支持上传本地图片并在画布中展示。
• 文本支持: 支持创建文本框，双击进行内容编辑。
• 数据持久化: 基于 localStorage 的自动保存与会话恢复（Session Recovery）。
• 富文本编辑: 支持对文本进行加粗、斜体、下划线、删除线 (BIUS) 样式设置。
• 图片滤镜系统: 支持实时调节图片的灰度、模糊、亮度。
• 高级选择交互:
  • 框选 (Marquee): 拖拽框选多个元素。
  • 多选操作: 按住 Shift 进行加减选，支持批量移动。
• 剪贴板: 支持跨页面的复制 (Ctrl+C) 与粘贴 (Ctrl+V)，具备智能偏移粘贴功能。
• UI 体验优化:
  • 浮动工具栏: 根据选中元素类型（形状/文本/图片）动态展示配置项。
  • Auto-size: 文本框尺寸随内容自动伸缩。

5. 小组分工

成员姓名	负责模块	备注
xxx	全栈开发	负责核心架构、渲染引擎对接、交互逻辑实现及文档编写

(注：本项目目前为单人独立开发)

6. 关键脚本说明

在 package.json 中定义了以下常用命令：

命令	说明
npm run dev	启动本地开发服务器 (Vite)，支持热更新。
npm run build	执行类型检查 (vue-tsc) 并构建生产环境代码。
npm run preview	本地预览构建后的生产版本。