Clip 切片

1、Laya.ui.Clip 组件可用于显示位图切片动画，Clip 可以将一张图片，按横向分隔数量 clipX、竖向分隔数量 clipY，或横向分割每个切片的宽度 clipWidth、竖向分割每个切片的高度 clipHeight，从左向右，从上到下，分割组合为一个切片动画。

2、Clip 组件可以用来播放切片动画，和显示切片动画的某一帧图片。
3、LayaAir 对于以 clip 前缀命令的资源自动识别为 Clip 组件。

Package	laya.ui
类	public class Clip
Inheritance	Clip Component Sprite Node EventDispatcher Object
子类	FontClip

4、Image 和 Clip 组件是唯一支持异步加载的两个组件，比如clip.skin = "abc/xxx.png"，其他UI组件均不支持异步加载。

Property（属性）
autoPlay : Boolean ,表示是否自动播放动画，若自动播放值为true,否则值为false; 可控制切片动画的播放、停止。
clipHeight : Number ,竖向分割时每个切片的高度，与 clipY 同时设置时优先级高于 clipY
clipWidth : Number ,横向分割时每个切片的宽度，与 clipX 同时设置时优先级高于 clipX 。
clipX : int ,X轴（横向）切片数量。
clipY : int ,Y轴(竖向)切片数量。
height : Number ,[override] 表示显示对象的高度，以像素为单位。注：当值为0时，高度为自适应大小。
index : int ,当前帧索引。
interval : int ,表示动画播放间隔时间(以毫秒为单位)。
isPlaying : Boolean ,表示动画的当前播放状态。如果动画正在播放中，则为true，否则为flash。
skin : String 对象的皮肤地址，以字符串表示。如果资源未加载，则先加载资源，加载完成后应用于此对象。注意：资源加载完成后，会自动缓存至资源库中。
total : int ,[read-only] 切片动画的总帧数。
width : Number ,[override] 表示显示对象的宽度，以像素为单位。注：当值为0时，宽度为自适应大小。

Method（方法）
Clip(url:String = null, clipX:int = 1, clipY:int = 1) ，创建一个新的 Clip 示例。
destroy(destroyChild:Boolean = true):void [override] 销毁此对象。destroy对象默认会把自己从父节点移除，并且清理自身引用关系，等待js自动垃圾回收机制回收。destroy后不能再使用。 destroy时会移除自身的事情监听，自身的timer监听，移除子对象及从父节点移除自己。
dispose():void ，销毁对象并释放加载的皮肤资源。
play():void ，播放动画。
stop():void ，停止动画。

更多 API 可以参考官网：https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.Clip

默认Clip 资源

1、现在就以使用默认提供的 clip_num.png 为例进行操作。

//初始化引擎，设置宽高并开启WebGL渲染模式
Laya.init(600, 400, Laya.WebGL);var atlas_comp = "res/atlas/comp.atlas";//atlas_comp：系统默认图集资源
var skin_clip_num = "comp/clip_num.png";//skin_clip_num：系统默认提供的切片组件
var clip_num;//clip_num：切片组件对象//加载图集成功后，执行onLoad回调方法
Laya.loader.load(atlas_comp, Laya.Handler.create(this, onLoaded));
function onLoaded() {//创建一个新的Clip实例；clipX x方向分割个数、clipY y方向分割个数clip_num = new Laya.Clip(skin_clip_num, 10, 1);// clip_num.autoPlay = true;//autoPlay属性获取或者设置是否自动播放clip_num.interval = 1000;//设置动画播放间隔时间(以毫秒为单位)clip_num.pos(30, 10);//设置对象显示的位置Laya.stage.addChild(clip_num);//添加到舞台显示addButton();
}var clip_index = 0;//clip_index：切片动画当前播放的帧索引(从0开始)
//添加一个操作按钮
function addButton() {//创建一个按钮实例var button = new Laya.Button("comp/button.png", clip_num.isPlaying?"暂 停":"播 放");button.labelSize = 20;//按钮文本字体大小button.pos(200, 10);//按钮组件显示的位置Laya.stage.addChild(button);//添加到舞台显示button.on(Laya.Event.CLICK, this, function () {//为按钮绑定单击事件if (clip_num.isPlaying) {//当切片动画在播放时clip_num.stop();//停止切片动画clip_index = clip_num.index;//获取切片动画当前帧索引，从1开始button.label = "播 放";//改变按钮显示的文本} else {clip_num.play();//设置当前帧索引clip_num.index必须是在 play 方法后clip_num.index = clip_index;//设置切片动画开始播放的帧索引，否则 play 默认从第0帧开始播放button.label = "暂 停";}});
}

