canvas-artboard
Version:
* canvas画板 * 兼容移动端touch事件
115 lines (94 loc) • 6.14 kB
Markdown
```
安装
npm install -s canvas-artboard
引入
import Draw from 'canvas-artboard'
<canvas width="800" height="500" id="canvas"></canvas>
const canvasDraw = new Draw("canvas", [], "#999999", this.color, this.size, (e) => {console.log('当前画布实例：', e)});
参数依次传入为
canvas的id,
历史纪录的点: historyOptions {
[
{
size: Number,
color: String,
list: [
[],
[]
]
},
{
img: HTMLImageElement,
x: number,
y: number,
w: number,
h: number,
isCover: boolean
}
]
},
画板背景色,
画笔颜色,
画笔大小,
每次画笔完成的回调方式，回调参数为当前canvasDraw的实例
```
----------提供的方法-----------
| 方法 | 说明 | 参数 | 默认值 | 返回值 | 版本 |
| ---------------- | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------- | ---------------------- | -------------- | ---- |
| resetCanvas | 清空 canvas 的方法 | 无 | | |
| init | 还原所有画笔的画布 不传参数为清空画板 | {[{size: Number,color: String,list: [[12,13],[14,15]]}]} | [] | |
| after | 后一步画布-----返回一个对象{code, msg},code=404 没有前一笔, code=200 成功 | 无 | | {code, msg} | ~~ |
| front | 返回一个对象{code, msg},前一步画布-----code=404 没有前一笔, code=200 成功 | 无 | | {code, msg} | ~~ |
| getPointList | 获取画笔记录 | 无 | | historyOptions | ~~ |
| setColor | 设置画笔颜色 | color 如('#333333') | | | ~~ |
| setPenSize | 设置画笔的大小 | number | | | ~~ |
| eraser | 橡皮檫（使用背景色为画笔，不会清除像素点） | 无 | | | ~~ |
| getbase64 | 获取 canvas 的 base64 | (质量 0-1 越大越好, 图片类型) | (1, 'image/png') | string | ~~ |
| drawImg | 插入图片具体说明见下方说明 | (图片源， 位置 x， 位置 y， 图片宽， 图片高， 是否被历史画笔覆盖) | | string | ~~ |
| downland | 下载图片 | (下载图片名, 质量 0-1 越大越好, 图片类型) | (必填, 1, 'image/png') | | ~~ |
| getBase64ImgFile | 获取 canvas 的 file 文件类型 | (质量 0-1 越大越好, 图片类型, 文件名) | (1, 'image/png', 必填) | File 类型文件 | ~~ |
| clearPixel | 清除画布像素（透明色不同于橡皮檫，image/png 才有效果， image/jpeg 底会被填充为黑色） | boolean | boolean | | ~~ |
| setNoDraw | 在某些特定的场景下例如需要拖动 canvas 画布的情况，兼容 canvas 拖拽事件 | boolean | boolean | | ~~ |
```
关于图片质量只有在指定图片格式为 image/jpeg 或 image/webp生效
插入图片drawImg 使用input框选择图片转化成base64配合 async 和 await
let reader = new FileReader();
reader.onload = async (e) => {
let img = await new Image()
img.src = await e.target.result
img.height = 100
img.width = 100
canvasDraw.drawImg(img, 0, 0, 100, 100, true)
};
reader.readAsDataURL(e.target.files[0]);
修改
优化插入画板后前一笔后一笔的动作
新增
插入图片功能
修改
源码部分注释
优化插入画板后前一笔后一笔的动作
获取base64图片方法的传参类型调整
新增
下载图片功能
获取canvas的file文件类型
新增清除像素点功能
通过canvasDraw.clearPixel(boolean)传入布尔值来开启关闭
优化清除像素点功能中鼠标移动过快产生的间隔
转换ts版本
1.新增每笔画完的回调方法
2.新增设置canvas不可绘制(用于兼容拖拽事件)
1.修复在背景图为透明的情况下resetCanvas和init方法无法充值透明背景的情况
```