maskView

固件要求

Android：4.1及以上 iOS：8.0及以上

模块接口

addEventListener

界面按钮监听

addEventListener(callback(ret))

callback(ret)

ret：

• 类型：JSON 对象
• 内部字段：

{
    status: true,      //布尔型；true||false
    index : -1, //返回被操作的遮罩式图序号id,全屏遮罩返回-1
    evenType : 'onOpened'//遮罩打开事件:onOpened
                    //单击事件:onSingleTapUp
                    //双击事件:onDoubleTap
                    //长按事件:onLongPress
                    //文字点击事件:onTextClick
                    //向左滑过事件:onMoveLeft
                    //向右滑过事件:onMoveRight
                    //向上滑过事件:onMoveUp
                    //向下滑过事件:onMoveDown
                    //图片点击事件:onImageClick
                    //图片双击事件:onImageDoubleTap
                    //图片长按事件:onImageLongPress
                    //图片向左滑过事件:onImageMoveLeft
                    //图片向右滑过事件:onImageMoveRight
                    //图片向上滑过事件:onImageMoveUp
                    //图片向下滑过事件:onImageMoveDown

    clickData:{...}//对应按钮或者文字的json内容。
}

示例代码

var demo = api.require('maskView');
demo.addEventListener(function(ret, err){
    alert(JSON.stringify(ret));
});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

openMaskView

打开遮罩视图

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

params

rect：

• 类型：JSON 对象
• 描述：（必填项）模块的位置及尺寸
• 内部字段：

{
    x: 0,   //（必填项）数字类型；模块左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认值：0
    y: 0,   //（必填项）数字类型；模块左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认值：0
    w: 320, //（必填项）数字类型；模块的宽度；默认值：手机屏幕的宽度
    h: 250  //（必填项）数字类型；模块的高度；默认值：手机屏幕的高度
}

fixedOn：

• 类型：字符串
• 描述：（可选项）模块所属 Frame 的名字，若不传则模块归属于当前 Window

fixed：

• 类型：布尔
• 描述：（可选项）模块是否随所属 Window 或 Frame 滚动
• 默认值：true（不随之滚动）

background：

• 类型：字符串型
• 描述：（可选项）遮罩背景色 如:#80addf。

alpha：

• 类型：数字型
• 描述：（可选项）遮罩背景色透明度(0-100)。
• 默认值：50

radius：

• 类型：字符串型
• 描述：（可选项）遮罩四个角的圆角。
• 默认值：0

cornerTopLeft：

• 类型：布尔型
• 描述：（可选项）左上角为圆角。
• 默认值：false

cornerTopRight：

• 类型：布尔型
• 描述：（可选项）右上角为圆角。
• 默认值：false

cornerBottomLeft：

• 类型：布尔型
• 描述：（可选项）右下角为圆角。
• 默认值：false

cornerBottomRight：

• 类型：布尔型
• 描述：（可选项）右下角为圆角。
• 默认值：false

animationType：

• 类型：字符串型
• 描述：（可选项）入场动画>0:无动画 1:从底部进入 2:从顶部进入 3:从右侧进入 4:从左侧进入。
• 默认值：0(无动画)

isBindPage：

• 类型：布尔
• 描述：（可选项）是否绑定 Window 或 Frame, 为true时就需要传 fixedOn and fixed 生效
• 默认值：false

styles：

• 类型：数组对象
• 描述：（必填项）视频播放列表（最少传入1条记录）。

