5.4渲染
> 初始化完成后,通过`Render(option)`方法渲染界面。
## Render
* 参数:
`{Object} option` 界面参数配置 ,参数详情参考下面的说明。非必传。
* 返回值:无
* 作用:配置界面显示参数并渲染,在`Init`方法后调用。
*****
`option` 参数说明
| 键(key) | 类型(type)| 说明(desc) |
| --- | --- |---|---|
| `readonly` | `Boolean` | 非必传,只读模式,只读模式会隐藏左边插入对象视图。默认 `false`。|
| `signareas` | `Array` | 非必传,自定义固定签字域。参数详情见下面的说明 |
| `toolbars` | `Array` | 非必传,自定义顶部toolbars,参数详情见下面的说明。 |
| `objects` | `Array` | 非必传,自定义左部插入对象按钮样式,参数详情见下面的说明。 |
| `showFooterFileName` (2.0.2+) | `Boolean` | 非必传,是否显示页脚文件名称,默认`true`。 |
| `editLimit` (2.0.2+) | `Object` | 非必传,限制本次编辑签名、文本、图片等最大插入数量。参数详情见下面的说明。 |
| `deleteCallerIds` (2.0.3+) | `Array` | 非必传,可删除笔迹、文本、图片、签批的callerId数组。参数详情见下面的说明。 |
| `showSignseal` (2.0.4+) | `Boolean` | 是否支持签章功能,默认`false`。 |
| `signTogether` (2.0.5+) | `Boolean` | 非必传,是否启动一起签功能,默认`false`。 |
| `customeTimeStampFormat` (2.0.5+) | `Function` | 非必传,自定义时间戳字符串。使用详情见下面说明。 |
| `hiddenToolbar` (2.0.5+) | `Boolean` | 隐藏顶部toolbar,默认`false`。 |
| `customSaveConfirmTitle` (2.0.5+) | `String` | 自定义保存确认弹窗标题。 |
| `customSaveConfirmContent` (2.0.5+) | `String` | 自定义保存确认弹窗内容。 |
| `defaultWriteColor` (2.0.5+) | `String` | 初始圈批笔迹颜色,默认`333333`,可选范围`#333333 灰、#1A1A1A 黑,#0D449B 蓝,#C41018 红`。 |
| `defaultWriteSize` (2.0.5+) | `Number` | 初始圈批笔迹粗度,可选范围`1-8`,默认`3`。 |
| `hideWritePenIcon` (2.0.5+) | `Boolean` | 隐藏圈批笔图标。默认:false |
*****
`signareas` 参数说明,Such As:
```js
[
{ page: 1, content: '甲方签字', height: '0.1', width: '0.4', x: '0.3', y: '0.4', id: 'sign1', type: 'signname' }
]
```
| 键(key) | 类型(type)| 说明(descript) |
| --- | --- |---|
| `page` | `Number` | 页码。页码从1开始计数。 |
| `content` | `String` | 提示字符串。|
| `width` | `String` | 签字域宽度 和 页面宽度 比例,转字符串。 |
| `height` | `String` | 签字域高度 和 页面高度 比例,转字符串。 |
| `x` | `String` | 签字域 x 和 页面 宽度 比例,转字符串。 |
| `y` | `String` | 签字域 y 和 页面 高度 比例,转字符串。 |
*****
`toolbars` 参数说明,合适的配置该字段可以替换、排序、移除、自定义底部按钮。按钮顺序按照数组顺序排列。默认值:
~~~js
[
{ name: 'write', title: '圈批', icon: 'ws-icon-fullwritecopy' },
{ name: 'save', title: '保存', icon: 'ws-icon-save' }
]
~~~
| 键(key) | 类型(type)| 说明(descript) |
| --- | --- |---|
| `name` | `String` | 名称,字母。[write(圈批), save(保存)。当使用[write(圈批), save(保存)] 会替换掉原有的按钮标题、图标。当命名为其他字段的时候会在缩放按钮左边添加上自定义的按钮,用户点击自定义的按钮会通过`On`事件的`tbBtnClick`回调方法回调`name` |
| `title` | `String` | 按钮的标题。|
| `icon` | `String` | 字体图标完整的`class`名称(阿里云字体图标库挺好用的 😄,[阿里云字体图标库]([https://www.iconfont.cn/collections/index]))。such as: 字体图标下载并引入到html后,`icon`参数可以命名为`iconfont icon-setting` |
*****
`objects` 参数说明,合适的配置该字段可以移除、自定义左边插入对象按钮按钮。默认值:
~~~js
[
{ name: 'text', title: '文本', icon: 'ws-icon-text' },
{ name: 'image', title: '图片', icon: 'ws-icon-pic' },
{ name: 'signname', title: '签字', icon: 'ws-icon-whiteboard1' }
]
~~~
| 键(key) | 类型(type)| 说明(descript) |
| --- | --- |---|
| `name` | `String` | 名称,字母。[text(文本), image(图片),signname(签字)]。当使用[text, imagem, signname] 会替换掉原有的按钮标题、图标。 |
| `title` | `String` | 按钮的标题。|
| `icon` | `String` | 字体图标完整的`class`名称(阿里云字体图标库挺好用的 😄,[阿里云字体图标库]([https://www.iconfont.cn/collections/index]))。such as: 字体图标下载并引入到html后,`icon`参数可以命名为`iconfont icon-setting` |
*****
`editLimit` 参数说明,配置本参数会限制本次签字插入对象的数量,`-1`为不做限制。such as:
~~~js
{
signname: 1, // 签名、签字域、签字,不能超过1个。
text: 2, // 文本,不能超过2个。
image: -1 // 图片,无限制。
}
~~~
*****
`deleteCallerIds` 可删除笔迹、文本、签批、图片的`callerId`数组,合理的配置本参数可以让用户删除文件上的笔迹信息。本数组中的`callerId`和`Init`方法的`callerId`参数相同时,将允许用户在验签界面中删除掉的笔迹等信息:
~~~js
[ 'ws', 'wellsign' ]
~~~
*****
`showSignseal` 是否显示签章。`true`的时候会在**签名列表**中支持签章功能。默认`false`
*****
`customeTimeStampFormat` 自定义签名时间戳字符串,需传入一个方法,方法返回时间字符串。
~~~js
ctx.Render({
...options,
customeTimeStampFormat: function () {
var time = new Date()
var year = time.getFullYear()
var mounth = time.getMonth() + 1
var day = time.getDay()
return year + '年' + mounth + '月' + day + '日'
}
})
~~~