paint-board
基于canvas的多功能画板
中文 | English
预览
Link: https://songlh.top/paint-board/
功能列表
已完成功能：
- 画笔
- 可修改颜色，可根据速度动态展示线宽
- 多种画笔效果，荧光、多色、蜡笔、喷雾、泡泡...
- 橡皮擦，随鼠标线性擦除内容
- 绘制文字，双击画板输入文字绘制指定位置
- 画板拖拽，按住空格可以无限拖拽画板
- 选择模式，选择模式下可以点击元素进行框选，并按住手柄进行缩放或者移动，点击Backspace键可以删除选择元素
- 图层，画板内容是按照图层顺序进行显示，可新增删除排序图层
- 撤销，反撤销，清除画板，保存为图片
待完成功能：
- 图片加载
- 画板缩放
- 背景颜色切换
- 多画板
- ...
操作指南
本地启动
git clone https://github.com/LHRUN/paint-board.git
pnpm install
pnpm dev
文件结构
├─components
│ ├─info // 帮助信息
│ ├─layer // 多图层
│ ├─mask // 蒙层
│ ├─toolPanel // 工具面板
│ └─icons
│
├─hooks
│ └─event.ts // event hook
├─pages
│ └─board // 画板页
│
├─types
│
├─i18n
│
└─utils
├─constants
├─history.ts // 历史记录
├─common.ts
├─layer.ts // 图层
├─paintBoard.ts // 画本主逻辑
├─storage.ts // 缓存
├─cursor.ts // 鼠标光标
├─select.ts // 选择元素
└─element
├─eraser.ts // 橡皮擦
├─element.ts // 基础元素
├─freeDraw.ts // 画笔
└─text.ts // 文本元素画板设计
- 首先是建立一个PaintBoard画板类，所有canvas上的操作和数据都在此处理，例如初始化，渲染，拖拽画板等等
class PaintBoard {
canvas: HTMLCanvasElement
context: CanvasRenderingContext2D
...
constructor(canvas: HTMLCanvasElement) {}
// 初始化canvas
initCanvas() {}
// 渲染
render() {}
// 拖拽
drag() {}
...
}- 然后基于画板，根据当前，建立对应的canvas元素，比如画笔，橡皮擦，文字等等，基本类型如下
class CanvasElement {
type: string // 元素类型
layer: number // 图层
// ...
constructor(type: string, layer: number) {
this.type = type
this.layer = layer
// ...
}
// ...
}- 最后根据渲染逻辑，还会封装一些通用的逻辑来改变canvas上最终的展示，比如撤回，反撤回，图层操作等等