自定义Clip 资源

1、如上所示 clip_countDown.png 是自己用 PS 所绘制，尺寸没有强制要求，注意的是应该进行等分。

//初始化引擎，设置宽高并开启WebGL渲染模式
Laya.init(1080, 1920, Laya.WebGL);
Laya.stage.bgColor = "#252525";var skin_clip_num = "ui/clip_countDown.png";//skin_clip_num：自定义的切片组件
var clip_num;//clip_num：切片组件对象//资源加载成功后，执行 onLoad 回调方法
Laya.loader.load(skin_clip_num, Laya.Handler.create(this, onLoaded));
function onLoaded() {//创建一个新的Clip实例；x方向分割10个、y方向分割1个clip_num = new Laya.Clip(skin_clip_num, 10, 1);clip_num.size(50,50);//设置切片动画对象的尺寸大小// clip_num.autoPlay = true;//autoPlay属性获取或者设置是否自动播放clip_num.interval = 1000;//设置动画播放间隔时间(以毫秒为单位)clip_num.pos(30, 10);//设置对象显示的位置Laya.stage.addChild(clip_num);//添加到舞台显示
}//使用系统自带的按钮皮肤，先加载图集
Laya.loader.load("res/atlas/comp.atlas",Laya.Handler.create(this,addButton));
var clip_index = 0;//clip_index：切片动画当前播放的帧索引(从0开始)
//添加一个操作按钮
function addButton() {//创建一个按钮实例，系统默认按钮组件皮肤var button = new Laya.Button("comp/button.png", clip_num.isPlaying?"暂 停":"播 放");button.labelSize = 20;//按钮文本字体大小button.pos(200, 10);//按钮组件显示的位置Laya.stage.addChild(button);//添加到舞台显示button.on(Laya.Event.CLICK, this, function () {//为按钮绑定单击事件if (clip_num.isPlaying) {//当切片动画在播放时Laya.SoundManager.stopMusic();//停止背景音乐clip_num.stop();//停止切片动画clip_index = clip_num.index;//获取切片动画当前帧索引，从1开始button.label = "播 放";//改变按钮显示的文本} else {Laya.SoundManager.playMusic("http://img02.tuke88.com/preview_music/00/08/56/preview-5b835eaf13a9b9053.mp3");//播放一个背景音乐clip_num.play();//设置当前帧索引clip_num.index必须是在 play 方法后clip_num.index = clip_index;//设置切片动画开始播放的帧索引，否则 play 默认从第0帧开始播放button.label = "暂 停";}});
}

更多内容可以参考官网：https://ldc.layabox.com/doc/?nav=zh-js-2-3-3

ComboBox

Package	laya.ui
类	public class ComboBox
Inheritance	ComboBox Component Sprite Node EventDispatcher Object

1、laya.ui.ComboBox 组件包含一个下拉列表，用户可以从该列表中选择单个值。

2、以 combobox_ 或者 combo_前缀命名的组件自动识别为下拉框 comboBox 组件。系统默认提供的下拉框组件如下图所示，combobox.png 其实和 button.png 组件很像。

Property（属性）
height : Number ，[override] 表示显示对象的高度，以像素为单位。注：当值为0时，高度为自适应大小。
isOpen : Boolean ，表示下拉列表的打开状态。
itemColors : String ，下拉列表项颜色。格式："悬停或被选中时背景颜色,悬停或被选中时标签颜色,标签颜色,边框颜色,背景颜色"
itemSize : int ，下拉列表项标签的字体大小。
labelBold : Boolean ，表示按钮文本标签是否为粗体字。（按钮表示未下拉时的按钮）
labels : String ，标签集合字符串。也可以通过构造器直接设置
labelSize : int ，获取或设置对 ComboBox 组件所包含的 Button 组件的标签字体大小。
selectedIndex : int ，表示选择的下拉列表项的索引。从0开始
selectedLabel : String ，表示选择的下拉列表项的的标签。
selectHandler : Handler ，改变下拉列表的选择项时执行的处理器(默认返回参数index:int)。
skin : String ，对象的皮肤资源地址。支持单态，两态和三态，用 stateNum 属性设置对象的皮肤地址，以字符串表示。
stateNum : int ，表示按钮的状态值。
visibleNum : int ，获取或设置没有滚动条的下拉列表中可显示的最大行数。
width : Number ，[override] 表示显示对象的宽度，以像素为单位。注：当值为0时，宽度为自适应大小。

更多 API 可以参考官网：https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.ComboBox

编码示例

