0.0.1-4 • Published 3 years ago
writing-panel v0.0.1-4
writing-panel
JS 实现写字板功能
Functions
- 绘画书写
- 设置面板样式(面板大小/线条宽度及颜色/线帽样式/...)
- 支持线条撤销和恢复
- 图片保存/下载
- 获取
Base64字符串 - 获取
Blob|File对象 - 开启/关闭面板蒙层
- 销毁
- ......
Installation
Using npm:
$ npm i -g npm
$ npm i writing-panelIn web browsers:
<script src="bundle.js"></script>Usages
PanelConfigOption-面板配置项
- PanelConfigOption.width: 面板宽度
- PanelConfigOption.height: 面板高度
- PanelConfigOption.panelBgColor: 面板背景色
- PanelConfigOption.lineWidth: 线条宽度
- PanelConfigOption.lineCap: 线帽样式
- PanelConfigOption.lineJoin: 线条交汇处边角的类型
- PanelConfigOption.imgType: 图片类型
- PanelConfigOption.cursorStyle: 鼠标移动到面板区域时的光标样式
- PanelConfigOption.autoResize: 浏览器窗口改变时是否重置面板，默认为true
- PanelConfigOption.enableDPR: 是否启用设备像素比
window.devicePixelRatio，如果开始此选项，则在设置画布/面板的width和height属性值时，需要根据设备像素比进行计算，默认为false。
书写面板组件类
创建一个写字板组件类
const writingPanel = new WritingPanel(canvasElement, panelConfigOption);参数：
canvasElement:HTMLCanvasElement，canvas画布元素options:PanelConfigOption，面板参数配置对象的实例
设置面板背景色
writingPanel.setPanelBgColor(color);参数：
color颜色值，默认值为null，使用PanelConfig.panelBgColor属性值
返回：
writingPanel- 当前面板实例对象
获取当前面板的背景色
writingPanel.getPanelBgColor();返回：
string|undefined
设置写字板高度
writingPanel.setPanelHeight(height);参数：
height：number类型
返回：
writingPanel-当前写字板实例对象
获取写字板的高度
writingPanel.getPanelHeight();获取计算后的面板元素的综合高度值
返回：
- 高度值，
string类型，单位：px
设置写字板的宽度
writingPanel.setPanelWidth(width);参数：
width：number类型
返回：
writingPanel-当前写字板实例对象
获取写字板的宽度
writingPanel.getPanelWidth();获取计算后的面板元素的综合宽度值
返回：
- 宽度值，
string类型，单位：px
还原面板原始宽高比例
writingPanel.restorePanelWH(rstWidth, rstHeight);还原面板原始宽高比例。在设置了面板的宽度或高度后，可以使用此方法对面板宽度或高度进行还原。
参数：
rstWidth:boolean，还原面板宽度，默认值为true。rstHeight:boolean，还原面板高度，默认值为true。
返回：
void
设置线条宽度
writingPanel.setLineWidth(width);参数：
width:number类型
返回：
writingPanel- 当前写字板实例对象
设置线条线帽的样式
writingPanel.setLineCap(value);参数：
value:CanvasLineCap类型
返回：
writingPanel- 当前写字板实例对象
设置线条颜色
writingPanel.setLineColor(color);参数：
color:string类型
返回：
writingPanel- 当前写字板实例对象
清除面板内容
writingPanel.clearPanel(clearRecordFlag, resetPanelBgcFlag);参数：
clearRecordFlag:boolean类型，是否清除线条记录，默认值为true.resetPanelBgcFlag:boolean类型，是否重置面板背景色，默认值为true.
获取画布的Base64编码字符串
writingPanel.getBase64();返回：
- base64编码字符串
获取画布的Blob|File对象
writingPanel.getImgBlobOrFile(type, fileName);参数：
- type:
string类型，有两种可选类型(blob|file)，默认值为blob，可选。 - fileName:
string，文件名称，可选。
返回
Promise:Promise<Blob | File>
保存图片
writingPanel.saveImgFile(fileName);功能同downloadImgFile()方法，返回值为Promise类型，下载结束后可使用.then()方法执行其它相关操作。
参数：
fileName: 图片文件名称，如果不传则使用随机文件名称
返回：
Promise:Promise<any>
下载图片
writingPanel.downloadImgFile(fileName);功能同功能同saveImgFile()方法，返回值为Promise类型，下载结束后可使用.then()方法执行其它相关操作。
参数：
fileName: 图片文件名称，如果不传则使用随机文件名称
返回：
Promise:Promise<any>
撤销/单步撤销操作
writingPanel.revoke();恢复撤销操作
writingPanel.recover();设置面板区域的光标样式
writingPanel.setPanelCursorStyle(cursorStyle);参数：
cursorStyle:string类型，光标样式
返回：
void
判断面板是否为空
writingPanel.isEmpty();返回：
boolean
销毁
writingPanel.destroy();返回：
void
开启蒙层
writingPanel.openMask();仅针对当前面板容器的范围设置蒙层，当面板容器的大小发生变化时，蒙层大小不会随之而改变。
返回：
void
关闭蒙层
writingPanel.closeMask();返回：
void
更新日期：2022-08-07