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){
api.alert({msg: 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){
api.alert({msg: 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){
api.alert({msg: 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){
api.alert({msg: 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及更高版本