[{
   type : 'image',// 按钮类型:image,text,autoText(跑马灯),seekBar
   x : 0, //按钮x坐标
   y : 0, //按钮y坐标
   w : 0, //按钮宽度
   h : 0, //按钮高度
   pic : 'widget://image/gif1.gif',//按钮图片路径;（支持路径fs:// widget:// 类型：png gif ）
   isRadius : false,//是否进行圆形图片按钮处理; 默认:false(仅image有效)
   lineColor : '',//设置描边颜色,默认无(仅image有效)
   imageType : 0,//设置图片渲染模式,0:不按比例缩放图片(图片会变形)，目标是把图片塞满整个View。1:按比例扩大图片的size居中显示，使得图片长(宽)等于或大于View的长(宽) 2:将图片的内容完整居中显示，通过按比例缩小或原来的size使得图片长/宽等于或小于View的长/宽
   isOpenGesture : false,//是否开启监听图片上面的事件监听
   text : '测试',//文本内容(仅text、autoText有效)
   textSize : 12, //字体大小(仅text、autoText有效)
   textColor : '',//字体颜色(仅text、autoText有效)
   gravity : 0,// 文字位置 0:center 1 : left 2 :right(仅text、autoText有效)
   name : '',按钮名称
   progress : 50,//进度值0-100(仅seekBar有效)
   leftColor : '#ff9966',//左边颜色(仅seekBar有效)
   rightColor : '#0099ff',//右边颜色(仅seekBar有效)
   backgroundColor : '#FFFFFF',//背景颜色(仅text、autoText有效)
   selectBackgroundColor : '#FFFFFF',//按住时背景颜色(仅text、autoText有效)
   radius : 0,//四个角的圆角像素(仅text、autoText有效)
   cornerTopLeft : true,//左上角为圆角(仅text、autoText有效)
   cornerTopRight : true,// 右上角为圆角(仅text、autoText有效)
   cornerBottomLeft : true,// 右下角为圆角(仅text、autoText有效)
   cornerBottomRight : true,// 右下角为圆角(仅text、autoText有效)
   isBold : true,//字体是否变粗(仅text、autoText有效)
}]

callback(ret,err)

ret：

• 类型：JSON 对象
• 内部字段：

{
    status : true,      //布尔型；true|false
    index : -1, //返回被操作的遮罩式图序号id,全屏遮罩返回-1
    evenType : 'onInit'//返回视图序号事件:onInit
                    //以下事件当不设置addEventListener接口时触发
                    //视图打开完成事件:onOpened
                    //单击事件:onSingleTapUp
                    //双击事件:onDoubleTap
                    //长按事件:onLongPress
                    //文字点击事件:onTextClick
                    //向左滑过事件:onMoveLeft
                    //向右滑过事件:onMoveRight
                    //向上滑过事件:onMoveUp
                    //向下滑过事件:onMoveDown
                    //图片点击事件:onImageClick
                    //图片双击事件:onImageDoubleTap
                    //图片长按事件:onImageLongPress
                    //图片向左滑过事件:onImageMoveLeft
                    //图片向右滑过事件:onImageMoveRight
                    //图片向上滑过事件:onImageMoveUp
                    //图片向下滑过事件:onImageMoveDown
    clickData:{...}//对应按钮或者文字的json内容。
}

err：

• 类型：JSON 对象
• 内部字段：

{
    msg : ''
}

示例代码

