# RealtimePaintingOnline

**Repository Path**: liu-yong-123/realtime-painting-online

## Basic Information

- **Project Name**: RealtimePaintingOnline
- **Description**: 多人共享协作白板，springboot + vue + websocket
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2023-03-21
- **Last Updated**: 2023-03-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# # 多人在线远程协作白板

## 说明

该仓库为前后端共用仓库

前端目录：`/front-end`

后端目录：`/back-end`

## 功能设计与实现

### 支持图形及样式

直线、箭头：颜色、透明度

矩形、圆形：颜色、是否填充、填充颜色、填充透明度

文本：颜色、透明度、尺寸

### 支持操作

创建房间、加入房间、绘图、添加画布、切换画布、修改画布模式（仅限房间主人）、撤销、重做
填充

### 更多功能敬请期待

## 演示视频

[哔哩哔哩-演示视频在线播放地址](https://www.bilibili.com/video/BV19Y411Z7GE)

[QQ空间演示视频在线播放地址](https://h5.qzone.qq.com/page/photo?init=photo.v7/common/viewer2/index&picKey=NR8AVjZiQ2dBeU56WXhPREEwTlRJMDc3TndZLm44OUJ3IQcAcGhvdG9neg!!&ownerUin=2761804524&appid=4&topicId=V51n9TQc0IimhD35udRX1gAS002mp511_NR8AVjZiQ2dBeU56WXhPREEwTlRJMDc3TndZLm44OUJ3IQcAcGhvdG9neg!!_0_0&pre=https%3A%2F%2Fm.qpic.cn%2Fpsc%3F%2FV51n9TQc0IimhD35udRX1gAS002mp511%2FruAMsa53pVQWN7FLK88i5qfk0vBLvolbN8eLduPYMzPzsZ92oKT0Rxs0Y7qsb.hFYnnXElOdAwzpKFnUSx7PZt6zH9JiCfI3r1fCBDQ4vKk!%2Fc%26bo%3DeAcYBAAAAAABF1M!&useqzfl=1&useinterface=1&noCloseBtn=0&inqq=1)

**若由于QQ空间限流及权限问题导致播放地址失效，请手动打开`/docs/演示视频.mp4`查看**

## 环境准备

前端环境：node v16.14.2

后端环境：Java8

## 快速开始

### 前端部署

#### 配置说明

默认启动端口为`10087`，如需修改，请到`/front-end/vue.config.js`中修改对应配置

#### 使用说明

项目默认访问后端接口为`localhost:10087`，如需跨终端访问，请修改`/front-end/App.vue`文件`data.st.wsUrl`属性值为相应后端项目IP地址和端口号

#### 运行

切换路径

```
cd ./front-end
```

安装依赖

```
npm install
```

运行

```
npm run serve
```

打包

```
npm run build
```

### 后端部署

#### 配置说明

默认启动端口为`10086`，如需修改，请到`/back-end/back-end/src/main/resources/application.properties`中修改对应配置

#### 运行

项目入口：`./back-end/back-end/src/main/java/com/am/BackEndApplication.java`

执行入口文件`main`方法即可