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及更高版本