layaair-js
Version:
An open source HTML5 engine. Edition JavaScript.
1,806 lines (1,660 loc) • 287 kB
JavaScript
(function(window,document,Laya){
var __un=Laya.un,__uns=Laya.uns,__static=Laya.static,__class=Laya.class,__getset=Laya.getset,__newvec=Laya.__newvec;
var Animation=laya.display.Animation,ClassUtils=laya.utils.ClassUtils,ColorFilter=laya.filters.ColorFilter;
var Ease=laya.utils.Ease,Event=laya.events.Event,Font=laya.display.css.Font,FrameAnimation=laya.display.FrameAnimation;
var Graphics=laya.display.Graphics,Handler=laya.utils.Handler,Input=laya.display.Input,Loader=laya.net.Loader;
var Node=laya.display.Node,Point=laya.maths.Point,Rectangle=laya.maths.Rectangle,Render=laya.renders.Render;
var Sprite=laya.display.Sprite,Stage=laya.display.Stage,Text=laya.display.Text,Texture=laya.resource.Texture;
var Tween=laya.utils.Tween,Utils=laya.utils.Utils;
Laya.interface('laya.ui.IItem');
Laya.interface('laya.ui.IRender');
Laya.interface('laya.ui.ISelect');
Laya.interface('laya.ui.IComponent');
Laya.interface('laya.ui.IBox','IComponent');
/**
*<code>LayoutStyle</code> 是一个布局样式类。
*/
//class laya.ui.LayoutStyle
var LayoutStyle=(function(){
function LayoutStyle(){
this.enable=false;
this.top=NaN;
this.bottom=NaN;
this.left=NaN;
this.right=NaN;
this.centerX=NaN;
this.centerY=NaN;
this.anchorX=NaN;
this.anchorY=NaN;
}
__class(LayoutStyle,'laya.ui.LayoutStyle');
__static(LayoutStyle,
['EMPTY',function(){return this.EMPTY=new LayoutStyle();}
]);
return LayoutStyle;
})()
/**
*<code>Styles</code> 定义了组件常用的样式属性。
*/
//class laya.ui.Styles
var Styles=(function(){
function Styles(){};
__class(Styles,'laya.ui.Styles');
Styles.labelColor="#000000";
Styles.buttonStateNum=3;
Styles.scrollBarMinNum=15;
Styles.scrollBarDelayTime=500;
__static(Styles,
['defaultSizeGrid',function(){return this.defaultSizeGrid=[4,4,4,4,0];},'labelPadding',function(){return this.labelPadding=[2,2,2,2];},'inputLabelPadding',function(){return this.inputLabelPadding=[1,1,1,3];},'buttonLabelColors',function(){return this.buttonLabelColors=["#32556b","#32cc6b","#ff0000","#C0C0C0"];},'comboBoxItemColors',function(){return this.comboBoxItemColors=["#5e95b6","#ffffff","#000000","#8fa4b1","#ffffff"];}
]);
return Styles;
})()
/**
*<code>UIUtils</code> 是文本工具集。
*/
//class laya.ui.UIUtils
var UIUtils=(function(){
function UIUtils(){};
__class(UIUtils,'laya.ui.UIUtils');
UIUtils.fillArray=function(arr,str,type){
var temp=arr.concat();
if (str){
var a=str.split(",");
for (var i=0,n=Math.min(temp.length,a.length);i < n;i++){
var value=a[i];
temp[i]=(value=="true" ? true :(value=="false" ? false :value));
if (type !=null)temp[i]=type(value);
}
}
return temp;
}
UIUtils.toColor=function(color){
var str=color.toString("16");
while (str.length < 6)str="0"+str;
return "#"+str;
}
UIUtils.gray=function(traget,isGray){
(isGray===void 0)&& (isGray=true);
if (isGray){
UIUtils.addFilter(traget,UIUtils.grayFilter);
}else {
UIUtils.clearFilter(traget,ColorFilter);
}
}
UIUtils.addFilter=function(target,filter){
var filters=target.filters || [];
filters.push(filter);
target.filters=filters;
}
UIUtils.clearFilter=function(target,filterType){
var filters=target.filters;
if (filters !=null && filters.length > 0){
for (var i=filters.length-1;i >-1;i--){
var filter=filters[i];
if (Laya.__typeof(filter,filterType))filters.splice(i,1);
}
target.filters=filters;
}
}
__static(UIUtils,
['grayFilter',function(){return this.grayFilter=new ColorFilter([0.3086,0.6094,0.082,0,0,0.3086,0.6094,0.082,0,0,0.3086,0.6094,0.082,0,0,0,0,0,1,0]);}
]);
return UIUtils;
})()
/**全局配置*/
//class UIConfig
var UIConfig=(function(){
function UIConfig(){};
__class(UIConfig,'UIConfig');
UIConfig.touchScrollEnable=true;
UIConfig.mouseWheelEnable=true;
UIConfig.showButtons=true;
UIConfig.popupBgColor="#000000";
UIConfig.popupBgAlpha=0.5;
return UIConfig;
})()
/**
*<code>AutoBitmap</code> 类是用于表示位图图像或绘制图形的显示对象。
*<p>封装了位置，宽高及九宫格的处理，供UI组件使用。</p>
*/
//class laya.ui.AutoBitmap extends laya.display.Graphics
var AutoBitmap=(function(_super){
function AutoBitmap(){
this.autoCacheCmd=true;
this._width=0;
this._height=0;
this._source=null;
this._sizeGrid=null;
this._isChanged=false;
this._offset=null;
AutoBitmap.__super.call(this);
}
__class(AutoBitmap,'laya.ui.AutoBitmap',_super);
var __proto=AutoBitmap.prototype;
/**@inheritDoc */
__proto.destroy=function(){
_super.prototype.destroy.call(this);
this._source=null;
this._sizeGrid=null;
this._offset=null;
}
/**@private */
__proto._setChanged=function(){
if (!this._isChanged){
this._isChanged=true;
Laya.timer.callLater(this,this.changeSource);
}
}
/**
*@private
*修改纹理资源。
*/
__proto.changeSource=function(){
if (AutoBitmap.cacheCount++> 50)AutoBitmap.clearCache();
this._isChanged=false;
var source=this._source;
if (!source || !source.bitmap)return;
var width=this.width;
var height=this.height;
var sizeGrid=this._sizeGrid;
var sw=source.sourceWidth;
var sh=source.sourceHeight;
if (!sizeGrid || (sw===width && sh===height)){
this.clear();
this.drawTexture(source,this._offset ? this._offset[0] :0,this._offset ? this._offset[1] :0,width,height);
}else {
source.$_GID || (source.$_GID=Utils.getGID());
var key=source.$_GID+"."+width+"."+height+"."+sizeGrid.join(".");
if (AutoBitmap.cmdCaches[key]){
this.cmds=AutoBitmap.cmdCaches[key];
return;
}
this.clear();
var top=sizeGrid[0];
var right=sizeGrid[1];
var bottom=sizeGrid[2];
var left=sizeGrid[3];
var repeat=sizeGrid[4];
if (left+right > width){
right=0;
}
left && top && this.drawTexture(AutoBitmap.getTexture(source,0,0,left,top),0,0,left,top);
right && top && this.drawTexture(AutoBitmap.getTexture(source,sw-right,0,right,top),width-right,0,right,top);
left && bottom && this.drawTexture(AutoBitmap.getTexture(source,0,sh-bottom,left,bottom),0,height-bottom,left,bottom);
right && bottom && this.drawTexture(AutoBitmap.getTexture(source,sw-right,sh-bottom,right,bottom),width-right,height-bottom,right,bottom);
top && this.drawBitmap(repeat,AutoBitmap.getTexture(source,left,0,sw-left-right,top),left,0,width-left-right,top);
bottom && this.drawBitmap(repeat,AutoBitmap.getTexture(source,left,sh-bottom,sw-left-right,bottom),left,height-bottom,width-left-right,bottom);
left && this.drawBitmap(repeat,AutoBitmap.getTexture(source,0,top,left,sh-top-bottom),0,top,left,height-top-bottom);
right && this.drawBitmap(repeat,AutoBitmap.getTexture(source,sw-right,top,right,sh-top-bottom),width-right,top,right,height-top-bottom);
this.drawBitmap(repeat,AutoBitmap.getTexture(source,left,top,sw-left-right,sh-top-bottom),left,top,width-left-right,height-top-bottom);
if (this.autoCacheCmd && !Render.isConchApp)AutoBitmap.cmdCaches[key]=this.cmds;
}
this._repaint();
}
__proto.drawBitmap=function(repeat,tex,x,y,width,height){
(width===void 0)&& (width=0);
(height===void 0)&& (height=0);
if (repeat)this.fillTexture(tex,x,y,width,height);
else this.drawTexture(tex,x,y,width,height);
}
/**
*当前实例的有效缩放网格数据。
*<p>如果设置为null,则在应用任何缩放转换时，将正常缩放整个显示对象。</p>
*<p>数据格式：[上边距,右边距,下边距,左边距,是否重复填充(值为0：不重复填充，1：重复填充)]。
*<ul><li>例如：[4,4,4,4,1]</li></ul></p>
*<p> <code>sizeGrid</code> 的值如下所示：
*<ol>
*<li>上边距</li>
*<li>右边距</li>
*<li>下边距</li>
*<li>左边距</li>
*<li>是否重复填充(值为0：不重复填充，1：重复填充)</li>
*</ol></p>
*<p>当定义 <code>sizeGrid</code> 属性时，该显示对象被分割到以 <code>sizeGrid</code> 数据中的"上边距,右边距,下边距,左边距" 组成的矩形为基础的具有九个区域的网格中，该矩形定义网格的中心区域。网格的其它八个区域如下所示：
*<ul>
*<li>矩形上方的区域</li>
*<li>矩形外的右上角</li>
*<li>矩形左侧的区域</li>
*<li>矩形右侧的区域</li>
*<li>矩形外的左下角</li>
*<li>矩形下方的区域</li>
*<li>矩形外的右下角</li>
*<li>矩形外的左上角</li>
*</ul>
*同时也支持3宫格，比如0,4,0,4,1为水平3宫格，4,0,4,0,1为垂直3宫格，3宫格性能比9宫格高。
*</p>
*/
__getset(0,__proto,'sizeGrid',function(){
return this._sizeGrid;
},function(value){
this._sizeGrid=value;
this._setChanged();
});
/**
*表示显示对象的宽度，以像素为单位。
*/
__getset(0,__proto,'width',function(){
if (this._width)return this._width;
if (this._source)return this._source.sourceWidth;
return 0;
},function(value){
if (this._width !=value){
this._width=value;
this._setChanged();
}
});
/**
*表示显示对象的高度，以像素为单位。
*/
__getset(0,__proto,'height',function(){
if (this._height)return this._height;
if (this._source)return this._source.sourceHeight;
return 0;
},function(value){
if (this._height !=value){
this._height=value;
this._setChanged();
}
});
/**
*对象的纹理资源。
*@see laya.resource.Texture
*/
__getset(0,__proto,'source',function(){
return this._source;
},function(value){
if (value){
this._source=value
this._setChanged();
}else {
this._source=null;
this.clear();
}
});
AutoBitmap.getTexture=function(tex,x,y,width,height){
if (width <=0)width=1;
if (height <=0)height=1;
tex.$_GID || (tex.$_GID=Utils.getGID())
var key=tex.$_GID+"."+x+"."+y+"."+width+"."+height;
var texture=AutoBitmap.textureCache[key];
if (!texture){
texture=AutoBitmap.textureCache[key]=Texture.createFromTexture(tex,x,y,width,height);
}
return texture;
}
AutoBitmap.clearCache=function(){
AutoBitmap.cacheCount=0;
AutoBitmap.cmdCaches={};
AutoBitmap.textureCache={};
}
AutoBitmap.setCache=function(key,value){
AutoBitmap.cacheCount++;
AutoBitmap.textureCache[key]=value;
}
AutoBitmap.getCache=function(key){
return AutoBitmap.textureCache[key];
}
AutoBitmap.cmdCaches={};
AutoBitmap.cacheCount=0;
AutoBitmap.textureCache={};
return AutoBitmap;
})(Graphics)
/**
*<code>UIEvent</code> 类用来定义UI组件类的事件类型。
*/
//class laya.ui.UIEvent extends laya.events.Event
var UIEvent=(function(_super){
function UIEvent(){UIEvent.__super.call(this);;
};
__class(UIEvent,'laya.ui.UIEvent',_super);
UIEvent.SHOW_TIP="showtip";
UIEvent.HIDE_TIP="hidetip";
return UIEvent;
})(Event)
/**
*<code>Component</code> 是ui控件类的基类。
*<p>生命周期：preinitialize > createChildren > initialize > 组件构造函数</p>
*/
//class laya.ui.Component extends laya.display.Sprite
var Component=(function(_super){
function Component(){
this._comXml=null;
this._dataSource=null;
this._toolTip=null;
this._tag=null;
this._disabled=false;
this._gray=false;
Component.__super.call(this);
this._layout=LayoutStyle.EMPTY;
this.preinitialize();
this.createChildren();
this.initialize();
}
__class(Component,'laya.ui.Component',_super);
var __proto=Component.prototype;
Laya.imps(__proto,{"laya.ui.IComponent":true})
/**@inheritDoc */
__proto.destroy=function(destroyChild){
(destroyChild===void 0)&& (destroyChild=true);
_super.prototype.destroy.call(this,destroyChild);
this._dataSource=this._layout=null;
this._tag=null;
this._toolTip=null;
}
/**
*<p>预初始化。</p>
*@internal 子类可在此函数内设置、修改属性默认值
*/
__proto.preinitialize=function(){}
/**
*<p>创建并添加控件子节点。</p>
*@internal 子类可在此函数内创建并添加子节点。
*/
__proto.createChildren=function(){}
/**
*<p>控件初始化。</p>
*@internal 在此子对象已被创建，可以对子对象进行修改。
*/
__proto.initialize=function(){}
/**
*<p>延迟运行指定的函数。</p>
*<p>在控件被显示在屏幕之前调用，一般用于延迟计算数据。</p>
*@param method 要执行的函数的名称。例如，functionName。
*@param args 传递给 <code>method</code> 函数的可选参数列表。
*
*@see #runCallLater()
*/
__proto.callLater=function(method,args){
Laya.timer.callLater(this,method,args);
}
/**
*<p>如果有需要延迟调用的函数（通过 <code>callLater</code> 函数设置），则立即执行延迟调用函数。</p>
*@param method 要执行的函数名称。例如，functionName。
*@see #callLater()
*/
__proto.runCallLater=function(method){
Laya.timer.runCallLater(this,method);
}
/**
*<p>立即执行影响宽高度量的延迟调用函数。</p>
*@internal <p>使用 <code>runCallLater</code> 函数，立即执行影响宽高度量的延迟运行函数(使用 <code>callLater</code> 设置延迟执行函数)。</p>
*@see #callLater()
*@see #runCallLater()
*/
__proto.commitMeasure=function(){}
/**
*<p>重新调整对象的大小。</p>
*/
__proto.changeSize=function(){
this.event(/*laya.events.Event.RESIZE*/"resize");
}
/**
*@private
*<p>获取对象的布局样式。</p>
*/
__proto.getLayout=function(){
this._layout===LayoutStyle.EMPTY && (this._layout=new LayoutStyle());
return this._layout;
}
/**
*对象从显示列表移除的事件侦听处理函数。
*/
__proto.onRemoved=function(){
this.parent.off(/*laya.events.Event.RESIZE*/"resize",this,this.onCompResize);
}
/**
*对象被添加到显示列表的事件侦听处理函数。
*/
__proto.onAdded=function(){
this.parent.on(/*laya.events.Event.RESIZE*/"resize",this,this.onCompResize);
this.resetLayoutX();
this.resetLayoutY();
}
/**
*父容器的 <code>Event.RESIZE</code> 事件侦听处理函数。
*/
__proto.onCompResize=function(){
if (this._layout && this._layout.enable){
this.resetLayoutX();
this.resetLayoutY();
}
}
/**
*<p>重置对象的 <code>X</code> 轴（水平方向）布局。</p>
*/
__proto.resetLayoutX=function(){
var parent=this.parent;
if (parent){
var layout=this._layout;
if (!isNaN(layout.anchorX))this.pivotX=layout.anchorX *this.width;
if (!isNaN(layout.centerX)){
this.x=(parent.width-this.displayWidth)*0.5+layout.centerX+this.pivotX;
}else if (!isNaN(layout.left)){
this.x=layout.left+this.pivotX;
if (!isNaN(layout.right)){
this.width=(parent._width-layout.left-layout.right)/ this.scaleX;
}
}else if (!isNaN(layout.right)){
this.x=parent.width-this.displayWidth-layout.right+this.pivotX;
}
}
}
/**
*<p>重置对象的 <code>Y</code> 轴（垂直方向）布局。</p>
*/
__proto.resetLayoutY=function(){
var parent=this.parent;
if (parent){
var layout=this._layout;
if (!isNaN(layout.anchorY))this.pivotY=layout.anchorY *this.height;
if (!isNaN(layout.centerY)){
this.y=(parent.height-this.displayHeight)*0.5+layout.centerY+this.pivotY;
}else if (!isNaN(layout.top)){
this.y=layout.top+this.pivotY;
if (!isNaN(layout.bottom)){
this.height=(parent._height-layout.top-layout.bottom)/ this.scaleY;
}
}else if (!isNaN(layout.bottom)){
this.y=parent.height-this.displayHeight-layout.bottom+this.pivotY;
}
}
}
/**
*对象的 <code>Event.MOUSE_OVER</code> 事件侦听处理函数。
*/
__proto.onMouseOver=function(e){
Laya.stage.event(/*laya.ui.UIEvent.SHOW_TIP*/"showtip",this._toolTip);
}
/**
*对象的 <code>Event.MOUSE_OUT</code> 事件侦听处理函数。
*/
__proto.onMouseOut=function(e){
Laya.stage.event(/*laya.ui.UIEvent.HIDE_TIP*/"hidetip",this._toolTip);
}
/**
*<p>对象的显示宽度（以像素为单位）。</p>
*/
__getset(0,__proto,'displayWidth',function(){
return this.width *this.scaleX;
});
/**
*<p>表示显示对象的宽度，以像素为单位。</p>
*<p><b>注：</b>当值为0时，宽度为自适应大小。</p>
*/
__getset(0,__proto,'width',function(){
if (this._width)return this._width;
return this.measureWidth;
},function(value){
if (this._width !=value){
this._width=value;
this.model && this.model.size(this._width,this._height);
this.callLater(this.changeSize);
if (this._layout.enable && (!isNaN(this._layout.centerX)|| !isNaN(this._layout.right)|| !isNaN(this._layout.anchorX)))this.resetLayoutX();
}
});
/**
*<p>显示对象的实际显示区域宽度（以像素为单位）。</p>
*/
__getset(0,__proto,'measureWidth',function(){
var max=0;
this.commitMeasure();
for (var i=this.numChildren-1;i >-1;i--){
var comp=this.getChildAt(i);
if (comp.visible){
max=Math.max(comp.x+comp.width *comp.scaleX,max);
}
}
return max;
});
/**
*@private
*<p>指定对象是否可使用布局。</p>
*<p>如果值为true,则此对象可以使用布局样式，否则不使用布局样式。</p>
*@param value 一个 Boolean 值，指定对象是否可使用布局。
*/
__getset(0,__proto,'layOutEabled',null,function(value){
if (this._layout && this._layout.enable !=value){
this._layout.enable=value;
if (this.parent){
this.onAdded();
}else {
this.on(/*laya.events.Event.ADDED*/"added",this,this.onAdded);
this.on(/*laya.events.Event.REMOVED*/"removed",this,this.onRemoved);
}
}
});
/**
*<p>对象的显示高度（以像素为单位）。</p>
*/
__getset(0,__proto,'displayHeight',function(){
return this.height *this.scaleY;
});
/**
*<p>表示显示对象的高度，以像素为单位。</p>
*<p><b>注：</b>当值为0时，高度为自适应大小。</p>
*@return
*/
__getset(0,__proto,'height',function(){
if (this._height)return this._height;
return this.measureHeight;
},function(value){
if (this._height !=value){
this._height=value;
this.model && this.model.size(this._width,this._height);
this.callLater(this.changeSize);
if (this._layout.enable && (!isNaN(this._layout.centerY)|| !isNaN(this._layout.bottom)|| !isNaN(this._layout.anchorY)))this.resetLayoutY();
}
});
/**
*<p>数据赋值，通过对UI赋值来控制UI显示逻辑。</p>
*<p>简单赋值会更改组件的默认属性，使用大括号可以指定组件的任意属性进行赋值。</p>
*@example 以下示例中， <code>label1、checkbox1</code> 分别为示例的name属性值。
<listing version="3.0">
//默认属性赋值
dataSource={label1:"改变了label",checkbox1:true};//(更改了label1的text属性值，更改checkbox1的selected属性)。
//任意属性赋值
dataSource={label2:{text:"改变了label",size:14},checkbox2:{selected:true,x:10}};
</listing>
*@return
*/
__getset(0,__proto,'dataSource',function(){
return this._dataSource;
},function(value){
this._dataSource=value;
for (var prop in this._dataSource){
if (this.hasOwnProperty(prop)){
this[prop]=this._dataSource[prop];
}
}
});
/**@inheritDoc */
__getset(0,__proto,'scaleY',_super.prototype._$get_scaleY,function(value){
if (_super.prototype._$get_scaleY.call(this)!=value){
_super.prototype._$set_scaleY.call(this,value);
this.callLater(this.changeSize);
this._layout.enable && this.resetLayoutY();
}
});
/**
*<p>显示对象的实际显示区域高度（以像素为单位）。</p>
*/
__getset(0,__proto,'measureHeight',function(){
var max=0;
this.commitMeasure();
for (var i=this.numChildren-1;i >-1;i--){
var comp=this.getChildAt(i);
if (comp.visible){
max=Math.max(comp.y+comp.height *comp.scaleY,max);
}
}
return max;
});
/**@inheritDoc */
__getset(0,__proto,'scaleX',_super.prototype._$get_scaleX,function(value){
if (_super.prototype._$get_scaleX.call(this)!=value){
_super.prototype._$set_scaleX.call(this,value);
this.callLater(this.changeSize);
this._layout.enable && this.resetLayoutX();
}
});
/**
*<p>从组件顶边到其内容区域顶边之间的垂直距离（以像素为单位）。</p>
*/
__getset(0,__proto,'top',function(){
return this._layout.top;
},function(value){
this.getLayout().top=value;
this.layOutEabled=true;
this.resetLayoutY();
});
/**
*<p>从组件底边到其内容区域底边之间的垂直距离（以像素为单位）。</p>
*/
__getset(0,__proto,'bottom',function(){
return this._layout.bottom;
},function(value){
this.getLayout().bottom=value;
this.layOutEabled=true;
this.resetLayoutY();
});
/**
*<p>从组件左边到其内容区域左边之间的水平距离（以像素为单位）。</p>
*/
__getset(0,__proto,'left',function(){
return this._layout.left;
},function(value){
this.getLayout().left=value;
this.layOutEabled=true;
this.resetLayoutX();
});
/**
*<p>从组件右边到其内容区域右边之间的水平距离（以像素为单位）。</p>
*/
__getset(0,__proto,'right',function(){
return this._layout.right;
},function(value){
this.getLayout().right=value;
this.layOutEabled=true;
this.resetLayoutX();
});
/**
*<p>在父容器中，此对象的水平方向中轴线与父容器的水平方向中心线的距离（以像素为单位）。</p>
*/
__getset(0,__proto,'centerX',function(){
return this._layout.centerX;
},function(value){
this.getLayout().centerX=value;
this.layOutEabled=true;
this.resetLayoutX();
});
/**
*<p>在父容器中，此对象的垂直方向中轴线与父容器的垂直方向中心线的距离（以像素为单位）。</p>
*/
__getset(0,__proto,'centerY',function(){
return this._layout.centerY;
},function(value){
this.getLayout().centerY=value;
this.layOutEabled=true;
this.resetLayoutY();
});
/**X轴锚点，值为0-1*/
__getset(0,__proto,'anchorX',function(){
return this._layout.anchorX;
},function(value){
this.getLayout().anchorX=value;
this.layOutEabled=true;
this.resetLayoutX();
});
/**Y轴锚点，值为0-1*/
__getset(0,__proto,'anchorY',function(){
return this._layout.anchorY;
},function(value){
this.getLayout().anchorY=value;
this.layOutEabled=true;
this.resetLayoutY();
});
/**
*<p>对象的标签。</p>
*@internal 冗余字段，可以用来储存数据。
*/
__getset(0,__proto,'tag',function(){
return this._tag;
},function(value){
this._tag=value;
});
/**
*<p>鼠标悬停提示。</p>
*<p>可以赋值为文本 <code>String</code> 或函数 <code>Handler</code> ，用来实现自定义样式的鼠标提示和参数携带等。</p>
*@example 以下例子展示了三种鼠标提示：
<listing version="3.0">
private var _testTips:TestTipsUI=new TestTipsUI();
private function testTips():void {
//简单鼠标提示
btn2.toolTip="这里是鼠标提示<b>粗体</b><br>换行";
//自定义的鼠标提示
btn1.toolTip=showTips1;
//带参数的自定义鼠标提示
clip.toolTip=new Handler(this,showTips2,["clip"]);
}
private function showTips1():void {
_testTips.label.text="这里是按钮["+btn1.label+"]";
tip.addChild(_testTips);
}
private function showTips2(name:String):void {
_testTips.label.text="这里是"+name;
tip.addChild(_testTips);
}
</listing>
*/
__getset(0,__proto,'toolTip',function(){
return this._toolTip;
},function(value){
if (this._toolTip !=value){
this._toolTip=value;
if (value !=null){
this.on(/*laya.events.Event.MOUSE_OVER*/"mouseover",this,this.onMouseOver);
this.on(/*laya.events.Event.MOUSE_OUT*/"mouseout",this,this.onMouseOut);
}else {
this.off(/*laya.events.Event.MOUSE_OVER*/"mouseover",this,this.onMouseOver);
this.off(/*laya.events.Event.MOUSE_OUT*/"mouseout",this,this.onMouseOut);
}
}
});
/**
*XML 数据。
*/
__getset(0,__proto,'comXml',function(){
return this._comXml;
},function(value){
this._comXml=value;
});
/**是否变灰。*/
__getset(0,__proto,'gray',function(){
return this._disabled;
},function(value){
if (value!==this._gray){
this._gray=value;
UIUtils.gray(this,value);
}
});
/**是否禁用页面，设置为true后，会变灰并且禁用鼠标。*/
__getset(0,__proto,'disabled',function(){
return this._disabled;
},function(value){
if (value!==this._disabled){
this.gray=this._disabled=value;
this.mouseEnabled=!value;
}
});
return Component;
})(Sprite)
/**
*<code>Box</code> 类是一个控件容器类。
*/
//class laya.ui.Box extends laya.ui.Component
var Box=(function(_super){
function Box(){Box.__super.call(this);;
};
__class(Box,'laya.ui.Box',_super);
var __proto=Box.prototype;
Laya.imps(__proto,{"laya.ui.IBox":true})
/**@inheritDoc */
__getset(0,__proto,'dataSource',_super.prototype._$get_dataSource,function(value){
this._dataSource=value;
for (var name in value){
var comp=this.getChildByName(name);
if (comp)comp.dataSource=value[name];
else if (this.hasOwnProperty(name))this[name]=value[name];
}
});
return Box;
})(Component)
/**
*<code>Button</code> 组件用来表示常用的多态按钮。 <code>Button</code> 组件可显示文本标签、图标或同时显示两者。 *
*<p>可以是单态，两态和三态，默认三态(up,over,down)。</p>
*
*@example 以下示例代码，创建了一个 <code>Button</code> 实例。
*<listing version="3.0">
*package
*{
*import laya.ui.Button;
*import laya.utils.Handler;
*public class Button_Example
*{
*public function Button_Example()
*{
*Laya.init(640,800);//设置游戏画布宽高。
*Laya.stage.bgColor="#efefef";//设置画布的背景颜色。
*Laya.loader.load("resource/ui/button.png",Handler.create(this,onLoadComplete));//加载资源。
*}
*private function onLoadComplete():void
*{
*trace("资源加载完成！");
*var button:Button=new Button("resource/ui/button.png","label");//创建一个 Button 类的实例对象 button ,并传入它的皮肤。
*button.x=100;//设置 button 对象的属性 x 的值，用于控制 button 对象的显示位置。
*button.y=100;//设置 button 对象的属性 y 的值，用于控制 button 对象的显示位置。
*button.clickHandler=new Handler(this,onClickButton,[button]);//设置 button 的点击事件处理器。
*Laya.stage.addChild(button);//将此 button 对象添加到显示列表。
*}
*private function onClickButton(button:Button):void
*{
*trace("按钮button被点击了！");
*}
*}
*}
*</listing>
*<listing version="3.0">
*Laya.init(640,800);//设置游戏画布宽高、渲染模式。
*Laya.stage.bgColor="#efefef";//设置画布的背景颜色。
*Laya.loader.load("resource/ui/button.png",laya.utils.Handler.create(this,loadComplete));//加载资源
*function loadComplete()
*{
*console.log("资源加载完成！");
*var button=new laya.ui.Button("resource/ui/button.png","label");//创建一个 Button 类的实例对象 button ,传入它的皮肤skin和标签label。
*button.x=100;//设置 button 对象的属性 x 的值，用于控制 button 对象的显示位置。
*button.y=100;//设置 button 对象的属性 y 的值，用于控制 button 对象的显示位置。
*button.clickHandler=laya.utils.Handler.create(this,onClickButton,[button],false);//设置 button 的点击事件处理函数。
*Laya.stage.addChild(button);//将此 button 对象添加到显示列表。
*}
*function onClickButton(button)
*{
*console.log("按钮被点击了。",button);
*}
*</listing>
*<listing version="3.0">
*import Button=laya.ui.Button;
*import Handler=laya.utils.Handler;
*class Button_Example{
*constructor()
*{
*Laya.init(640,800);
*Laya.stage.bgColor="#efefef";//设置画布的背景颜色。
*Laya.loader.load("resource/ui/button.png",laya.utils.Handler.create(this,this.onLoadComplete));//加载资源。
*}
*private onLoadComplete()
*{
*var button:Button=new Button("resource/ui/button.png","label");//创建一个 Button 类的实例对象 button ,并传入它的皮肤。
*button.x=100;//设置 button 对象的属性 x 的值，用于控制 button 对象的显示位置。
*button.y=100;//设置 button 对象的属性 y 的值，用于控制 button 对象的显示位置。
*button.clickHandler=new Handler(this,this.onClickButton,[button]);//设置 button 的点击事件处理器。
*Laya.stage.addChild(button);//将此 button 对象添加到显示列表。
*}
*private onClickButton(button:Button):void
*{
*console.log("按钮button被点击了！")
*}
*}
*</listing>
*/
//class laya.ui.Button extends laya.ui.Component
var Button=(function(_super){
function Button(skin,label){
this.toggle=false;
this._bitmap=null;
this._text=null;
this._strokeColors=null;
this._state=0;
this._selected=false;
this._skin=null;
this._autoSize=true;
this._sources=null;
this._clickHandler=null;
this._stateChanged=false;
Button.__super.call(this);
this._labelColors=Styles.buttonLabelColors;
this._stateNum=Styles.buttonStateNum;
(label===void 0)&& (label="");
this.skin=skin;
this.label=label;
}
__class(Button,'laya.ui.Button',_super);
var __proto=Button.prototype;
Laya.imps(__proto,{"laya.ui.ISelect":true})
/**@inheritDoc */
__proto.destroy=function(destroyChild){
(destroyChild===void 0)&& (destroyChild=true);
_super.prototype.destroy.call(this,destroyChild);
this._bitmap && this._bitmap.destroy();
this._text && this._text.destroy(destroyChild);
this._bitmap=null;
this._text=null;
this._clickHandler=null;
this._labelColors=this._sources=this._strokeColors=null;
}
/**@inheritDoc */
__proto.createChildren=function(){
this.graphics=this._bitmap=new AutoBitmap();
}
/**@private */
__proto.createText=function(){
if (!this._text){
this._text=new Text();
this._text.overflow=Text.HIDDEN;
this._text.align="center";
this._text.valign="middle";
}
}
/**@inheritDoc */
__proto.initialize=function(){
this.on(/*laya.events.Event.MOUSE_OVER*/"mouseover",this,this.onMouse);
this.on(/*laya.events.Event.MOUSE_OUT*/"mouseout",this,this.onMouse);
this.on(/*laya.events.Event.MOUSE_DOWN*/"mousedown",this,this.onMouse);
this.on(/*laya.events.Event.MOUSE_UP*/"mouseup",this,this.onMouse);
this.on(/*laya.events.Event.CLICK*/"click",this,this.onMouse);
}
/**
*对象的 <code>Event.MOUSE_OVER、Event.MOUSE_OUT、Event.MOUSE_DOWN、Event.MOUSE_UP、Event.CLICK</code> 事件侦听处理函数。
*@param e Event 对象。
*/
__proto.onMouse=function(e){
if (this.toggle===false && this._selected)return;
if (e.type===/*laya.events.Event.CLICK*/"click"){
this.toggle && (this.selected=!this._selected);
this._clickHandler && this._clickHandler.run();
return;
}
!this._selected && (this.state=Button.stateMap[e.type]);
}
/**
*@private
*对象的资源切片发生改变。
*/
__proto.changeClips=function(){
var img=Loader.getRes(this._skin);
if (!img){
console.log("lose skin",this._skin);
return;
};
var width=img.sourceWidth;
var height=img.sourceHeight / this._stateNum;
var key=this._skin+this._stateNum;
var clips=AutoBitmap.getCache(key);
if (clips)this._sources=clips;
else {
this._sources=[];
if (this._stateNum===1){
this._sources.push(img);
}else {
for (var i=0;i < this._stateNum;i++){
this._sources.push(Texture.createFromTexture(img,0,height *i,width,height));
}
}
AutoBitmap.setCache(key,this._sources);
}
if (this._autoSize){
this._bitmap.width=this._width || width;
this._bitmap.height=this._height || height;
if (this._text){
this._text.width=this._bitmap.width;
this._text.height=this._bitmap.height;
}
}else {
this._text && (this._text.x=width);
}
}
/**
*@private
*改变对象的状态。
*/
__proto.changeState=function(){
this._stateChanged=false;
this.runCallLater(this.changeClips);
var index=this._state < this._stateNum ? this._state :this._stateNum-1;
this._sources && (this._bitmap.source=this._sources[index]);
if (this.label){
this._text.color=this._labelColors[index];
if (this._strokeColors)this._text.strokeColor=this._strokeColors[index];
}
}
/**@private */
__proto._setStateChanged=function(){
if (!this._stateChanged){
this._stateChanged=true;
this.callLater(this.changeState);
}
}
/**
*<p>描边颜色，以字符串表示。</p>
*默认值为 "#000000"（黑色）;
*@see laya.display.Text.strokeColor()
*/
__getset(0,__proto,'labelStrokeColor',function(){
this.createText();
return this._text.strokeColor;
},function(value){
this.createText();
this._text.strokeColor=value
});
/**
*@inheritDoc
*/
__getset(0,__proto,'measureHeight',function(){
this.runCallLater(this.changeClips);
return this._text ? Math.max(this._bitmap.height,this._text.height):this._bitmap.height;
});
/**
*<p>对象的皮肤资源地址。</p>
*支持单态，两态和三态，用 <code>stateNum</code> 属性设置
*<p>对象的皮肤地址，以字符串表示。</p>
*@see #stateNum
*/
__getset(0,__proto,'skin',function(){
return this._skin;
},function(value){
if (this._skin !=value){
this._skin=value;
this.callLater(this.changeClips);
this._setStateChanged();
}
});
/**
*对象的状态值。
*@see #stateMap
*/
__getset(0,__proto,'state',function(){
return this._state;
},function(value){
if (this._state !=value){
this._state=value;
this._setStateChanged();
}
});
/**
*按钮文本标签 <code>Text</code> 控件。
*/
__getset(0,__proto,'text',function(){
this.createText();
return this._text;
});
/**
*<p>指定对象的状态值，以数字表示。</p>
*<p>默认值为3。此值决定皮肤资源图片的切割方式。</p>
*<p><b>取值：</b>
*<li>1：单态。图片不做切割，按钮的皮肤状态只有一种。</li>
*<li>2：两态。图片将以竖直方向被等比切割为2部分，从上向下，依次为
*弹起状态皮肤、
*按下和经过及选中状态皮肤。</li>
*<li>3：三态。图片将以竖直方向被等比切割为2部分，从上向下，依次为
*弹起状态皮肤、
*经过状态皮肤、
*按下和选中状态皮肤</li>
*</p>
*/
__getset(0,__proto,'stateNum',function(){
return this._stateNum;
},function(value){
if (this._stateNum !=value){
this._stateNum=value < 1 ? 1 :value > 3 ? 3 :value;
this.callLater(this.changeClips);
}
});
/**
*表示按钮各个状态下的描边颜色。
*<p><b>格式:</b> "upColor,overColor,downColor,disableColor"。</p>
*/
__getset(0,__proto,'strokeColors',function(){
return this._strokeColors ? this._strokeColors.join(","):"";
},function(value){
this._strokeColors=UIUtils.fillArray(Styles.buttonLabelColors,value,String);
this._setStateChanged();
});
/**
*表示按钮各个状态下的文本颜色。
*<p><b>格式:</b> "upColor,overColor,downColor,disableColor"。</p>
*/
__getset(0,__proto,'labelColors',function(){
return this._labelColors.join(",");
},function(value){
this._labelColors=UIUtils.fillArray(Styles.buttonLabelColors,value,String);
this._setStateChanged();
});
/**
*@inheritDoc
*/
__getset(0,__proto,'measureWidth',function(){
this.runCallLater(this.changeClips);
if (this._autoSize)return this._bitmap.width;
this.runCallLater(this.changeState);
return this._bitmap.width+(this._text ? this._text.width :0);
});
/**
*按钮的文本内容。
*/
__getset(0,__proto,'label',function(){
return this._text ? this._text.text :null;
},function(value){
if (!this._text && !value)return;
this.createText();
if (this._text.text !=value){
value && !this._text.displayedInStage && this.addChild(this._text);
this._text.text=(value+"").replace(/\\n/g,"\n");
this._setStateChanged();
}
});
/**
*表示按钮的选中状态。
*<p>如果值为true，表示该对象处于选中状态。否则该对象处于未选中状态。</p>
*/
__getset(0,__proto,'selected',function(){
return this._selected;
},function(value){
if (this._selected !=value){
this._selected=value;
this.state=this._selected ? 2 :0;
this.event(/*laya.events.Event.CHANGE*/"change");
}
});
/**
*表示按钮文本标签的边距。
*<p><b>格式：</b>"上边距,右边距,下边距,左边距"。</p>
*/
__getset(0,__proto,'labelPadding',function(){
this.createText();
return this._text.padding.join(",");
},function(value){
this.createText();
this._text.padding=UIUtils.fillArray(Styles.labelPadding,value,Number);
});
/**
*表示按钮文本标签的字体大小。
*@see laya.display.Text.fontSize()
*/
__getset(0,__proto,'labelSize',function(){
this.createText();
return this._text.fontSize;
},function(value){
this.createText();
this._text.fontSize=value
});
/**
*<p>描边宽度（以像素为单位）。</p>
*默认值0，表示不描边。
*@see laya.display.Text.stroke()
*/
__getset(0,__proto,'labelStroke',function(){
this.createText();
return this._text.stroke;
},function(value){
this.createText();
this._text.stroke=value
});
/**
*表示按钮文本标签是否为粗体字。
*@see laya.display.Text.bold()
*/
__getset(0,__proto,'labelBold',function(){
this.createText();
return this._text.bold;
},function(value){
this.createText();
this._text.bold=value;
});
/**
*表示按钮文本标签的字体名称，以字符串形式表示。
*@see laya.display.Text.font()
*/
__getset(0,__proto,'labelFont',function(){
this.createText();
return this._text.font;
},function(value){
this.createText();
this._text.font=value;
});
/**标签对齐模式，默认为居中对齐。*/
__getset(0,__proto,'labelAlign',function(){
this.createText()
return this._text.align;
},function(value){
this.createText()
this._text.align=value;
});
/**
*对象的点击事件处理器函数（无默认参数）。
*/
__getset(0,__proto,'clickHandler',function(){
return this._clickHandler;
},function(value){
this._clickHandler=value;
});
/**
*<p>当前实例的位图 <code>AutoImage</code> 实例的有效缩放网格数据。</p>
*<p>数据格式："上边距,右边距,下边距,左边距,是否重复填充(值为0：不重复填充，1：重复填充)"，以逗号分隔。
*<ul><li>例如："4,4,4,4,1"</li></ul></p>
*@see laya.ui.AutoBitmap.sizeGrid
*/
__getset(0,__proto,'sizeGrid',function(){
if (this._bitmap.sizeGrid)return this._bitmap.sizeGrid.join(",");
return null;
},function(value){
this._bitmap.sizeGrid=UIUtils.fillArray(Styles.defaultSizeGrid,value,Number);
});
/**@inheritDoc */
__getset(0,__proto,'width',_super.prototype._$get_width,function(value){
_super.prototype._$set_width.call(this,value);
if (this._autoSize){
this._bitmap.width=value;
this._text && (this._text.width=value);
}
});
/**@inheritDoc */
__getset(0,__proto,'height',_super.prototype._$get_height,function(value){
_super.prototype._$set_height.call(this,value);
if (this._autoSize){
this._bitmap.height=value;
this._text && (this._text.height=value);
}
});
/**@inheritDoc */
__getset(0,__proto,'dataSource',_super.prototype._$get_dataSource,function(value){
this._dataSource=value;
if ((typeof value=='number')|| (typeof value=='string'))this.label=value+"";
else _super.prototype._$set_dataSource.call(this,value);
});
/**图标x,y偏移，格式：100,100*/
__getset(0,__proto,'iconOffset',function(){
return this._bitmap._offset ? null :this._bitmap._offset.join(",");
},function(value){
if (value)this._bitmap._offset=UIUtils.fillArray([1,1],value,Number);
else this._bitmap._offset=[];
});
__static(Button,
['stateMap',function(){return this.stateMap={"mouseup":0,"mouseover":1,"mousedown":2,"mouseout":0};}
]);
return Button;
})(Component)
/**
*<p> <code>Clip</code> 类是位图切片动画。</p>
*<p> <code>Clip</code> 可将一张图片，按横向分割数量 <code>clipX</code> 、竖向分割数量 <code>clipY</code> ，
*或横向分割每个切片的宽度 <code>clipWidth</code> 、竖向分割每个切片的高度 <code>clipHeight</code> ，
*从左向右，从上到下，分割组合为一个切片动画。</p>
*
*@example 以下示例代码，创建了一个 <code>Clip</code> 实例。
*<listing version="3.0">
*package
*{
*import laya.ui.Clip;
*public class Clip_Example
*{
*private var clip:Clip;
*public function Clip_Example()
*{
*Laya.init(640,800);//设置游戏画布宽高。
*Laya.stage.bgColor="#efefef";//设置画布的背景颜色。
*onInit();
*}
*private function onInit():void
*{
*clip=new Clip("resource/ui/clip_num.png",10,1);//创建一个 Clip 类的实例对象 clip ,传入它的皮肤skin和横向分割数量、竖向分割数量。
*clip.autoPlay=true;//设置 clip 动画自动播放。
*clip.interval=100;//设置 clip 动画的播放时间间隔。
*clip.x=100;//设置 clip 对象的属性 x 的值，用于控制 clip 对象的显示位置。
*clip.y=100;//设置 clip 对象的属性 y 的值，用于控制 clip 对象的显示位置。
*clip.on(Event.CLICK,this,onClick);//给 clip 添加点击事件函数侦听。
*Laya.stage.addChild(clip);//将此 clip 对象添加到显示列表。
*}
*private function onClick():void
*{
*trace("clip 的点击事件侦听处理函数。clip.total="+clip.total);
*if (clip.isPlaying==true)
*{
*clip.stop();//停止动画。
*}else {
*clip.play();//播放动画。
*}
*}
*}
*}
*</listing>
*<listing version="3.0">
*Laya.init(640,800);//设置游戏画布宽高
*Laya.stage.bgColor="#efefef";//设置画布的背景颜色
*var clip;
*Laya.loader.load("resource/ui/clip_num.png",laya.utils.Handler.create(this,loadComplete));//加载资源
*function loadComplete(){
*console.log("资源加载完成！");
*clip=new laya.ui.Clip("resource/ui/clip_num.png",10,1);//创建一个 Clip 类的实例对象 clip ,传入它的皮肤skin和横向分割数量、竖向分割数量。
*clip.autoPlay=true;//设置 clip 动画自动播放。
*clip.interval=100;//设置 clip 动画的播放时间间隔。
*clip.x=100;//设置 clip 对象的属性 x 的值，用于控制 clip 对象的显示位置。
*clip.y=100;//设置 clip 对象的属性 y 的值，用于控制 clip 对象的显示位置。
*clip.on(Event.CLICK,this,onClick);//给 clip 添加点击事件函数侦听。
*Laya.stage.addChild(clip);//将此 clip 对象添加到显示列表。
*}
*function onClick()
*{
*console.log("clip 的点击事件侦听处理函数。");
*if(clip.isPlaying==true)
*{
*clip.stop();
*}else {
*clip.play();
*}
*}
*</listing>
*<listing version="3.0">
*import Clip=laya.ui.Clip;
*import Handler=laya.utils.Handler;
*class Clip_Example {
*private clip:Clip;
*constructor(){
*Laya.init(640,800);//设置游戏画布宽高。
*Laya.stage.bgColor="#efefef";//设置画布的背景颜色。
*this.onInit();
*}
*private onInit():void {
*this.clip=new Clip("resource/ui/clip_num.png",10,1);//创建一个 Clip 类的实例对象 clip ,传入它的皮肤skin和横向分割数量、竖向分割数量。
*this.clip.autoPlay=true;//设置 clip 动画自动播放。
*this.clip.interval=100;//设置 clip 动画的播放时间间隔。
*this.clip.x=100;//设置 clip 对象的属性 x 的值，用于控制 clip 对象的显示位置。
*this.clip.y=100;//设置 clip 对象的属性 y 的值，用于控制 clip 对象的显示位置。
*this.clip.on(laya.events.Event.CLICK,this,this.onClick);//给 clip 添加点击事件函数侦听。
*Laya.stage.addChild(this.clip);//将此 clip 对象添加到显示列表。
*}
*private onClick():void {
*console.log("clip 的点击事件侦听处理函数。clip.total="+this.clip.total);
*if (this.clip.isPlaying==true){
*this.clip.stop();//停止动画。
*}else {
*this.clip.play();//播放动画。
*}
*}
*}
*
*</listing>
*/
//class laya.ui.Clip extends laya.ui.Component
var Clip=(function(_super){
function Clip(url,clipX,clipY){
this._sources=null;
this._bitmap=null;
this._skin=null;
this._clipX=1;
this._clipY=1;
this._clipWidth=0;
this._clipHeight=0;
this._autoPlay=false;
this._interval=50;
this._complete=null;
this._isPlaying=false;
this._index=0;
this._clipChanged=false;
this._group=null;
Clip.__super.call(this);
(clipX===void 0)&& (clipX=1);
(clipY===void 0)&& (clipY=1);
this._clipX=clipX;
this._clipY=clipY;
this.skin=url;
}
__class(Clip,'laya.ui.Clip',_super);
var __proto=Clip.prototype;
/**@inheritDoc */
__proto.destroy=function(clearFromCache){
(clearFromCache===void 0)&& (clearFromCache=false);
_super.prototype.destroy.call(this,true);
this._bitmap && this._bitmap.destroy();
this._bitmap=null;
this._sources=null;
}
/**
*销毁对象并释放加载的皮肤资源。
*/
__proto.dispose=function(){
this.destroy(true);
Laya.loader.clearRes(this._skin);
}
/**@inheritDoc */
__proto.createChildren=function(){
this.graphics=this._bitmap=new AutoBitmap();
}
/**@inheritDoc */
__proto.initialize=function(){
this.on(/*laya.events.Event.DISPLAY*/"display",this,this._onDisplay);
this.on(/*laya.events.Event.UNDISPLAY*/"undisplay",this,this._onDisplay);
}
/**@private */
__proto._onDisplay=function(e){
if (this._isPlaying){
if (this._displayedInStage)this.play();
else this.stop();
}else if (this._autoPlay && this._displayedInStage){
this.play();
}
}
/**
*@private
*改变切片的资源、切片的大小。
*/
__proto.changeClip=function(){
this._clipChanged=false;
if (!this._skin)return;
var img=Loader.getRes(this._skin);
if (img){
this.loadComplete(this._skin,img);
}else {
Laya.loader.load(this._skin,Handler.create(this,this.loadComplete,[this._skin]));
}
}
/**
*@private
*加载切片图片资源完成函数。
*@param url 资源地址。
*@param img 纹理。
*/
__proto.loadComplete=function(url,img){
if (url===this._skin && img){
this._clipWidth || (this._clipWidth=Math.ceil(img.sourceWidth / this._clipX));
this._clipHeight || (this._clipHeight=Math.ceil(img.sourceHeight / this._clipY));
var key=this._skin+this._clipWidth+this._clipHeight;
var clips=AutoBitmap.getCache(key);
if (clips)this._sources=clips;
else {
this._sources=[];
for (var i=0;i < this._clipY;i++){
for (var j=0;j < this._clipX;j++){
this._sources.push(Texture.createFromTexture(img,this._clipWidth *j,this._clipHeight *i,this._clipWidth,this._clipHeight));
}
}
AutoBitmap.setCache(key,this._sources);
}
this.index=this._index;
this.event(/*laya.events.Event.LOADED*/"loaded");
this.onCompResize();
}
}
/**
*播放动画。
*/
__proto.play=function(){
this._isPlaying=true;
this.index=0;
this._index++;
Laya.timer.loop(this.interval,this,this._loop);
}
/**
*@private
*/
__proto._loop=function(){
if (this._style.visible && this._sources){
this.index=this._index,this._index++;
this._index >=this._sources.length && (this._index=0);
}
}
/**
*停止动画。
*/
__proto.stop=function(){
this._isPlaying=false;
Laya.timer.clear(this,this._loop);
}
/**@private */
__proto._setClipChanged=function(){
if (!this._clipChanged){
this._clipChanged=true;
this.callLater(this.changeClip);
}
}
/**
*表示动画播放间隔时间(以毫秒为单位)。
*/
__getset(0,__proto,'interval',function(){
return this._interval;
},function(value){
if (this._interval !=value){
this._interval=value;
if (this._isPlaying)this.play();
}
});
/**
*@copy laya.ui.Image#skin
*/
__getset(0,__proto,'skin',function(){
return this._skin;
},function(value){
if (this._skin !=value){
this._skin=value;
if (value){
this._setClipChanged()
}else {
this._bitmap.source=null;
}
}
});
/**
*源数据。
*/
__getset(0,__proto,'sources',function(){
return this._sources;
},function(value){
this._sources=value;
this.index=this._index;
this.event(/*laya.events.Event.LOADED*/"loaded");
});
/**X轴（横向）切片数量。*/
__getset(0,__proto,'clipX',function(){
return this._clipX;
},function(value){
this._clipX=value;
this._setClipChanged()
});
/**Y轴(竖向)切片数量。*/
__getset(0,__proto,'clipY',function(){
return this._clipY;
},function(value){
this._clipY=value;
this._setClipChanged()
});
/**
*切片动画的总帧数。
*/
__getset(0,__proto,'total',function(){
this.runCallLater(this.changeClip);
return this._sources ? this._sources.length :0;
});
/**
*横向分割时每个切片的宽度，与 <code>clipX</code> 同时设置时优先级高于 <code>clipX</code> 。
*/
__getset(0,__proto,'clipWidth',function(){
return this._clipWidth;
},function(value){
this._clipWidth=value;
this._setClipChanged()
});
/**
*<p>当前实例的位图 <code>AutoImage</code> 实例的有效缩放网格数据。</p>
*<p>数据格式："上边距,右边距,下边距,左边距,是否重复填充(值为0：不重复填充，1：重复填充)"，以逗号分隔。
*<ul><li>例如："4,4,4,4,1"</li></ul></p>
*@see laya.ui.AutoBitmap.sizeGrid
*/
__getset(0,__proto,'sizeGrid',function(){
if (this._bitmap.sizeGrid)return this._bitmap.sizeGrid.join(",");
return null;
},function(value){
this._bitmap.sizeGrid=UIUtils.fillArray(Styles.defaultSizeGrid,value,Number);
});
/**
*资源分组。
*/
__getset(0,__proto,'group',function(){
return this._group;
},function(value){
if (value && this._skin)Loader.setGroup(this._skin,value);
this._group=value;
});
/**
*竖向分割时每个切片的高度，与 <code>clipY</code> 同时设置时优先级高于 <code>clipY</code> 。
*/
__getset(0,__proto,'clipHeight',function(){
return this._clipHeight;
},function(value){
this._clipHeight=value;
this._setClipChanged()
});
/**@inheritDoc */
__getset(0,__proto,'width',_super.prototype._$get_width,function(value){
_super.prototype._$set_width.call(this,value);
this._bitmap.width=value;
});
/**@inheritDoc */
__getset(0,__proto,'height',_super.prototype._$get_height,function(value){
_super.prototype._$set_height.call(this,value);
this._bitmap.height=value;
});
/**@inheritDoc */
__getset(0,__proto,'measureWidth',function(){
this.runCallLater(this.changeClip);
return this._bitmap.width;
});
/**@inheritDoc */
__getset(0,__proto,'measureHeight',function(){
this.runCallLater(this.changeClip);
return this._bitmap.height;
});
/**
*当前帧索引。
*/
__getset(0,__proto,'index',function(){
return this._index;
},function(value){
this._index=value;
this._bitmap && this._sources && (this._bitmap.source=this._sources[value]);
this.event(/*laya.events.Event.CHANGE*/"change");
});
/**
*表示是否自动播放动画，若自动播放值为true,否则值为false;
*<p>可控制切片动画的播放、停止。</p>
*/
__getset(0,__proto,'autoPlay',function(){
return this._autoPlay;
},function(value){
if (this._autoPlay !=value){
this._autoPlay=value;
value ? this.play():this.stop();
}
});
/**
*表示动画的当前播放状态。
*如果动画正在播放中，则为true，否则为flash。
*/
__getset(0,__proto,'isPlaying',function(){
return this._isPlaying;
},function(value){
this._isPlaying=value;
});
/**@inheritDoc */
__getset(0,__proto,'dataSource',_super.prototype._$get_dataSource,function(value){
this._dataSource=value;
if (((typeof value=='number')&& Math.floor(value)==value)|| (typeof value=='string'))this.index=parseInt(value);
else _super.prototype._$set_dataSource.call(this,value);
});
/**
*<code>AutoBitmap</code> 位图实例。
*/
__getset(0,__proto,'bitmap',function(){
return this._bitmap;
});
return Clip;
})(Component)
/**
*<code>ColorPicker</code> 组件将显示包含多个颜色样本的列表，用户可以从中选择颜色。
*
*@example 以下示例代码，创建了一个 <code>ColorPicker</code> 实例。
*<listing version="3.0">
*package
*{
*import laya.ui.ColorPicker;
*import laya.utils.Handler;
*public class ColorPicker_Example
*{
*public function ColorPicker_Example()
*{
*Laya.init(640,800);//设置游戏画布宽高。
*Laya.stage.bgColor="#efefef";//设置画布的背景颜色。
*Laya.loader.load("resource/ui/color.png",Handler.create(this,onLoadComplete));//加载资源。
*}
*private function onLoadComplete():void
*{
*trace("资源加载完成！");
*var colorPicket:ColorPicker=new ColorPicker();//创建一个 ColorPicker 类的实例对象 colorPicket 。
*colorPicket.skin="resource/ui/color.png";//设置 colorPicket 的皮肤。
*colorPicket.x=100;//设置 colorPicket 对象的属性 x 的值，用于控制 colorPicket 对象的显示位置。
*colorPicket.y=100;//设置 colorPicket 对象的属性 y 的值，用于控制 colorPicket 对象的显示位置。
*colorPicket.changeHandler=new Handler(this,onChangeColor,[colorPicket]);//设置 colorPicket 的颜色改变回调函数。
*Laya.stage.addChild(colorPicket);//将此 colorPicket 对象添加到显示列表。
*}
*private function onChangeColor(colorPicket:ColorPicker):void
*{
*trace("当前选择的颜色： "+colorPicket.selectedColor);
*}
*}
*}
*</listing>
*<listing version="3.0">
*Laya.init(640,800);//设置游戏画布宽高
*Laya.stage.bgColor="#efefef";//设置画布的背景颜色
*Laya.loader.load("resource/ui/color.png",laya.utils.Handler.create(this,loadComplete));//加载资源
*function loadComplete()
*{
*console.log("资源加载完成！");
*var colorPicket=new laya.ui.ColorPicker();//创建一个 ColorPicker 类的实例对象 colorPicket 。
*colorPicket.skin="resource/ui/color.