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 + '日' } }) ~~~