var demo = api.require('maskView');
var maskWidth =  api.winWidth - 40;
demo.openMaskView({
    rect: {
        x: 20,
        y: 150,
        h: 400,
        w: maskWidth,
    },
    background : '#80addf',
    alpha : 50,
    styles: [{
        x: 100,
        y: 200,
        w: 100,
        h: 20,
        type: 'autoText',
        text: '如果使用XIB，那么你要创建一个UIScrollView，然后更改它的Class类别为AutoScrollLabel,当文字不超过ScrollView的大小时不会滚动',
        textSize: 12,
        textColor : '#FF1493',
    },{
            x: maskWidth - 45,
            y: 0,
            w: 40,
            h: 40,
            type: 'image',
            pic: 'widget://image/refresh.png',
            lineColor: '#000000',
            isRadius : true
        }, {
            x: maskWidth - 45,
            y: 0 + 40,
            w: 40,
            h: 20,
            type: 'text',
            text: 'AA测1',
            textSize: 12,
            textColor : '#FF1493',
        }, {
            x: maskWidth - 45,
            y: 60 + 20,
            w: 40,
            h: 40,
            type: 'image',
            pic: 'widget://image/test_uz_icon.png',
            lineColor: '#000000',
            isRadius : true
        }, {
            x: maskWidth - 45,
            y: 80 + 40,
            w: 40,
            h: 20,
            type: 'text',
            text: '测2',
            textSize: 12,
            textColor : '#FF1493',
        }, {
            x: maskWidth - 45,
            y: 120 + 40,
            w: 40,
            h: 40,
            type: 'image',
            pic: 'widget://image/gif1.gif',
            isRadius : true
        }

        , {
            x: 30,
            y: 400 - 80,
            w: 20,
            h: 20,
            type: 'image',
            pic: 'widget://image/test_uz_icon.png'
        }, {
            x: 55,
            y: 400 - 80,
            w: 40,
            h: 20,
            type: 'text',
            text: '测3',
            textSize: 12,
            textColor : '#FF1493',
            gravity: 1, //0:center 1 : left 2 :right
        }, {
            x: 30,
            y: 400 - 50,
            w: 300,
            h: 60,
            type: 'text',
            text: '设置TextView文字居中,',
            textSize: 12,
            textColor : '#FF1493',
            gravity: 0, //0 中间 1 : left 2 :right
            vertical : 0,//0:top 1:middle 2:bottom (垂直) //zhaofei add 20200204
            isSingleLine: false
        }
    ]
}, function(ret, err){
    alert(JSON.stringify(ret));
});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

hideMaskView

隐藏遮罩样式

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

params

index：

• 类型：数字型
• 描述：（可选项）需要操作遮罩视图的序号id
• 默认值：-1(全局遮罩)

callback(ret, err)

ret：

• 类型：JSON 对象
• 内部字段：

{
    status: true,      //布尔型；true||false
}

err：

• 类型：JSON 对象
• 内部字段：

{
    msg : ''
}

示例代码

var demo = api.require('maskView');
demo.hideMaskView();

可用性

iOS、Android系统

可提供的1.0.0及更高版本

showMaskView

显示遮罩样式

showMaskView({params},callback(ret))

params

index：

• 类型：数字型
• 描述：（可选项）需要操作遮罩视图的序号id
• 默认值：-1(全局遮罩)

callback(ret)

ret：

• 类型：JSON 对象
• 内部字段：

{
    status: true,      //布尔型；true
}

示例代码

var demo = api.require('maskView');
demo.showMaskView(function(ret){
    alert(JSON.stringify(ret));
});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

closeMaskView

关闭遮罩样式

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

params

index：

• 类型：数字型
• 描述：（可选项）需要操作遮罩视图的序号id
• 默认值：-1(全局遮罩)

callback(ret, err)

ret：

• 类型：JSON 对象
• 内部字段：

{
    status: true,      //布尔型；true||false
}

err：

• 类型：JSON 对象
• 内部字段：

{
    msg : ''
}

示例代码

var demo = api.require('maskView');
demo.closeMaskView(function(ret, err){
    alert(JSON.stringify(ret));
});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

updateMaskStyle

更新当前遮罩样式

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

params

index：

• 类型：数字型
• 描述：（可选项）需要操作遮罩视图的序号id
• 默认值：-1(全局遮罩)

styles：

• 类型：数组 对象
• 描述：（必填项）当前播放器播放的按钮样式更新。