1、这里直接使用引擎默认提供的 combobox.png 资源，并把它单独拷贝到新建的 bin/ui 目录下了。如果自己想重新 PS 一张，则和 "自定义按钮资源' 同理，不再累述。

(function () {//combobox.png：系统默认提供的下拉框资源，从 laya/assets/comp 下复制一份到 bin/ui 目录下var skin = "ui/combobox.png";Laya.init(1080, 1920, Laya.WebGL);//初始化引擎，不支持WebGL时自动切换至CanvasLaya.stage.bgColor = "#fff";var text_info;//下拉框皮肤加载完成后执行回调函数Laya.loader.load(skin, Laya.Handler.create(this, onLoadComplete));function onLoadComplete() {/*** 第一个参数：下拉框皮肤地址* 第二个参数：下拉列表的标签集字符串。以逗号做分割，如"item0,item1,item2,item3,item4,item5"*/var comboBox = new Laya.ComboBox(skin, "Java,Android,LayaAir,Vue,React,RocketMQ");comboBox.labelSize = 25;//获取或设置 ComboBox 组件包含的 Button 组件的标签字体大小，即选中后显示的文本大小comboBox.itemSize = 20;//获取和设置下拉列表项标签的字体大小comboBox.size(150, 30);//下拉框按钮的大小,应该根据内容文本长度和大小进行合理设置，确保能包含最长的选项comboBox.pos(30, 10);//下拉框组件的位置Laya.stage.addChild(comboBox);//添加到舞台显示/*** selectHandler：改变下拉列表的选择项时执行的处理器(默认返回参数index:int)*/comboBox.selectHandler = new Laya.Handler(this, function (cb) {text_info.text = "选中： " + cb.selectedIndex + "=" + cb.selectedLabel;}, [comboBox]);showText();}//显示一段文本function showText(){text_info = new Laya.Text();text_info.text = "选中项";text_info.fontSize = 20;text_info.pos(230,20);Laya.stage.addChild(text_info);}
})();

官网地址：https://ldc.layabox.com/doc/?nav=zh-js-2-3-4

LayaAir UI 组件 # Clip 切片、ComboBox 下拉框相关推荐

自绘制HT For Web ComboBox下拉框组件
传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让 ...
下拉框的value值怎么设置为变量_自绘制HT For Web ComboBox下拉框组件
传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让 ...
easyui的combobox下拉框初始化默认值以及保持该值一直显示的方法
easyui的combobox下拉框默认初始值是空,下面是实现从远程加载数据之后初始化默认值,以及让该值一直排在下拉框的最顶部的方式. 目前的需求是需要在初始化的时候添加"全部数据库&quo ...
python tk下拉列表的state_Python tkinter之ComboBox(下拉框)的使用简介
1.ComboBox的基础属性 # -*- encoding=utf-8 -*- import tkinter from tkinter import * from tkinter import tt ...
Devexpress GridControl 设置combobox下拉框
GridControl 设置combobox下拉框 //设置combobox下拉框 private void GetComboBox(string str) { ...
winform c#绑定combobox下拉框年度代码。
winform c#绑定combobox下拉框年度代码. comboBox1.Items.AddRange(new object[] { "2012", "2013&q ...
【Qt串口调试助手】1.3 - 重写ComboBox下拉框的鼠标点击事件，实现点击下拉框扫描可用串口
由于ComboBox没有鼠标点击信号,所以如果想实现点击下拉框响应,需要重写ComboBox下拉框的鼠标点击事件.在点击事件中,添加扫描可用串口代码,实现点击下拉框时重新扫描串口.并且下拉框内容输出端 ...
MFC_C++02_模态对话框，非模态对话框，StaticText静态文本，CEditCtrl控件，ComboBox下拉框，CListCtrl控件，CTreeCtrl 树控件，TabCtrl标签控件
01 模态对话框创建更改标题名: 菜单栏 --> 视图->工具箱 ,找到工具箱导入两个按钮: 准备对话框: 插入就可以了,更改名称双击按钮,可以进入点击事件创建控件的类:右击-&g ...
element ui中的el-dropdown（下拉框）防止点一下就隐藏的问题
element ui中的el-dropdown(下拉框)防止点一下就影藏的问题当使用el-dropdown下拉框时,下拉框的每项中,可能需要加入@click.@change或复选框等事件,而el-d ...
easyui combobox下拉框的取value text的API
$("#selectId").combobox('setValue',value);//使用ID选择器,来对下拉框进行赋值: 下拉框有两个属性:ID 和 VALUE,通过上面的代码 ...

LayaAir UI 组件 # Clip 切片、ComboBox 下拉框