API Reference

Plugins

Native.js


nativeObj

nativeObj管理系统原生对象。

对象:

回调方法:

模块:

5+功能模块(permissions)


{
// ...
"permissions":{
	// ...
	"NativeObj": {
		"description": "原生对象"
	}
}
}
			

AnimationOptions

原生动画参数


interface AnimationOptions {
	attribute String type;
	attribute Number duration;
}				

说明:

指定动画的类型、持续时间等信息。

属性:

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
var bitmap1=null,bitmap2=null;
// H5 plus事件处理
function plusReady(){
	bitmap1 = new plus.nativeObj.Bitmap('bmp1');
	bitmap1.load('bmp1.png',function(){
		console.log('bmp1.png load success!');
	},function(e){
		console.log('bmp1.png load failed! '+JSON.stringify(e));
	});
	bitmap2 = new plus.nativeObj.Bitmap('bmp2');
	bitmap2.load('bmp2.png',function(){
		console.log('bmp2.png load success!');
	},function(e){
		console.log('bmp2.png load failed! '+JSON.stringify(e));
	});
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 原生动画
function nativeAnimation(){
	// 开始动画
	var options = {type:'pop-out',duration:1000};
	plus.nativeObj.View.startAnimation(options,{bitmap:bitmap1},{bitmap:bitmap2},function(){
		console.log('plus.nativeObj.View.startAnimation动画结束');
		// 关闭原生动画
		plus.nativeObj.View.clearAnimation();
	});
}
		</script>
	</head>
	<body>
		<button onclick="nativeAnimation()">原生窗口动画</button><br/>
	</body>
</html>
			

AnimationViewStyles

原生动画窗口样式


interface AnimationViewStyles {
	attribute Bitmap bitmap;
	attribute String text;
}				

说明:

指定动画窗口的样式,如背景图片,绘制的文字等。

属性:

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
var bitmap1=null,bitmap2=null;
// H5 plus事件处理
function plusReady(){
	bitmap1 = new plus.nativeObj.Bitmap('bmp1');
	bitmap1.load('bmp1.png',function(){
		console.log('bmp1.png load success!');
	},function(e){
		console.log('bmp1.png load failed! '+JSON.stringify(e));
	});
	bitmap2 = new plus.nativeObj.Bitmap('bmp2');
	bitmap2.load('bmp2.png',function(){
		console.log('bmp2.png load success!');
	},function(e){
		console.log('bmp2.png load failed! '+JSON.stringify(e));
	});
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 原生动画
function nativeAnimation(){
	// 开始动画
	var view = {bitmap:bitmap1,text:'主窗口',textStyles:{size:'28px',color:'#FF0000'},textRect:{top:'0px',left:'0px',width:'100%',height:'100px'}};
	var other = {bitmap:bitmap1,text:'副窗口',textStyles:{size:'22px',color:'#00FF00'},textRect:{top:'0px',left:'0px',width:'100%',height:'44px'}};
	plus.nativeObj.View.startAnimation( {type:'pop-in'},view,other,function(){
		console.log('plus.nativeObj.View.startAnimation动画结束');
		// 关闭原生动画
		plus.nativeObj.View.clearAnimation();
	});
}
		</script>
	</head>
	<body>
		<button onclick="nativeAnimation()">原生窗口动画</button><br/>
	</body>
</html>
				

Bitmap

原生图片对象


interface Bitmap {
	readonly attribute String id;

	static function Array[Bitmap] getItems();
	static function Bitmap getBitmapById( id );
	
	function void clear();
	function void load( path, successCallback, errorCallback );
	function void loadBase64Data( data, successCallback, errorCallback );
	function void save( path, options, successCallback, errorCallback );
	function String toBase64Data();
}				

说明:

原生图片对象会占用较大的内存资源,在使用时需谨慎管理,当图片不再使用时应该及时调用clear方法进行销毁。

构造:

属性:

方法:

Bitmap(id, path)

创建Bitmap对象


var bitmap = new plus.nativeObj.Bitmap(id, path);
						

说明:

创建后为空Bitmap对象,需要调用Webview对象的draw方法更新,或者调用load/loadBase64Data方法加载图片。

参数:

返回值:

Bitmap : Bitmap图片对象

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
var wc=null,bitmap=null;
// H5 plus事件处理
function plusReady(){
	wc = plus.webview.currentWebview();
	bitmap = new plus.nativeObj.Bitmap("test");
	// 将webview内容绘制到Bitmap对象中
	wc.draw(bitmap,function(){
		console.log('绘制图片成功');
	},function(e){
		console.log('绘制图片失败:'+JSON.stringify(e));
	});
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
		</script>
	</head>
	<body>
		创建Bitmap对象<br/>
	</body>
</html>
						

id

Bitmap对象的标识

说明:

String 类型 只读属性

在创建Bitmap对象时设置,如果没有设置标识,此属性值为null。

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
	var bitmap = new plus.nativeObj.Bitmap("test");
	// ...
	console.log( bitmap.id ); // 输出"test"
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
		</script>
	</head>
	<body>
		Bitmap对象的标识<br/>
	</body>
</html>
						

getItems

静态方法,获取所有Bitmap图片对象


						
Array[Bitmap] plus.nativeObj.Bitmap.getItems();
						
						

说明:

获取应用运行期创建的所有Bitmap图片对象,包含所有空Bitmap对象,不包含已经销毁的Bitmap对象。返回的Bitmap对象在数组中按创建的属性排列,及数组中第一个是最先创建的Bitmap对象。

参数:

返回值:

Array[ Bitmap ] : 应用中创建的所有Bitmap图片对象数组。

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
	// 获取所有Bitmap对象
	var bitmaps=plus.nativeObj.Bitmap.getItems();
	for(var i=0;i<bitmaps.length;i++){
		console.log("Bitmap"+i+": "+bitmaps[i].id);
	}
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
		</script>
	</head>
	<body>
		获取所有Bitmap图片对象<br/>
	</body>
</html>
						

getBitmapById

静态方法,获取指定标识的Bitmap图片对象


Bitmap plus.nativeObj.Bitmap.getBitmapById( id );
						

说明:

在应用中已创建的图片对象中查找指定标识的Bitmap对象并返回。 若存在多个相同标识的Bitmap图片,则返回第一个创建的Bitmap图片。

参数:

返回值:

Bitmap : Bitmap图片对象,若没有查找到指定标识的图片对象则返回null。

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
	wc = plus.webview.currentWebview();
	bitmap = new plus.nativeObj.Bitmap("test");
	// 将webview内容绘制到Bitmap对象中
	wc.draw(bitmap,function(){
		console.log('绘制图片成功');
	},function(e){
		console.log('绘制图片失败:'+JSON.stringify(e));
	});
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 查找Bitmap对象
function findBitmap(){
	var bitmap = plus.nativeObj.Bitmap.getBitmapById("test");
	if(bitmap){
		console.log("Success: "+bitmap.id);
	}else{
		console.log("Can't find bitmap");
	}
}
		</script>
	</head>
	<body>
		获取指定标识的Bitmap图片对象<br/>
		<button onclick="findBitmap()">Find</button>
	</body>
</html>
						

clear

销毁Bitmap图片


						
void bitmap.clear();
						
						

说明:

释放Bitmap图片占用的内存资源,销毁后图片对象将不可使用,其id属性值为undefined,调用其所有方法操作都会失败。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
var wc=null,bitmap=null;
// H5 plus事件处理
function plusReady(){
	wc = plus.webview.currentWebview();
	bitmap = new plus.nativeObj.Bitmap("test");
	// 将webview内容绘制到Bitmap对象中
	wc.draw(bitmap,function(){
		console.log('绘制图片成功');
	},function(e){
		console.log('绘制图片失败:'+JSON.stringify(e));
	});
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 销毁Bitmap图片
function clearBitmap(){
	bitmap.clear();
}
		</script>
	</head>
	<body>
		销毁Bitmap图片<br/>
		<button onclick="clearBitmap()">Clear</button>
	</body>
</html>
						

load

加载Bitmap图片


						
void bitmap.load( path, successCallback, errorCallback );
						
						

说明:

从指定的路径(仅支持本地文件系统)中加载图片,此操作将覆盖之前的图片内容, 如果加载图片失败则保留之前的图片内容。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
	var bitmap = new plus.nativeObj.Bitmap("test");
	// 从本地加载Bitmap图片
	bitmap.load('icon.png',function(){
		console.log('加载图片成功');
	},function(e){
		console.log('加载图片失败:'+JSON.stringify(e));
	});
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
		</script>
	</head>
	<body>
		加载Bitmap图片<br/>
	</body>
</html>
						

loadBase64Data

加载Base64编码格式图片到Bitmap对象


						
void bitmap.loadBase64Data( data, successCallback, errorCallback );
						
						

说明:

从Base64编码格式图片数据中加载图片,此操作将覆盖之前的图片内容, 如果加载图片失败则保留之前的图片内容。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
var bitmap=null;
// H5 plus事件处理
function plusReady(){
	bitmap = new plus.nativeObj.Bitmap("test");
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
		</script>
	</head>
	<body>
		加载Base64编码格式图片到Bitmap对象<br/>
		<button onclick="loadDataImage()">LoadBase64Data</button><br/>
		<canvas id="cimg"></canvas><br/>
	</body>
	<script type="text/javascript">
// 获取图片的base64格式数据
var data = null;
var img = new Image();
img.onload = function(){
	var cx = cimg.getContext('2d');
	cimg.width = img.width;
	cimg.height = img.height;
	cx.drawImage( img, 0, 0 );
	data = cimg.toDataURL();
}
img.src = 'logo.png';
// 加载Base64编码格式图片到Bitmap对象
function loadDataImage(){
	bitmap.loadBase64Data( data, function(){
		console.log("加载Base64图片数据成功");
	}, function(){
		console.log('加载Base64图片数据失败:'+JSON.stringify(e));
	} );
}
	</script>
</html>
						

recycle

回收Bitmap图片内存


						
void bitmap.recycle();
						
						

说明:

释放Bitmap图片占用的内存资源,但不销毁图片对象,依然可以继续使用图片对象。 当图片对象再次被使用时会自动从设置的路径(构造函数或load/save方法设置)加载到内存中。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
var wc=null,bitmap=null;
// H5 plus事件处理
function plusReady(){
	wc = plus.webview.currentWebview();
	bitmap = new plus.nativeObj.Bitmap("test","_www/bimap/capture.png");
	// 将webview内容绘制到Bitmap对象中
	wc.draw(bitmap,function(){
		console.log('绘制图片成功');
		bitmap.save("_www/bimap/capture.png");
	},function(e){
		console.log('绘制图片失败:'+JSON.stringify(e));
	});
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 回收Bitmap图片
function recycleBitmap(){
	bitmap.recycle();
}
		</script>
	</head>
	<body>
		销毁Bitmap图片<br/>
		<button onclick="clearBitmap()">Recycle</button>
	</body>
</html>
						

save

保存图片


						
void bitmap.save( path, options, successCallback, errorCallback );
						
						

说明:

将图片保存到指定的路径(仅支持本地文件系统),如果图片为空或者指定的路径文件已经存在则返回失败。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
var wc=null,bitmap=null;
// H5 plus事件处理
function plusReady(){
	wc = plus.webview.currentWebview();
	bitmap = new plus.nativeObj.Bitmap("test");
	// 将webview内容绘制到Bitmap对象中
	wc.draw(bitmap,function(){
		console.log('绘制图片成功');
	},function(e){
		console.log('绘制图片失败:'+JSON.stringify(e));
	});
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 保存图片
function saveBitmap(){
	bitmap.save( "_doc/a.jpg"
	,{}
	,function(i){
		console.log('保存图片成功:'+JSON.stringify(i));
	}
	,function(e){
		console.log('保存图片失败:'+JSON.stringify(e));
	});
}
		</script>
	</head>
	<body>
		保存图片<br/>
		<button onclick="saveBitmap()">Save</button>
	</body>
</html>
						

toBase64Data

获取图片的Base64编码数据


						
String bitmap.toBase64Data();
						
						

说明:

读取图片的数据内容,并转换为Base64编码格式字符串。

参数:

返回值:

String : 图片的Base64编码数据,如果图片为空则返回null。

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
var bitmap = null,wi=null;
// H5 plus事件处理
function plusReady(){
	// 获取首页Webview窗口
	wi = plus.webview.getLaunchWebview();
	// 创建Bitmap对象
	bitmap = new plus.nativeObj.Bitmap("test");
	// 将首页Webview窗口截图保存到Bitmap中
	wi.draw( bitmap, function(){
		console.log("截图成功");
	}, function(e){
		console.log("截图失败:"+JSON.stringify(e));
	} );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 获取图片的Base64编码数据
function base64Image(){
	var img=document.getElementById("img");
	img.src = bitmap.toBase64Data();
}
		</script>
	</head>
	<body>
		获取图片的Base64编码数据<br/>
		<button onclick="base64Image()">Base64Data</button><br/>
		<img id="img"></img>
	</body>
</html>
						

BitmapSaveOptions

JSON对象,保存图片的参数


interface BitmapSaveOptions {
	attribute Boolean overwrite;
	attribute String format;
	attribute Number quality;
	attribute Rect clip;
}				

属性:

ImageSlider

原生图片轮播控件对象


interface ImageSlider extends View {
	function void addImages(images);
	function Number currentImageIndex();
	function void setImages(images);
}
				

说明:

原生图片轮播控件对象从原生View控件(plus.nativeObj.View)继承而来,用于绘制图片轮播内容。

构造:

方法:

ImageSlider(id, styles, tags)

创建图片轮播控件对象


var view = new plus.nativeObj.ImageSlider(id, styles, tags);
						

说明:

与原生View控件一样,创建后需要调用show方法显示,或者添加到Webview中显示。

参数:

返回值:

ImageSlider : 原生图片轮播控件

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
var view=null;
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener('plusready', plusReady, false);
}
// 创建原生View控件
function createView(){
	view = new plus.nativeObj.ImageSlider('test',
	{top:'100px',left:'0px',height:'200px',width:'100%',position:'absolute',images:[{src:'1.png'},{src:'2.png'},{src:'3.png'}]});
	plus.webview.currentWebview().append(view);
}
		</script>
	</head>
	<body>
		创建图片轮播控件,添加到Webview窗口显示<br/>
		<button onclick="createView()">创建图片轮播控件</button><br/>
	</body>
</html>
						

addImages

添加图片轮播控件的图片


void slider.addImages(images);
						

说明:

动态添加图片轮播控件显示的图片。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 创建原生图片轮播控件
var view=null;
function createView(){
	view = new plus.nativeObj.ImageSliderView('test',{top:'200px',left:'0px',height:'50%',width:'100%',images:[{src:'1.png'},{src:'2.png'},{src:'3.png'}]});
	// 直接显示
	view.show();
}
// 添加原生图片轮播控件上显示的图片
function updateView(){
	view.addImages([{src:'4.png'},{src:'5.png'}]);
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建图片轮播对象</button><br/>
		<button onclick="updateView()">添加图片</button>
	</body>
</html>
						

currentImageIndex()

获取当前图片轮播控件显示的图片索引值


Number slider.currentImageIndexs();
						

说明:

索引值从0开始,即0表示图片轮播控件当前显示第一张图片。

参数:

返回值:

Number : 当前图片轮播控件显示的图片索引值

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 创建原生图片轮播控件
var view=null;
var images=[{src:'1.png'},{src:'2.png'},{src:'3.png'}];
function createView(){
	view = new plus.nativeObj.ImageSliderView('test',{top:'200px',left:'0px',height:'50%',width:'100%',images:images});
	// 直接显示
	view.show();
}
// 获取当前显示的图片
function currentImage(){
	var index = view.currentImageIndex();
	var currentImage = images[index];
	console.log('Current image: '+currentImage.src);
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建图片轮播对象</button><br/>
		<button onclick="currentImage()">获取当前显示的图片</button>
	</body>
</html>
						

setImages

设置图片轮播控件的图片


void slider.setImages(images);
						

说明:

动态更新图片轮播控件显示的图片。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 创建原生图片轮播控件
var view=null;
function createView(){
	view = new plus.nativeObj.ImageSliderView('test',{top:'200px',left:'0px',height:'50%',width:'100%',images:[{src:'1.png'},{src:'2.png'},{src:'3.png'}]});
	// 直接显示
	view.show();
}
// 更新原生图片轮播控件
function updateView(){
	view.setImages([{src:'4.png'},{src:'5.png'}]);
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建图片轮播对象</button><br/>
		<button onclick="updateView()">更新图片轮播对象</button>
	</body>
</html>
						

ImageSliderStyles

图片轮播控件样式


interface ImageSliderStyles extends ViewStyles {
	attribute Array<ImageSliderImageStyles> images;
	attribute Boolean loop;
	attribute Boolean fullscreen;
}				

说明:

从ViewStyles继承而来,扩展支持轮播图片等配置。

属性:

ImageSliderImageStyles

图片轮播控件中图片项配置参数

说明:

用于指定图片地址等信息。

属性:

Rect

区域信息对象


interface Rect {
	attribute String top;
	attribute String left;
	attribute String width;
	attribute String height;
}				

说明:

包括位置、大小等信息。

属性:

RectStyles

绘制区域样式对象


interface RectStyles {
	attribute String color;
	attribute String radius;
	attribute String strokeColor;
	attribute String strokeWidth;
	attribute String style;
}				

说明:

用于定义矩形区域的显示样式,如空心/实心样式、圆角等信息。

属性:

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener('plusready', plusReady, false);
}
// 创建原生View控件
function createView(){
	var view = new plus.nativeObj.View('test', {top:'200px',left:'0px',height:'44px',width:'100%'});
	// 绘制空心圆角矩形
	view.drawRect({color:'#FF0000',strokeWideh:'2px',radius:'5px',style:'stroke'},
		{top:'0px',left:'0px',width:'100%',height:'100%'});
	view.show();
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建View对象</button><br/>
	</body>
</html>
				

RichTextStyles

富文本样式


interface RichTextStyles{
	attribute String align;
	attribute String family;
	attribute String fontSrc;
}
				

说明:

用于定义富文本使用的默认使用的字体名称、字体文件路径等信息。

属性:

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener('plusready', plusReady, false);
}
// 创建原生View控件
function createView(){
	var view = new plus.nativeObj.View('test',{top:'0px',left:'0px',height:'44px',width:'100%'});
	var richtext = '<font color="#FF0000" style="font-size:10px;">文本</font><br/><a href="" style="font-size:12px;">链接</a><br/><img src="./t.png" width="20px" height="20px"></img>';
	// 绘制文本
	view.drawText(richtext, {top:'0px',left:'0px',width:'100%',height:'wrap_content'}, {family:'Times New Roman',fontSrc:'_www/font.ttf'});
	view.show();
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建View对象</button><br/>
	</body>
</html>
				

Position

区域信息对象


interface Position {
	attribute String top;
	attribute String left;
	attribute String width;
	attribute String height;
	attribute String bottom;
	attribute String right;
}				

说明:

包括位置、大小等信息。

属性:

示例:


<!DOCTYPE html>
<html>
	<head>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
var wc=null;
var bitmap=null; // 返回图标
// H5 plus事件处理
function plusReady(){
	wc=plus.webview.currentWebview();
	plus.key.addEventListener('backbutton', function(){
		nv&&!bChild?(nv.close(),nv=null):plus.runtime.quit();
	}, false);
	
	var bdata = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABYCAYAAAADWlKCAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAKwwAACsMBNCkkqwAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOS8xMi8xM5w+I3MAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAACcklEQVR4nO3a0XESURiG4TeO99iBWoGZ+RvADtKBpAPtwBLsANJBrEAs4MyYDmIHSQXkgk0mMLK7ILt8/+F778ici394OGfDsher1Qqn05tTD+A2M4hYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYb089wNCVUq6Ay+blfUQsTjhOZxc1P9tbSlkAX7b+/C0ifpxgnF5Ve2TtwAD4OvIoe1UlSAsGwPsRR9m76kA6MAD+jjTKQVUF0gMD4HaEUQ6umot6T4ybiJgNP83hVbFDasGACnZIT4yfEXE1wjj/Xeod0hPjDpgNPsyRSguyB8Y0Ih6Gn+g4pQSpFQMSgtSMAclAaseARCDngAFJQM4FAxKAnBMGiH8xLKVMgV89ln6MiPthpxkn6R0SEUvgusfSZSnlsnuZftI75LlSygyYdyx7ZH1s/Rl+ouFKAQIvx9ctMGlZlh4lDQhAcywtqRhF+hqyXfMmT1m/6buasL6mzMaY6dilAoENlLuWZRNgnhEl1ZH1ulLKO9bH16eOpdfqz2K9Lt0Oea75EjilfadAsp2SFgQ2UH53LJ2XUr4PPtARSntkbVfL7+rVgEBvlM/NHQDJUh9Z2zWf/puOZbPhJzm8qkDgBaXt/teHcSY5rOpAAJp/c/vclJSrShDYifKI+NPvVV3U/1VzU3LavFyo/25SPUi2qj2ysmYQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsZ4Ak9fPFwUy/HsAAAAASUVORK5CYII=';
	bitmap = new plus.nativeObj.Bitmap('back');
	bitmap.loadBase64Data(bdata, function(){
		bitmap.isLoadSuccess = true;
		console.log('Back bitmap load success');
	}, function(e){
		console.log('Back bitmap load failed: '+JSON.stringify(e));
	});
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener('plusready',plusReady,false);
}
var nv=null;
// 创建原生View控件
function creatView(){
	nv=nv||new plus.nativeObj.View('test', {top:'100px',bottom:'0px'}, [
		{id:'background', tag:'rect', position:{}, color:'#FFFFFF'},
		{id:'rect1', tag:'rect', position:{left:'0px',right:'100px',height:'100px'}, color:'#FF0000'},
		{id:'back1', tag:'img', src:bitmap, position:{right:'0px',width:'50px',height:'44px'}},
		{id:'font1', tag:'font', position:{left:'0px',right:'100px',height:'100px'}, text:'初始文字', textStyles:{color:'#00FF00',size:'50px'}}
	]);
	
	// 绘制底部区域
	nv.drawRect('#FF0000', {left:'100px',right:'100px',bottom:'0px',height:'100px'}, 'rect2');
	nv.drawBitmap(bitmap, {}, {bottom:'0px',width:'50px',height:'44px'}, 'back2');
	nv.drawText('底部文本内容', {bottom:'0px',height:'100px'}, {color:'#00FF00'}, 'font2');
	
	nv.show();
}
		</script>
	</head>
	<body style="background:#0000FF;">
		使用bottom属性定位绘制内容<br/>
		<button onclick="creatView()">显示</button>
	</body>
</html>
				

TextStyles

绘制文本样式对象


interface TextStyles {
	attribute String align;
	attribute String color;
	attribute String family;
	attribute String size;
	attribute String style;
	attribute String weight;
	attribute String fontSrc;
	attribute String overflow;
}				

说明:

用于定义文本的显示样式,如字体大小、字体颜色、字体粗细、字体样式、字体名称等信息。

属性:

View

原生控件对象


interface View {
	readonly attribute String id;

	static function void startAnimation(options, view, otherview, callback);
	static function void clearAnimation(type);
	static function View getViewById(id);

	function void addEventListener(event, listener, capture);
	function void animate(options, callback);
	function void close();
	function void clearRect(position, id);
	function void draw(tags);
	function void drawBitmap(src, sprite, position, id);
	function void drawRect(color, position, id);
	function void drawText(text, position, styles, id);
	function void drawRechText(text, position, styles, id);
	function void reset();
	function void restore();
	function void show();
	function void setStyle(styles);
	function void setTouchEventRect(rect);
	function void hide();
	function void interceptTouchEvent(intercept);
	function Boolean isVisible();
}
				

说明:

原生控件对象可用于在屏幕上绘制图片或文本内容,当控件不再使用时需要调用close方法销毁控件。

构造:

属性:

方法:

View(id, styles, tags)

创建View对象


var view = new plus.nativeObj.View(id, styles, tags);
						

说明:

创建后View对象后,需要调用View对象的show方法显示。 默认显示为无内容样式(背景透明),需要调用drawBitmap/drawText方法更新控件显示的内容。

参数:

返回值:

View : 原生View控件

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
var view=null;
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 创建原生View控件
function createView(){
	view = new plus.nativeObj.View('test',
	{top:'0px',left:'0px',height:'44px',width:'100%'},
	[{tag:'img',id:'img',src:'nbg.png',position:{top:'0px',left:'0px',width:'100%',height:'100%'}},
	{tag:'rect',id:'rect',color:'#FF0000',position:{top:'0px',left:'0px',width:'100%',height:'1px'}},
	{tag:'font',id:'font',text:'原生控件',textStyles:{size:'18px'}}
	]);
	view.show();
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建View对象</button><br/>
	</body>
</html>
						

id

View对象的标识

说明:

String 类型 只读属性

在创建原生控件View对象时设置,如果没有设置标识,此属性值为null。

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
	var view = new plus.nativeObj.View("test");
	// ...
	console.log( view.id ); // 输出"test"
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
		</script>
	</head>
	<body>
		View对象的标识<br/>
	</body>
</html>
						

startAnimation

静态方法,开始原生动画


	void plus.nativeObj.View.startAnimation(options, view, otherview, callback);
						

说明:

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
var bitmap1=null,bitmap2=null;
// H5 plus事件处理
function plusReady(){
	bitmap1 = new plus.nativeObj.Bitmap('bmp1');
	bitmap1.load('bmp1.png',function(){
		console.log('bmp1.png load success!');
	},function(e){
		console.log('bmp1.png load failed! '+JSON.stringify(e));
	});
	bitmap2 = new plus.nativeObj.Bitmap('bmp2');
	bitmap2.load('bmp2.png',function(){
		console.log('bmp2.png load success!');
	},function(e){
		console.log('bmp2.png load failed! '+JSON.stringify(e));
	});
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 原生动画
function nativeAnimation(){
	// 开始动画
	plus.nativeObj.View.startAnimation( {type:'pop-in'},{bitmap:bitmap1},{bitmap:bitmap2},function(){
		console.log('plus.nativeObj.View.startAnimation动画结束');
		// 关闭原生动画
		plus.nativeObj.View.clearAnimation();
	});
}
// 释放图片
function clearBitmap(){
	bitmap1.clear();
	bitmap2.clear();
	bitmap1=bitmap2=null;
}
		</script>
	</head>
	<body>
		<button onclick="nativeAnimation()">原生窗口动画</button><br/>
		<button onclick="clearBitmap()">释放图片资源</button><br/>
	</body>
</html>
						

clearAnimation

静态方法,关闭原生动画窗口


	void plus.nativeObj.View.clearAnimation(type);
						

说明:

通过plus.nativeObj.View.startAnimation方法开始原生动画后,不会自动关闭原生动画窗口对象,需要调用此方法关闭原生动画。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
var bitmap1=null,bitmap2=null;
// H5 plus事件处理
function plusReady(){
	bitmap1 = new plus.nativeObj.Bitmap('bmp1');
	bitmap1.load('bmp1.png',function(){
		console.log('bmp1.png load success!');
	},function(e){
		console.log('bmp1.png load failed! '+JSON.stringify(e));
	});
	bitmap2 = new plus.nativeObj.Bitmap('bmp2');
	bitmap2.load('bmp2.png',function(){
		console.log('bmp2.png load success!');
	},function(e){
		console.log('bmp2.png load failed! '+JSON.stringify(e));
	});
}
// 原生动画
function nativeAnimation(){
	// 开始动画
	plus.nativeObj.View.startAnimation( {type:'pop-in'},{bitmap:bitmap1},{bitmap:bitmap2},function(){
		console.log('plus.nativeObj.View.startAnimation动画结束');
		// 延时500ms关闭原生动画
		setTimeout(funciton(){
			plus.nativeObj.View.clearAnimation();
		}, 500);
	});
}
// 释放图片
function clearBitmap(){
	bitmap1.clear();
	bitmap2.clear();
	bitmap1=bitmap2=null;
}
		</script>
	</head>
	<body>
		<button onclick="nativeAnimation()">原生窗口动画</button><br/>
		<button onclick="clearBitmap()">释放图片资源</button><br/>
	</body>
</html>
						

getViewById

静态方法,获取指定标识的View控件对象


View plus.nativeObj.View.getViewById(id);
						

说明:

如果存在多个指定id标识的View对象,则返回第一个创建的View控件对象。 如果不存在指定id标识的View对象,则返回null。

参数:

返回值:

View : View控件对象,若没有查找到指定标识的控件对象则返回null。

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 创建原生View控件
function createView(){
	var view = new plus.nativeObj.View('test',{top:'0px',left:'0px',height:'44px',width:'100%'});
	// ...
	view.show();
	plus.nativeUI.toast('创建原生View控件成功');
}
// 查找View控件
function getView(){
	var view = plus.nativeObj.View.getViewById('test');
	if(view){
		console.log("查找到id为'test'的View控件对象");
		alert("查找到id为'test'的View控件对象");
	}else{
		console.log("未查找到id为'test'的View控件对象,请先创建");
		alert("未查找到id为'test'的View控件对象,请先创建");
	}
}
// 关闭View控件
function closeView(){
	var view = plus.nativeObj.View.getViewById('test');
	view.close();
	plus.nativeUI.toast('销毁View控件成功');
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建View控件</button><br/>
		<button onclick="getView()">查找View控件</button><br/>
		<button onclick="closeView()">关闭View控件</button><br/>
	</body>
</html>
						

addEventListener

添加事件监听器


void view.addEventListener(event, listener, capture);
						

说明:

向View控件添加事件监听器,当指定的事件发生时,将触发listener函数的执行。 可多次调用此方法向Webview添加多个监听器,当监听的事件发生时,将按照添加的先后顺序执行。 可通过setTouchEventRect方法指定监听触屏操作的区域。 注意:默认View控件拦截处理触屏事件,可调用view.interceptTouchEvent(false)改变为不拦截处理触屏事件(透传)。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
var view = null;
// 创建原生View控件
function createView(){
	view = new plus.nativeObj.View('test',{top:'200px',left:'0px',height:'60px',width:'100%'});
	// 绘制文本
	view.drawText('原生绘制的文本内容', {}, {size:'60px',color:'#FF0000'});
	view.show();
	plus.nativeUI.toast('创建成功');
}
// 监听原生View控件click事件
function addEventView(){
	view.addEventListener("click", onClick, false);
}
// 监听事件函数
function onClick(e){
	console.log("点击原生控件:"+JSON.stringify(e));
	var clientX = e.clientX;	// 在View控件中的X坐标
	var clientY = e.clientY;	// 在View控件中的Y坐标
	var pageX = e.pageX;		// 在当前Webview窗口(运行此脚本的窗口)中的X坐标
	var pageY = e.pageY;		// 在当前Webview窗口(运行此脚本的窗口)中的Y坐标
	var screenX = e.screenX;	// 在屏幕中的X坐标
	var screenY = e.screenY;	// 在屏幕中的Y坐标
	var target = e.target;		// View控件对象
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建View控件</button><br/>
		<button onclick="addEventView()">监听原生View控件click事件</button><br/>
	</body>
</html>
						

animate

View控件内容动画


void view.animate(options, callback);
						

说明:

动画后可能会导致View控件显示内容改变,可通过调用restore方法恢复。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
var bitmap1=null,bitmap2=null;
// H5 plus事件处理
function plusReady(){
	bitmap1 = new plus.nativeObj.Bitmap('bmp1');
	bitmap1.load('bmp1.png',function(){
		console.log('bmp1.png load success!');
	},function(e){
		console.log('bmp1.png load failed! '+JSON.stringify(e));
	});
	bitmap2 = new plus.nativeObj.Bitmap('bmp2');
	bitmap2.load('bmp2.png',function(){
		console.log('bmp2.png load success!');
	},function(e){
		console.log('bmp2.png load failed! '+JSON.stringify(e));
	});
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 原生动画
function nativeAnimation(){
	var view = new plus.nativeObj.View('test',{top:'0px',left:'0px',height:'100%',width:'100%'});
	// 绘制图片
	view.drawBitmap( bitmap2, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'auto',left:'auto',width:'100%',height:'100%'} );
	// 开始动画
	plus.nativeObj.View.startAnimation( {type:'pop-in'},{bitmap:bitmap1},view,function(){
		console.log('plus.nativeObj.View.startAnimation动画结束');
		// 开始view控件动画
		view.animate({type:'shrink',frames:20,region:{top:'44px',bottom:'48px'}},function(){
			plus.nativeObj.View.clearAnimation();
		});
	});
}
		</script>
	</head>
	<body>
		<button onclick="nativeAnimation()">原生窗口动画&amp;View控件动画</button><br/>
	</body>
</html>
					

close

关闭View控件


void view.close();
						

说明:

释放View控件资源,View对象不可再操作,如果View控件已经显示则自动隐藏。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
var view = null;
// 创建原生View控件
function createView(){
	view = new plus.nativeObj.View('test',{top:'200px',left:'0px',height:'60px',width:'100%'});
	// 绘制文本
	view.drawText('原生绘制的文本内容', {}, {size:'60px',color:'#FF0000'});
	view.show();
}
// 关闭原生View控件
function closeView(){
	view.close();
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建View对象</button><br/>
		<button onclick="closeView()">关闭View对象</button><br/>
	</body>
</html>
						

clearRect

清空矩形区域


void view.clearRect(position, id);
						

说明:

清除指定矩形区域内容,透明显示其后面的内容。 可多次调用设置多个区域透明。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 创建原生View控件
function createView(){
	var view = new plus.nativeObj.View('test',{top:'200px',left:'0px',height:'44px',width:'100%'});
	// 绘制矩形
	view.drawRect("#FF0000", {top:'0px',left:'0px',width:'100%',height:'100%'});
	// 清空矩形区域
	view.clearRect({top:'11px',left:'100px',width:'100px',height:'22px'});
	view.show();
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建View对象</button><br/>
	</body>
</html>
						

draw

绘制内容


void view.draw(tags);
						

说明:

在当前View控件之上绘制指定的内容,可一次指定绘制多个元素,绘制元素可以是图片/矩形区域/文本, 即将多次调用drawBitmap/drawRect/drawText方法合并调用一次draw方法来实现, 推荐使用draw方法来替换多次调用drawBitmap/drawRect/drawText。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
var view=null;
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 创建原生View控件
function createView(){
	view = new plus.nativeObj.View('test',
	{top:'0px',left:'0px',height:'44px',width:'100%'});
	view.draw([
		{tag:'img',id:'img',src:'nbg.png',position:{top:'0px',left:'0px',width:'100%',height:'100%'}},
		{tag:'rect',id:'rect',color:'#FF0000',position:{top:'0px',left:'0px',width:'100%',height:'1px'}},
		{tag:'font',id:'font',text:'原生View控件',textStyles:{size:'18px'},position:{top:'0px',left:'0px',width:'100%',height:'1px'}}
		]);
	view.show();
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建View对象</button><br/>
	</body>
</html>
						

drawBitmap

绘制图片


void view.drawBitmap(src, sprite, position, id);
						

说明:

在当前View控件之上绘制指定的图片,如果图片无效则不做任何操作。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
var bitmap1=null;
// H5 plus事件处理
function plusReady(){
	bitmap1 = new plus.nativeObj.Bitmap('bmp1');
	bitmap1.load('bmp1.png',function(){
		console.log('bmp1.png load success!');
	},function(e){
		console.log('bmp1.png load failed! '+JSON.stringify(e));
	});
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 创建原生View控件
function createView(){
	var view = new plus.nativeObj.View('test',{top:'0px',left:'0px',height:'44px',width:'100%'});
	// 绘制图片
	view.drawBitmap( bitmap1, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'auto',left:'auto',width:'100%',height:'100%'} );
	view.show();
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建View对象</button><br/>
	</body>
</html>
						

drawRect

绘制矩形区域


void view.drawRect(color, position, id);
						

说明:

在当前View控件之上绘制指定颜色的矩形区域。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener('plusready', plusReady, false);
}
// 创建原生View控件
function createView(){
	var view = new plus.nativeObj.View('test',{top:'200px',left:'0px',height:'44px',width:'100%'});
	// 绘制矩形
	view.drawRect({color:'#FF0000'}, {top:'0px',left:'0px',width:'100%',height:'100%'});
	view.show();
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建View对象</button><br/>
	</body>
</html>
						

drawText

绘制文本


void view.drawText(text, position, styles, id);
						

说明:

在当前View控件之上绘制指定的文本内容,如果文本为空则不做任何操作。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 创建原生View控件
function createView(){
	var view = new plus.nativeObj.View('test',{top:'0px',left:'0px',height:'44px',width:'100%'});
	// 绘制文本
	view.drawText('原生绘制的文本内容', {top:'0px',left:'0px',width:'100%',height:'100%'}, {size:'22px',color:'#FF0000'});
	view.show();
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建View对象</button><br/>
	</body>
</html>
						

drawRichText

绘制富文本


void view.drawRichText(text, position, styles, id);
						

说明:

在当前View控件之上绘制指定的文本内容,如果文本为空则不做任何操作。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener('plusready', plusReady, false);
}
// 创建原生View控件
function createView(){
	var view = new plus.nativeObj.View('test',{top:'0px',left:'0px',height:'44px',width:'100%'});
	var richtext = '<font color="#FF0000" style="font-size:10px;">文本</font><br/><a href="" style="font-size:12px;">链接</a><br/><img src="./t.png" width="20px" height="20px"></img>';
	// 绘制文本
	view.drawRichText(richtext, {top:'0px',left:'0px',width:'100%',height:'wrap_content'});
	view.show();
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建View对象</button><br/>
	</body>
</html>
						

reset

重置view控件显示内容


void view.reset();
						

说明:

清除调用drawBitmap、drawText方法绘制的内容,将View控件重置为空内容(透明不可见)。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
var view = null;
// H5 plus事件处理
function plusReady(){
	view = new plus.nativeObj.View('test',{top:'200px',left:'0px',height:'60px',width:'100%'});
	view.show();
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 绘制View控件
function drawView(){
	// 绘制文本
	view.drawText( 'Test绘制文本内容', {}, {size:'60px',color:'#FF0000'} );
}
// 重置View控件
function resetView(){
	view.reset();
}
		</script>
	</head>
	<body>
		<button onclick="drawView()">绘制View对象</button><br/>
		<button onclick="resetView()">重置View对象</button><br/>
	</body>
</html>
						

restore

恢复View控件显示内容


void view.restore();
						

说明:

恢复调用animate方法改变View控件的内容,更新至动画前的内容。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
var bitmap1=null,view=null;
// H5 plus事件处理
function plusReady(){
	bitmap1 = new plus.nativeObj.Bitmap('bmp1');
	bitmap1.load('bmp1.png',function(){
		console.log('bmp1.png load success!');
	},function(e){
		console.log('bmp1.png load failed! '+JSON.stringify(e));
	});
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 创建View控件
function createView(){
	view = new plus.nativeObj.View('test',{top:'100px',left:'0px',height:'100%',width:'100%'});
	// 绘制图片
	view.drawBitmap( bitmap1, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'auto',left:'auto',width:'100%',height:'100%'} );
	view.show();
}
// View控件动画
function animateView(){
	// 开始view控件动画
	view.animate({type:'shrink',frames:20,region:{top:'44px',bottom:'48px'}},function(){
		console.log("View控件动画结束");
	});
}
// 恢复View控件
function restoreView(){
	view.restore();
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建View控件</button><br/>
		<button onclick="animateView()">View控件动画</button><br/>
		<button onclick="restoreView()">恢复View控件</button><br/>
	</body>
</html>
					

show

显示View控件


void view.show();
						

说明:

将View控件显示到屏幕,显示在所有Webview窗口之上。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 创建原生View控件
function createView(){
	var view = new plus.nativeObj.View('test',{top:'0px',left:'0px',height:'44px',width:'100%'});
	// 绘制文本
	view.drawText( 'Test', {}, {size:'60px',color:'#FF0000'} );
	view.show();
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建View对象</button><br/>
	</body>
</html>
						

setStyle

设置View控件的样式


void view.setStyle(styles);
						

说明:

动态更新View控件样式。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 创建原生View控件
var view=null;
function createView(){
	view = new plus.nativeObj.View('test',{top:'200px',left:'0px',height:'50%',width:'100%'});
	// 绘制区域
	view.drawRect("#FF0000", {top:'0px',left:'0px',width:'100%',height:'50%'});
	view.drawRect("#00FF00", {top:'50%',left:'0px',width:'100%',height:'50%'});
	view.show();
}
// 更新原生View控件
function updateView(){
	view.setStyle({top:'0px',left:'0px',height:'50%',width:'100%'});
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建View对象</button><br/>
		<button onclick="updateView()">更新View对象</button>
	</body>
</html>
						

setTouchEventRect

指定监听触屏事件区域


void view.setTouchEventRect(rect);
						

说明:

当调用addEventListener监听View控件事件时,可调用此方法限定监听事件的区域,仅当用户触屏操作在指定区域时才触发监听事件。 非限定监听事件的区域则不拦截,透传给其它窗口处理。 注意:此操作覆盖之前设置的区域。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 创建原生View控件
var view=null;
function createView(){
	view = new plus.nativeObj.View('test',{top:'200px',left:'0px',height:'50%',width:'100%'});
	// 绘制区域
	view.drawRect("#FF0000", {top:'0px',left:'0px',width:'100%',height:'50%'});
	view.drawRect("#00FF00", {top:'50%',left:'0px',width:'100%',height:'50%'});
	view.show();
}
// 监听事件
function listenerEvent(){
	view.setTouchEventRect({top:'0px',left:'0px',width:'100%',height:'50%'});
	view.addEventListener("click", function(e){
		console.log("点击原生控件:"+JSON.stringify(e));
	}, false);
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建View对象</button><br/>
		<button onclick="listenerEvent()">监听事件</button>
	</body>
</html>
						

hide

隐藏View控件


void view.hide();
						

说明:

将View控件从屏幕隐藏,如果View控件未显示则不做任何操作。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
var view = null;
// 创建原生View控件
function createView(){
	view = new plus.nativeObj.View('test',{top:'200px',left:'0px',height:'60px',width:'100%'});
	// 绘制文本
	view.drawText('原生绘制的文本内容', {}, {size:'60px',color:'#FF0000'});
	plus.nativeUI.toast('创建成功');
}
// 显示原生View控件
function showView(){
	view.show();
}
// 隐藏原生View控件
function hideView(){
	view.hide();
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建View控件</button><br/>
		<button onclick="showView()">显示View控件</button><br/>
		<button onclick="hideView()">隐藏View控件</button><br/>
	</body>
</html>
						

interceptTouchEvent

是否拦截View控件的触屏事件


void view.interceptTouchEvent(intercept);
						

说明:

设置为拦截后View控件上的触屏事件不再传递(即不透传),否则触屏事件将继续传递给View控件下的其它窗口处理(即透传)。 注意:View控件默认拦截触屏事件(不透传)。

参数:

返回值:

void : 无

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
var view = null;
// 创建原生View控件
function createView(){
	view = new plus.nativeObj.View('test',{top:'200px',left:'0px',height:'60px',width:'100%'});
	// 绘制文本
	view.drawText('原生绘制的文本内容', {}, {size:'60px',color:'#FF0000'});
	view.interceptTouchEvent(true);
	plus.nativeUI.toast('创建成功');
}
// 显示原生View控件
function showView(){
	view.show();
}
// 隐藏原生View控件
function hideView(){
	view.hide();
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建View控件并拦截事件</button><br/>
		<button onclick="showView()">显示View控件</button><br/>
		<button onclick="hideView()">隐藏View控件</button><br/>
	</body>
</html>
						

isVisible

获取View控件的显示状态


Boolean view.isVisible();
						

参数:

返回值:

Boolean : 如果View控件显示则返回true,如果View控件未显示则返回false。

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
var view = null;
// 创建原生View控件
function createView(){
	view = new plus.nativeObj.View('test',{top:'200px',left:'0px',height:'60px',width:'100%'});
	// 绘制文本
	view.drawText('原生绘制的文本内容', {}, {size:'60px',color:'#FF0000'});
	plus.nativeUI.toast('创建成功');
}
// 显示原生View控件
function showView(){
	view.show();
}
// 隐藏原生View控件
function hideView(){
	view.hide();
}
// 查看View控件的显示状态
function visibleView(){
	var visible = view.isVisible();
	console.log('View控件状态:'+visible);
	alert('View控件状态:'+visible);
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建View控件</button><br/>
		<button onclick="showView()">显示View控件</button><br/>
		<button onclick="hideView()">隐藏View控件</button><br/>
		<button onclick="visibleView()">获取View控件的显示状态</button><br/>
	</body>
</html>
						

ViewAnimationOptions

View控件动画参数


interface ViewAnimationOptions {
	attribute String type;
	attribute Number duration;
	attribute Number frames;
	attribute Rect region;
}				

说明:

指定动画的类型、持续时间等信息。

属性:

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
var bitmap1=null;
// H5 plus事件处理
function plusReady(){
	bitmap1 = new plus.nativeObj.Bitmap('bmp1');
	bitmap1.load('bmp1.png',function(){
		console.log('bmp1.png load success!');
	},function(e){
		console.log('bmp1.png load failed! '+JSON.stringify(e));
	});
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
var view=null;
// 创建原生View控件
function createView(){
	view = new plus.nativeObj.View('test',{top:'0px',left:'0px',height:'44px',width:'100%'});
	// 绘制图片
	view.drawBitmap( bitmap1, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'auto',left:'auto',width:'100%',height:'100%'} );
	view.show();
}
function animateView(){
	view.animate({type:'shrink',frames:20,region:{top:'44px',bottom:'48px'}});
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建View对象</button><br/>
		<button onclick="animateView()">View对象动画</button><br/>
	</body>
</html>
			

ViewDrawTagStyles

View控件绘制元素参数


interface ViewDrawTagStyles {
	attribute String id;
	attribute String tag;
	attribute String color;
	attribute Position position;
	attribute RectStyles rectStyles;
	attribute String src;
	attribute Position sprite;
	attribute String text;
	attribute TextStyles textStyles;
	attribute RichTextStyles richTextStyles;
}				

说明:

指定绘制图片、矩形区域、文本内容等信息。

属性:

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
var view=null;
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 创建原生View控件
function createView(){
	view = new plus.nativeObj.View('test',
	{top:'0px',left:'0px',height:'44px',width:'100%'});
	view.draw([
		{tag:'img',id:'img',src:'nbg.png',position:{top:'0px',left:'0px',width:'100%',height:'100%'}},
		{tag:'rect',id:'rect',rectStyles:{color:'#FF0000'},position:{top:'0px',left:'0px',width:'100%',height:'1px'}},
		{tag:'font',id:'font',text:'原生控件',textStyles:{size:'18px'}}
		]);
	view.show();
}
		</script>
	</head>
	<body>
		<button onclick="createView()">创建View对象</button><br/>
	</body>
</html>
			

ViewEvents

View控件事件

常量:

ViewStatusbarStyles

JSON对象,View控件的系统状态栏区域样式

说明:

仅在应用设置为沉浸式状态栏样式下有效,非沉浸式状态栏样式下忽略此属性。

属性:

ViewStyles

View控件样式


interface ViewStyles {
	attribute String backgroundColor;
	attribute String left;
	attribute String top;
	attribute String bottom;
	attribute String height;
	attribute String width;
	attribute String dock;
	attribute Number opacity;
	attribute String position;
	attribute ViewStatusbarStyles statusbar;
}				

说明:

包括位置、大小等信息等,其中位置信息相对于父容器控件进行计算。

属性:

示例:


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>NativeObj Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 创建原生View控件
var view=null;
function createView(){
	view = new plus.nativeObj.View('test',{top:'200px',left:'0px',height:'50%',width:'100%',backgroundColor:'#FF0000'});
	view.drawRect("#000000", {top:'25%',left:'25%',width:'50%',height:'50%'}, 'test');
	view.show();
}
// 更新原生View控件
function updateView(){
	view.setStyle({backgroundColor:'#00FF00'});	// 更新背景颜色
	view.drawRect('#FFFFFF', {top:'25%',left:'25%',width:'50%',height:'50%'}, 'test');	// 更新区域
}
// 关闭View控件
function closeView(){
	view.close();
	view=null;
}
		</script>
	</head>
	<body>
		<br/><br/>
		<button onclick="createView()">创建View对象</button><br/>
		<button onclick="updateView()">更新View对象</button><br/>
		<button onclick="closeView()">关闭View对象</button>
	</body>
</html>
				

BitmapSaveSuccessCallback

图片保存操作成功回调接口


void onSuccess( Event event ){
	// Code here
	var target = event.target; // 保存后的图片url路径,以"file://"开头
	var size = event.size; // 保存后图片的大小,单位为字节(Byte)
	var width = event.width; // 保存后图片的实际宽度,单位为px
	var height = event.height; // 保存后图片的实际高度,单位为px
}
				

参数:

返回值:

void : 无

TouchEventCallback

触屏事件的回调函数


void onEvent(Event e){
	// Event handled code.
	var clientX = e.clientX;
	var clientY = e.clientY;
	var pageX = e.pageX;
	var pageY = e.pageY;
	var screenX = e.screenX;
	var screenY = e.screenY;
	var target = e.target;
	var imageIndex = e.currentImageIndex;
}
				

参数:

返回值:

void : 无

NativeObjSuccessCallback

操作成功回调函数接口


void onSuccess(){
	// Code here
}
				

参数:

返回值:

void : 无

NativeObjErrorCallback

操作错误回调函数接口


function void onError( Exception error ) {
	// Error.
	var code = error.code; // 错误编码
	var message = error.message; // 错误描述信息
}
				

参数:

返回值:

void : 无