基于canvas的手绘画板,效果如下
预览地址:https://lhrun.github.io/paint-board
目前已完成功能
- 画笔
- 橡皮擦
- 画布拖拽
- 撤回,反撤回,清除,保存画布
- 多图层
- 无限缩放
- 多项目
- 背景颜色
- ...
git clone https://github.com/LHRUN/paint-board.git
pnpm install
pnpm run dev
├─components
│ └─icons
├─hooks
│ event.ts // event hook
├─pages
│ └─board
│ │ index.tsx
│ │
│ └─components
│ ├─info // 帮助信息
│ ├─layer // 图层
│ └─optionsMenu // 工具面板
├─types
└─utils
│ constants
│ history.ts // 操作记录
│ common.ts
│ layer.ts // 图层
│ paintBoard.ts // 主类
│ storage.ts // 缓存
│
└─element
cleanLine.ts // 线性清除
element.ts // 基本元素
freeLine.ts // 画笔
- 首先是建立一个canvas画板类,所有canvas上的操作和数据全都在此处理,例如初始化,渲染,拖拽画板等等
class PaintBoard {
canvas: HTMLCanvasElement
context: CanvasRenderingContext2D
...
constructor(canvas: HTMLCanvasElement) {}
// 初始化canvas
initCanvas() {}
// 渲染
render() {}
// 拖拽
drag() {}
...
}
- 然后基于canvas类,根据当前的操作,建立对应的canvas元素,比如画笔,橡皮擦,基本类型如下
class CanvasElement {
type: string // 元素类型
layer: number // 图层
// ...
constructor(type: string, layer: number) {
this.type = type
this.layer = layer
// ...
}
// ...
}
- 最后根据渲染逻辑,还会封装一些通用的逻辑来改变canvas上最终的展示,比如撤回,反撤回,图层操作等等
- blog:基于canvas实现的多功能画板