接入文档
## 1.引入 `JSAPI`
`JSAPI`存放在`SKDO`后台服务中，使用`script`标签引入。
```html
<script src="http://ip:port/sdko/signplugin/ws.plugin.form.js"></script>
```
## 2.实例化插件
```javascript
let plugin = new WSPluginForm(document.getElementAsId('myform'), {
userId: 'xx', // 用户ID
strokeId: 'xxx', // 签字ID
buildNo: 8, // 签字版本号
onLoad: (result) => {
console.log(result)
}
})
```
***请勿将`plugin `对象放到 `vue` 的 `data` 、 `react` 的 `state` 中***
## 3.表单插件状态
- 预览：只显示笔迹
- 签署：书写笔迹
- 擦除：橡皮擦 擦除笔迹
- 移动：移动笔迹
***插件实例化后会先进入 `预览`状态***
## 4.基础配置
- `userId: string` 用户ID，用来做笔迹权限处理。默认`helloworld`
- `strokeId: string`笔迹ID，由`save`接口返回。不传则从空白开始签署
- `buildNo: number`版本号，不传则会渲染最新的版本号。
- `defStrokeSize: number`默认笔迹粗细。`1-8`。默认`4`
- `defStrokeColor: string`默认笔迹颜色。`'#191F25' | '#C41018'
'#1890FF' | '#522694'| '#199907'| '#E39130'| '#ffffff'`。默认`#191F25`
- `useStrokeSeparate: boolean`默认是否开启手笔分离。默认`false`
- `useEditAllRecord: boolean` 是否可以编辑所有人的笔迹。默认`false`
- `strokebarWrap: HTMLElement` 工具栏挂载的父节点，默认`body`
- `useDefStrokebar: boolean`是否使用默认的圈批工具栏。默认`false`
- `strokebarPlacement: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'`圈批工具栏位置。默认`bottomRight`
- `onLoad: (result: { code: number, message: string, buildNo: number }) => {}`插件初始加载成功回调。`code`为`0`表示成功，否则为失败。`buildNo`渲染的版本号
```javascript
let plugin = new WSPluginForm(document.getElementAsId('myform'), {
userId: 'xxx',
strokeId: 'xxx', // 签字ID
buildNo: 8, // 签字版本号
defStrokeSize: 1,
defStrokeColor: '#ffffff',
useEditAllRecord: false,
strokebarWrap: document.getElementById('mystrokebar'),
strokebarPlacement: 'left',
onLoad: (result) => {
if (result.code === 0) {
console.log('初始化成功')
} else {
console.log('初始化失败', result.message)
}
}
})
```
## 5.方法
- `switchToStroke`切换到签署模式
```typescript
plugin.switchToStroke()
```
- `switchToEraser`切换到擦除模式
```typescript
plugin.switchToEraser()
```
- `switchToPreview`切换到预览模式
```typescript
plugin.switchToPreview()
```
- `switchToRemove`切换到移动模式
```javascript
plugin.switchToRemove()
```
- `setStrokeColor`设置笔迹颜色
参数：`color: string` 笔迹颜色代码，建议格式类似'#dd444c'
```typescript
plugin.setStrokeColor('#dd444c')
```
- `setStrokeSize`设置笔迹粗细
参数：`size: number`笔迹粗细，`1-8`
```typescript
plugin.setStrokeSize(5)
```
- `setSeparate`设置 是否开启手笔分离
参数：`value: boolean` 是否开启手笔分离
```typescript
plugin.setSeparate(true) // 开启手笔分离
```
- `clearStroke`清空所有笔迹
```typescript
plugin.clearStroke()
```
- `save`保存当前笔迹
```typescript
interface IResult {
code: number // 保存结果 0 成功，其他 失败
message: string // 保存结果信息
strokeId: string // 保存笔迹的id
buildNo: number // 保存笔迹的版本号
}
const result:IResult = await plugin.save()
console.log(result)
```
- `destroy`销毁插件
```typescript
plugin.switchToPreview()
plugin = undefined
```