drawingBoard

open save close hide show revoke restore clear resetBrush

概述

drawingBoard 原生插件是一个手写签名原生插件。开发者可自定义个固定宽高（w、h）的 “frame”，该 “frame” 即是可手写签名的背景透明的画板，可将此画板固定在指定的 frame 或 window 上，从而自定义出符合自己需求的各种 UI 效果的签名功能。

open

打开签名画板

open({params},callback(ret))

params

rect：

  • 类型：JSON 对象
  • 描述：（可选项）签名画板的位置及尺寸
  • 默认值：见内部字段
  • 内部字段：
{
    x: 0,                              //（可选项）数字类型；签名画板左上角的 X 坐标（相对于所属的 Window 或 Frame）；默认：0
    y: 0,                              //（可选项）数字类型；签名画板左上角的 Y 坐标（相对于所属的 Window 或 Frame）；默认：0
    w: 320,                            //（可选项）数字类型；签名画板的宽度；默认：所属的 Window 或 Frame 的宽度
    h: 300                             //（可选项）数字类型；签名画板的高度；默认：w-20
}

styles：

  • 类型：JSON 对象
  • 描述：画板画笔样式配置
  • 默认值：见内部字段
  • 内部字段：
{
    brush: {                  //（可选项）JSON对象；画笔配置
       color:'#ff0000',       //（可选项）字符串类型；画笔颜色，支持#、rgb、rgba；默认：#000
       width:6                //（可选项）数字类型；画笔粗细；默认：6.0；
    },
    bgColor: ''               //（可选项）字符串类型；画板背景色，支持#、rgb、rgba、img；默认：#fff
}

fixedOn：

  • 类型：字符串类型
  • 描述：（可选项）签名画板添加到指定 frame 的名字（只指 frame，传 window 无效）
  • 默认：原生插件依附于当前 window

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
   eventType:''//down:按下 up:松开
}
```)

## 示例代码


```js
var drawingBoard = api.require('drawingBoard');
drawingBoard.open({
    rect: {
        x: 0,
        y: 0,
        w: 320,
        h: 300
    },
    styles: {
        brush: {
            color: '#ff0000',
            width: 6
        },
        bgColor: '#ff0'
    },
    fixedOn: api.frameName
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

save

保存签名画板截图，截图大小（宽高：w、h）同 open 时传入的 rect 大小（宽高：w、h）

save({params}, callback(ret, err))

params

savePath：

  • 类型：字符串类型
  • 描述：保存图片路径，要求本地路径（fs://），iOS 平台不支持 widget 路径

copyToAlbum：

  • 类型：布尔类型
  • 描述：（可选项）是否将结果同时保存到系统相册
  • 默认：false

overlay：

  • 类型：布尔类型
  • 描述：（可选项）保存图片时，是否将背景一起保存
  • 默认：false

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
    absolutePath:       //字符串类型；图片保存到指定路径后的绝对路径，若保存失败则为该参数为 undefined
    albumPath:          //字符串类型；图片保存到相册后的绝对路径，若保存失败则该参数为 undefined
}

示例代码

var drawingBoard = api.require('drawingBoard');
drawingBoard.save({
    savePath: 'fs://drawingBoard/result.png',
    copyToAlbum: false
}, function(ret) {
    api.alert({
            msg: JSON.stringify(ret)
        })
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭签名画板

close()

示例代码

var drawingBoard = api.require('drawingBoard');
drawingBoard.close();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏签名画板

hide()

示例代码

var drawingBoard = api.require('drawingBoard');
drawingBoard.hide();

补充说明

隐藏已显示的签名画板，并没有从内存里清除

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的签名画板

show()

示例代码

var drawingBoard = api.require('drawingBoard');
drawingBoard.show();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

revoke

撤销最新画出的笔画线条

revoke()

示例代码

var drawingBoard = api.require('drawingBoard');
drawingBoard.revoke();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

restore

恢复刚撤销的笔画线条

restore()

示例代码

var drawingBoard = api.require('drawingBoard');
drawingBoard.restore();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

clear

清空画板上的所有笔画线条

clear()

示例代码

var drawingBoard = api.require('drawingBoard');
drawingBoard.clear();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

resetBrush

重设画笔样式

resetBrush({params})

params

color：

  • 类型：字符串
  • 描述：（可选项）画笔颜色，支持#、rgb、rgba
  • 默认值：原值

width：

  • 类型：数字
  • 描述：画笔粗细
  • 默认值：原值

示例代码

var drawingBoard = api.require('drawingBoard');
drawingBoard.resetBrush({
    color: '#696969',
    width: 10
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18