[{
   type : 'image',// 按钮类型:image,text,autoText(跑马灯),seekBar
   x : 0, //按钮x坐标
   y : 0, //按钮y坐标
   w : 0, //按钮宽度
   h : 0, //按钮高度
   pic : 'widget://image/gif1.gif',//按钮图片路径;（支持路径fs:// widget:// 类型：png gif ）
   isRadius : false,//是否进行圆形图片按钮处理; 默认:false(仅image有效)
   lineColor : '',//设置描边颜色,默认无(仅image有效)
   imageType : 0,//设置图片渲染模式,0:不按比例缩放图片(图片会变形)，目标是把图片塞满整个View。1:按比例扩大图片的size居中显示，使得图片长(宽)等于或大于View的长(宽) 2:将图片的内容完整居中显示，通过按比例缩小或原来的size使得图片长/宽等于或小于View的长/宽
   isOpenGesture : false,//是否开启监听图片上面的事件监听
   text : '测试',//文本内容(仅text、autoText有效)
   textSize : 12, //字体大小(仅text、autoText有效)
   textColor : '',//字体颜色(仅text、autoText有效)
   gravity : 0,// 文字位置 0:center 1 : left 2 :right(仅text、autoText有效)
   name : '',按钮名称
   progress : 50,//进度值0-100(仅seekBar有效)
   leftColor : '#ff9966',//左边颜色(仅seekBar有效)
   rightColor : '#0099ff',//右边颜色(仅seekBar有效)
   backgroundColor : '#FFFFFF',//背景颜色(仅text、autoText有效)
   selectBackgroundColor : '#FFFFFF',//按住时背景颜色(仅text、autoText有效)
   radius : 0,//四个角的圆角像素(仅text、autoText有效)
   cornerTopLeft : true,//左上角为圆角(仅text、autoText有效)
   cornerTopRight : true,// 右上角为圆角(仅text、autoText有效)
   cornerBottomLeft : true,// 右下角为圆角(仅text、autoText有效)
   cornerBottomRight : true,// 右下角为圆角(仅text、autoText有效)
   isBold : true,//字体是否变粗(仅text、autoText有效)
}]

callback(ret,err)

ret：

• 类型：JSON 对象
• 内部字段：

{
    status: true,      //布尔型；true|false
}

err：

• 类型：JSON 对象
• 内部字段：

{
    msg : ''
}

示例代码

var demo = api.require('maskView');
demo.updateMaskStyle({
    styles : [{
        x : api.frameWidth - 45,
        y : 0,
        w : 40,
        h : 40,
        type : 'image',
        pic : 'widget://image/refresh.png',
        lineColor : '#000000'
    },{
        x : api.frameWidth - 45,
        y : 0 + 40,
        w : 40,
        h : 20,
        type : 'text',
        text : '测1更新样式1',
        textSize : 12
    },{
        x : api.frameWidth - 45,
        y : 60 + 20,
        w : 40,
        h : 40,
        type : 'image',
        pic : 'widget://image/test_uz_icon.png',
        lineColor : '#000000'
    },{
        x : api.frameWidth - 45,
        y : 80 + 40,
        w : 40,
        h : 20,
        type : 'text',
        text : '测2更新样式2',
        textSize : 12
    },{
        x : api.frameWidth - 45,
        y : 120 + 40,
        w : 40,
        h : 40,
        type : 'image',
        pic : 'widget://image/gif1.gif',
    },{
        x : 0,
        y : 40,
        w : 100,
        h : 4,
        type : 'seekBar',
        progress : 80,
        leftColor : '#ff9966',
        rightColor : '#0099ff'
    }]
},function(ret,err){
    alert(JSON.stringify(ret,err));
});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

bringFrameToFront

把遮罩更新到指定的frame层级(id=-1无效)

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

params

index：

• 类型：数字型
• 描述：（可选项）需要操作遮罩视图的序号id
• 默认值：-1(全局遮罩)

fixedOn：

• 类型：字符串
• 描述：（可选项）模块所属 Frame 的名字，若不传则模块归属于当前 Window

fixed：

• 类型：布尔
• 描述：（可选项）模块是否随所属 Window 或 Frame 滚动
• 默认值：true（不随之滚动）

callback(ret,err)

ret：

• 类型：JSON 对象
• 内部字段：

{
    status: true,      //布尔型；true|false
}

err：

• 类型：JSON 对象
• 内部字段：

{
    msg : ''
}

示例代码

var demo = api.require('maskView');
demo.bringFrameToFront({
    index : 0,
    fixedOn : '',
},function(ret,err){
    alert(JSON.stringify(ret,err));
});

可用性

iOS、Android系统

可提供的1.0.0及更高版本