# createCanvas

**Repository Path**: merlinleaf/createCanvas

## Basic Information

- **Project Name**: createCanvas
- **Description**: 画布类产品代码实现仓库管理
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-13
- **Last Updated**: 2025-05-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Canvas 协同编辑应用

这是一个基于Vue 3和Konva.js的协同式画板编辑应用，使用Yjs实现数据持久化和实时协同编辑功能。

## 功能特点

- 基本图形绘制和编辑
- 文本添加和编辑
- 实时协同编辑（多人可同时编辑同一个画板）
- 数据持久化（刷新页面后数据仍然存在）
- 离线编辑支持（断网后仍可编辑，恢复网络后自动同步）
- 撤销和重做功能
- 画布缩放和平移

## 安装依赖

```bash
npm install
```

## 启动应用

1. 启动WebSocket服务器（用于协同编辑）:

```bash
npm run server
```

2. 启动前端应用:

```bash
npm run dev
```

## 协同编辑

要测试协同编辑功能，您可以:

1. 在一个浏览器中打开应用，URL中会自动生成一个文档ID
2. 复制该URL并在另一个浏览器或标签页中打开
3. 两个页面将同步显示相同的画布内容
4. 在任一页面上进行的更改将实时同步到其他页面

## 离线支持

应用支持离线编辑:

1. 在有网络连接的情况下打开应用
2. 断开网络连接（您会看到右上角的状态指示器变为"离线"）
3. 继续编辑画布
4. 当您重新连接到网络时，所有更改将自动同步

## 技术栈

- Vue 3 + TypeScript - 前端框架
- Konva.js - Canvas绘图库
- Yjs - 协同编辑和数据持久化
- IndexedDB - 本地存储
- WebSocket - 实时数据同步