writing-panel

JS 实现写字板功能

Functions

• 绘画书写
• 设置面板样式(面板大小/线条宽度及颜色/线帽样式/...)
• 支持线条撤销和恢复
• 图片保存/下载
• 获取Base64字符串
• 获取Blob|File对象
• 开启/关闭面板蒙层
• 销毁
• ......

Installation

Using npm:

$ npm i -g npm
$ npm i writing-panel

In 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