121 lines
4.5 KiB
Markdown
121 lines
4.5 KiB
Markdown
# 涂鸦白板
|
||
|
||
> 当前的开源代码为 Demo 版本，且为单机版的。UI 设计的相对简单，功能不尽完善，此次的 Demo 版本开源了常用的涂鸦工具，包括无限画布（拖拽）、马克笔、激光笔、圆形、矩形、橡皮擦、文本、撤销、恢复、截屏等涂鸦的常用工具，后续另有相对比较成熟的版本，集成了会议 / 文档 / 实时同步 / 在线聊天 / 用户管理等功能，同时重新设计了 UI，后续将提供体验地址。
|
||
>
|
||
> Demo 体验地址：[https://graffiti.makeit.vip/](https://graffiti.makeit.vip/)
|
||
|
||
## 初始化
|
||
|
||
```ts
|
||
const stage = new Stage({container: `canvas's container id`});
|
||
const layer = new Layer();
|
||
stage.add(layer);
|
||
|
||
// 初始化 Stage 时, 需要手动初始化一个图层, 将该图层添加至当前 Stage,
|
||
// 完成初始化操作后, 所有的绘制动作都将在当前图层内操作.
|
||
// Stage 内可无限添加画板(Canvas), 同时也支持每个 Canvas 内无限添加图层(Layer).
|
||
```
|
||
|
||
## 目录结构
|
||
|
||
```html
|
||
src
|
||
├─assets 静态资源
|
||
│ ├─fonts 字体(iconfont)
|
||
│ ├─images 图片资源
|
||
│ └─styles 样式资源
|
||
│ └─canvas 组件样式
|
||
├─components 组件模块
|
||
│ └─canvas 画板
|
||
│ ├─shapes 图形工具类
|
||
│ ├─tools 画板工具类
|
||
│ └─workers 多线程任务
|
||
├─router 路由管理
|
||
├─store 状态管理
|
||
│ └─stage Stage 状态
|
||
├─utils 通用工具类
|
||
└─views 视图
|
||
└─canvas Canvas 视图
|
||
```
|
||
|
||
## 画板组件
|
||
|
||
```html
|
||
canvas
|
||
├─Base.ts 基类
|
||
├─Canvas.ts 画板类
|
||
├─Cursor.ts 光标类
|
||
├─Events.ts 事件类
|
||
├─Layer.ts 图层类
|
||
├─Point.ts 坐标类
|
||
├─Shape.ts 图形类
|
||
├─Stage.ts 中心类
|
||
├─Throttle.ts 节流类
|
||
├─Tools.ts 笔刷类
|
||
├─Utils.ts 工具类
|
||
├─... 其它基础/工具类 ...
|
||
├─shapes
|
||
│ ├─Arc.ts 圆形类
|
||
│ ├─Rect.ts 矩形类
|
||
│ └─... 更多工具...
|
||
├─tools
|
||
│ ├─Arrow.ts 箭头
|
||
│ ├─Circular.ts 圆形
|
||
│ ├─Drag.ts 拖拽
|
||
│ ├─Eraser.ts 橡皮擦
|
||
│ ├─Laser.ts 激光笔
|
||
│ ├─Line.ts 直线
|
||
│ ├─Pencil.ts 马克笔
|
||
│ ├─Rect.ts 矩形
|
||
│ ├─Screenshot.ts 截屏
|
||
│ ├─Selection.ts 选择
|
||
│ ├─Text.ts 文本
|
||
│ └─... 更多工具实现类
|
||
└─workers
|
||
│ ├─rect.worker.ts 矩形任务处理
|
||
| ├─points.worker.ts 坐标任务处理
|
||
| └─socket.worker.ts Socket 任务处理
|
||
```
|
||
|
||
## 视图文件
|
||
|
||
```html
|
||
views
|
||
├─Backward.vue 回撤
|
||
├─Brush.vue 笔刷工具
|
||
├─Document.vue 文档管理
|
||
├─Drag.vue 拖动画布(无限画布)
|
||
├─Eraser.vue 橡皮擦
|
||
├─Forward.vue 恢复
|
||
├─Import.vue 导入文档
|
||
├─Index.vue 页面入口
|
||
├─Layers.vue 图层管理
|
||
├─Palette.vue 调色板
|
||
├─Screenfull.vue 全屏
|
||
├─Screenshot.vue 截屏
|
||
├─Selection.vue 选择
|
||
├─Stages.vue 画布管理
|
||
├─Text.vue 文本功能
|
||
├─Thickness.vue 笔刷粗细
|
||
└─Users.vue 用户管理
|
||
```
|
||
|
||
## 工具开发
|
||
|
||
```bash
|
||
# 1. 新建工具类(src/components/canvas/tools)
|
||
# 2. 工具类继承 Tools 基类及其实现 MiTools
|
||
# 3. 调用 Stage.register(tool) 进行注册或在 Stage.registerTools() 方法中内置
|
||
```
|
||
|
||
## 常用命令
|
||
|
||
```bash
|
||
npm install # 项目设置(安装依赖)
|
||
npm run serve # 本地运行
|
||
npm run build:dev # 项目构建(development)
|
||
npm run build:pro # 项目构建(production)
|
||
npm run test:unit # 单元测试
|
||
npm run lint # 语法检测
|
||
```
|