Tablet是一个轻量级的基于canvas的在线画板,无其他依赖,`传统网站`或`vue`、`react`、`angular`等单页面应用皆可使用!兼容各种移动设备!
npm install canvas-tablet传统网站或vue、react、angular等单页面应用皆可使用!兼容各种移动设备!
traditional websites or single-page applications such as vue, react, and angular! Compatible with all kinds of mobile devices!
Tablet2.0文档,Tablet1.0文档请前往
npm install canvas-tablet -S
将/dist/Tablet-2.0.1.min.js下载下来即可
`
效果如图:
!Table画板效果
实例方法(Methods)
> refresh(refreshWH)
刷新画布,线条及背景将会重绘,返回当前Tablet实例;如果refreshWH为true,则会重新计算画布宽高
> hasCanUseLine
判断是否有可用的线条,可以用来判断用户是否有绘制内容,返回值类型:boolean
> getRect
获取画布位置及宽高;返回值类型:{x: number, width: number, y: number, height: number}
> getBase64(type, angle)
将画布内容转换成base64数据,并返回;返回值类型:string
+ type:图片类型,只有jpg、png两个选项,默认png
+ angle:旋转角度,默认为0,角度支持90的整数倍
> getBlob(type, angle)
将画布内容转换成blob数据,并返回;返回值类型:blob
+ type:图片类型,只有jpg、png两个选项,默认png
+ angle:旋转角度,默认为0,角度支持90的整数倍
> getMax(xPoints, yPoints)
获取x、y轴的最大、最小值;xPoints, yPoints分别为x轴、y轴所有坐标;返回值类型:{top: number, left: number, bottom: number, right: number}
> setColor(color)
设置画笔颜色;color为颜色值,可以是任何css的颜色表达式;返回当前Tablet实例
> setLineWidth(width)
设置画笔粗细;width为粗细值,number类型;返回当前Tablet实例
> setBackgroundColor(bgColor, x, y, width, height, addToOperationRecord)
设置画布背景颜色;返回当前Tablet实例
1. bgColor:颜色值,可以是任何css的颜色表达式
2. x:绘制起始x点,默认为0
3. y:绘制起始y点,默认为0
4. width:绘制宽度,默认为整个画布宽度
5. height:绘制高度,默认为整个画布高度
6. addToOperationRecord:是否将此操作添加到操作历史中,默认为true
> setBackgroundImage(img, x, y, width, height, onImgLoading, onFail, addToOperationRecord)
设置画布背景颜色;返回当前Tablet实例
1. img:背景图片,值可以为图片url或者Image对象
2. x:绘制起始x点,默认为0
3. y:绘制起始y点,默认为0
4. width:绘制宽度,默认为整个画布宽度
5. height:绘制高度,默认为整个画布高度
6. onImgLoading:图片加载中回调
7. onFail:图片加载失败回调
8. addToOperationRecord:是否将此操作添加到操作历史中,默认为true
> setCanvasWH(width, height)
设置画布的宽高;width, height分别为画布宽高,如果不传宽高则会自动计算;返回当前Tablet实例
> canvasReset
重置canvas画笔属性,使用最后一次的属性进行重置,返回当前Tablet实例;
> revoke
回退一步,返回当前Tablet实例;
> clear(clearPoints)
clear方法用于清空画布,返回值当前Tablet实例;如果clearPoints为true,则会将之前绘制的线条及操作步骤清空
> hasContent(singleColorCountMin, totalColorCountMin) v2.0.5新增
判断画布是否有内容,画布中有可用线条或画布中颜色数量大于等于totalColorCountMin都认为有内容
1. singleColorCountMin:单个颜色最少数量,默认5
2. totalColorCountMin:总颜色数量,默认为2
> getTabletImageColors` v2.0.5新增