画出自己的UI组件

HTML5开源引擎lufylegend-1.7.1版的下载包内包含了lufylegend.ui-0.1.0.js文件，它是一个lufylegend.js引擎的专用UI组件，我在api的介绍里也说了，这个UI组件是专门为懒人准备的，包含按钮，单选框，多选框，组合框，滚动条等UI。

下面我来具体说一说这些UI的绘制过程，也方便大家更好的理解和扩展新的UI组件。

1，矩形按钮LButtonSample1

首先来看看LButtonSample1按钮的绘制。

在lufylegend.js引擎中可以利用LButton类来添加一个按钮，但是你需要传入按钮弹起和按钮按下的两个状态的可视对象，可以是LSprite,也可以是LBitmap，想要漂亮一点的按钮的朋友们可以使用一张漂亮的图片，一般做法如下

[javascript] view plain copy

1. btn01 = new LButton(new LBitmap(new LBitmapData(imglist["replay_button_up"])),new LBitmap(new LBitmapData(imglist["replay_button_over"])));  

当然，也可以使用LSprite对象的graphics属性绘制一个图形，一般做法如下

[javascript] view plain copy

1. var up = new LSprite();  
2. up.graphics.drawRect(1,"black",[0, 0, 100, 30],true,"#999999");  
3. var txt = new LTextField();  
4. txt.x = 10;  
5. txt.y = 5;  
6. txt.text = "测试按钮";  
7. up.addChild(txt);  
8. var over = new LSprite();  
9. over.graphics.drawRect(1,"black",[0, 0, 100, 30],true,"#cccccc");  
10. var txt1 = new LTextField();  
11. txt1.x = 10;  
12. txt1.y = 5;  
13. txt1.text = "测试按钮";  
14. over.addChild(txt1);  
15. var btn = new LButton(up,over);  

上面的代码只是绘制了两个不同颜色的矩形而已，当然不够美观，LButtonSample1对象就是在这种方法的基础上来制作的。

看LButtonSample1的构造器代码

[javascript] view plain copy

1. function LButtonSample1(name,size,font,color){  
2.     var s = this;  
3.     if(!size)size=16;  
4.     if(!color)color = "white";  
5.     if(!font)font = "黑体";  
6.     s.backgroundCorl = "black";  
7.     var btn_up = new LSprite();  
8.     btn_up.shadow = new LSprite();  
9.     btn_up.back = new LSprite();  
10.     btn_up.addChild(btn_up.shadow);  
11.     btn_up.addChild(btn_up.back);  
12.     labelText = new LTextField();  
13.     labelText.color = color;  
14.     labelText.font = font;  
15.     labelText.size = size;  
16.     labelText.x = size*0.5;  
17.     labelText.y = size*0.5;  
18.     labelText.text = name;  
19.     btn_up.back.addChild(labelText);  
20.     var shadow = new LDropShadowFilter(4,45,"#000000",10);  
21.     btn_up.shadow.filters = [shadow];  
22.   
23.     var btn_down = new LSprite();  
24.     btn_down.x = btn_down.y = 1;  
25.     labelText = new LTextField();  
26.     labelText.color = color;  
27.     labelText.font = font;  
28.     labelText.size = size;  
29.     labelText.x = size*0.5;  
30.     labelText.y = size*0.5;  
31.     labelText.text = name;  
32.     btn_down.addChild(labelText);  
33.     base(s,LButton,[btn_up,btn_down]);  
34.     s.width = labelText.getWidth() + size;  
35.     s.height = 2.2*size;  
36.     s.backgroundSet = null;  
37.     btn_up.shadow.graphics.drawRoundRect(0,"#000000",[1,1,s.width-2,s.height-2,s.height*0.1],true,"#000000");  
38.     s.addEventListener(LEvent.ENTER_FRAME,s._onDraw);  
39. }  

可以看到它继承自LButton，所以它有LButton的所有方法和属性，同时利用了btn_up和btn_down作为按钮的两个状态，传给了它的父类LButton。

btn_up作为按钮的弹起的状态，它包含了两个LSprite对象(shadow和back)和一个LTextField对象，shadow用来给按钮设置阴影效果，LTextField对象用来显示按钮文字。

按钮的绘制过程是在_onDraw函数中，如下。

[javascript] view plain copy

1. LButtonSample1.prototype._onDraw = function(s){  
2.     if(s.backgroundSet == s.backgroundCorl)return;  
3.     s.backgroundSet = s.backgroundCorl;  
4.     var grd=LGlobal.canvas.createLinearGradient(0,s.y-s.height*0.5,0,s.y+s.height*2);  
5.     grd.addColorStop(0,"white");  
6.     grd.addColorStop(1,s.backgroundCorl);  
7.       
8.     var grd2=LGlobal.canvas.createLinearGradient(0,s.y-s.height,0,s.y+s.height*2);  
9.     grd2.addColorStop(0,"white");  
10.     grd2.addColorStop(1,s.backgroundCorl);  
11.       
12.     s.bitmap_up.back.graphics.clear();  
13.     s.bitmap_over.graphics.clear();  
14.     s.bitmap_up.back.graphics.drawRect(1,s.backgroundCorl,[0,0,s.width,s.height],true,grd);  
15.     s.bitmap_up.back.graphics.drawRect(0,s.backgroundCorl,[1,s.height*0.5,s.width-2,s.height*0.5-1],true,grd2);  
16.     s.bitmap_over.graphics.drawRect(1,s.backgroundCorl,[0,0,s.width,s.height],true,grd);  
17.     s.bitmap_over.graphics.drawRect(0,s.backgroundCorl,[1,s.height*0.5,s.width-2,s.height*0.5-1],true,grd2);  
18. };  

在_onDraw函数中，显示新建了两个渐变的颜色，然后分别在按钮的两个状态中绘制了两个普通的矩形，这样一个按钮就绘制成功了，使用方法如下。

[javascript] view plain copy

1. var button02 = new LButtonSample1("测试按钮2");  
2. button02.backgroundCorl = "#008800";  
3. button02.x = 150;  
4. button02.y = 10;  
5. layer.addChild(button02);  

效果

2，圆角矩形按钮LButtonSample2

有了LButtonSample1，圆角矩形LButtonSample2就简单了，把绘制矩形部分换成圆角矩形就行了，但是构造器，我们也不需要再多写一遍了，直接让LButtonSample2继承LButtonSample1就可以了，如下

[javascript] view plain copy

1. function LButtonSample2(name,size,font,color){  
2.     var s = this;  
3.     base(s,LButtonSample1,[name,size,font,color]);  
4. }  

然后就是_onDraw函数，如下。

[javascript] view plain copy

1. LButtonSample2.prototype._onDraw = function(s){  
2.     if(s.backgroundSet == s.backgroundCorl)return;  
3.     s.backgroundSet = s.backgroundCorl;  
4.     var grd=LGlobal.canvas.createLinearGradient(0,s.y-s.height*0.5,0,s.y+s.height*2);  
5.     grd.addColorStop(0,"white");  
6.     grd.addColorStop(1,s.backgroundCorl);  
7.       
8.     var grd2=LGlobal.canvas.createLinearGradient(0,s.y-s.height,0,s.y+s.height*2);  
9.     grd2.addColorStop(0,"white");  
10.     grd2.addColorStop(1,s.backgroundCorl);  
11.       
12.     s.bitmap_up.back.graphics.clear();  
13.     s.bitmap_over.graphics.clear();  
14.     s.bitmap_up.back.graphics.drawRoundRect(1,s.backgroundCorl,[0,0,s.width,s.height,s.height*0.1],true,grd);  
15.     s.bitmap_up.back.graphics.drawRoundRect(0,s.backgroundCorl,[1,s.height*0.5,s.width-2,s.height*0.5-1,s.height*0.1],true,grd2);  
16.     s.bitmap_over.graphics.drawRoundRect(1,s.backgroundCorl,[0,0,s.width,s.height,s.height*0.1],true,grd);  
17.     s.bitmap_over.graphics.drawRoundRect(0,s.backgroundCorl,[1,s.height*0.5,s.width-2,s.height*0.5-1,s.height*0.1],true,grd2);  
18. };  

区别就在于drawRoundRect函数，它是绘制圆角矩形，使用方法如下。

[javascript] view plain copy

1. var button04 = new LButtonSample2("测试按钮4");  
2.     button04.backgroundCorl = "blue";  
3.     button04.x = 10;  
4.     button04.y = 70;  
5.     layer.addChild(button04);  

效果

3，单选框LRadio

LRadio是由一个或多个LRadioChild对象组成的。

[javascript] view plain copy

1. function LRadioChild(value,layer,layerSelect){  
2.     var s = this;  
3.     base(s,LSprite,[]);  
4.     s.value = value;  
5.       
6.     if(!layer){  
7.         layer = new LSprite();  
8.         layer.graphics.drawArc(2,"#000000",[0,0,10,0,2*Math.PI],true,"#D3D3D3");  
9.     }  
10.     if(!layerSelect){  
11.         layerSelect = new LSprite();  
12.         layerSelect.graphics.drawArc(0,"#000000",[0,0,4,0,2*Math.PI],true,"#000000");  
13.     }  
14.     s.layer = layer;  
15.     s.layerSelect = layerSelect;  
16.     s.addChild(s.layer);  
17.     s.addChild(s.layerSelect);  
18.     s.layerSelect.visible = false;  
19.     s.checked = false;  
20.     s.addEventListener(LMouseEvent.MOUSE_UP,s._onChange);  
21. }  
22. LRadioChild.prototype._onChange = function(e,s){  
23.     s.parent.setValue(s.value);  
24. };  
25. LRadioChild.prototype.setChecked = function(v){  
26.     this.layerSelect.visible = this.checked = v;  
27. };  

LRadioChild其实就是由两个重叠的可视对象layer和layerSelect组成的，通过setChecked设定layerSelect对象是否显示，从而改变它的外观，当点击LRadioChild对象时，调用它父级即上一级对象的setValue方法，再来看看LRadio代码。

[javascript] view plain copy

1. function LRadio(){  
2.     base(this,LSprite,[]);  
3. }  
4. LRadio.prototype.setChildRadio = function(value,x,y,layer,layerSelect){  
5.     var s = this;  
6.     var child = new LRadioChild(value,layer,layerSelect);  
7.     child.x = x;  
8.     child.y = y;  
9.     s.addChild(child);  
10. };  
11. LRadio.prototype.push = function(value){  
12.     this.addChild(value);  
13. };  
14. LRadio.prototype.setValue = function(value){  
15.     var s=this,child,k;  
16.     for(k in s.childList){  
17.         child = s.childList[k];  
18.         child.setChecked(false);  
19.         if(child.value == value){  
20.             s.value = value;  
21.             child.setChecked(true);  
22.         }  
23.     }  
24. };  

通过setChildRadio或者push来添加子LRadioChild对象，然后当setValue函数被调用时，改变所有子LRadioChild对象的状态，将点击的子对象设为选中。

使用方法如下：

[javascript] view plain copy

1. var radio = new LRadio();  
2. radio.x = 50;  
3. radio.y = 130;  
4. radio.setChildRadio(1,0,0);  
5. radio.setChildRadio(2,50,0);  
6. radio.setChildRadio(3,100,0);  
7. layer.addChild(radio);  

效果

4，多选框LCheckBox

多选框比较简单

[javascript] view plain copy

1. function LCheckBox(layer,layerSelect){  
2.     var s = this;  
3.     base(s,LSprite,[]);  
4.       
5.     if(!layer){  
6.         layer = new LSprite();  
7.         layer.graphics.drawRect(2,"#000000",[0,0,20,20],true,"#D3D3D3");  
8.     }  
9.     if(!layerSelect){  
10.         layerSelect = new LSprite();  
11.         layerSelect.graphics.drawLine(5,"#000000",[2,10,10,18]);  
12.         layerSelect.graphics.drawLine(5,"#000000",[10,18,18,2]);  
13.     }  
14.     s.layer = layer;  
15.     s.layerSelect = layerSelect;  
16.     s.addChild(s.layer);  
17.     s.addChild(s.layerSelect);  
18.     s.layerSelect.visible = s.checked = false;  
19.     s.addEventListener(LMouseEvent.MOUSE_UP,s._onChange);  
20. }  
21. LCheckBox.prototype._onChange = function(e,s){  
22.     s.checked = !s.checked;  
23.     s.layerSelect.visible = s.checked;  
24. };  
25. LCheckBox.prototype.setChecked = function(value){  
26.     s.checked = value;  
27.     s.layerSelect.visible = s.checked;  
28. };  

可以看到，它的原理和LRadioChild是一样的，同样通过两个重叠的可视对象来控制多选框的状态。

使用方法如下：

[javascript] view plain copy

1. var check1 = new LCheckBox();  
2. check1.x = 50;  
3. check1.y= 160;  
4. layer.addChild(check1);  
5. var check2 = new LCheckBox();  
6. check2.x = 100;  
7. check2.y= 160;  
8. layer.addChild(check2);  

效果

5，组合框LComboBox

这个相对复杂一些，因为不想单选或多选框，只是点击改变状态而已，它需要根据点击动作不同，让它内部的列表上下滚动，先看构造器。

[javascript] view plain copy

1. function LComboBox(size,color,font,layer,layerUp,layerDown){  
2.     var s = this;  
3.     base(s,LSprite,[]);  
4.     s.list = [];  
5.     s.selectIndex = 0;  
6.     s.value = null;  
7.     s.selectWidth = 100;  
8.     if(!size)size=16;  
9.     if(!color)color = "black";  
10.     if(!font)font = "黑体";  
11.     s.size = size;  
12.     s.color = color;  
13.     s.font = font;  
14.     s.refreshFlag = false;  
15.       
16.     if(!layer){  
17.         s.refreshFlag = true;  
18.         layer = new LSprite();  
19.         layerUp = new LSprite();  
20.         layerDown = new LSprite();  
21.         s.layer = layer;  
22.         s.layerUp = layerUp;  
23.         s.layerDown = layerDown;  
24.         s.refresh();  
25.     }  
26.     s.addChild(layer);  
27.     s.addChild(layerUp);  
28.     s.addChild(layerDown);  
29.     s.layer = layer;  
30.     s.layerUp = layerUp;  
31.     s.layerDown = layerDown;  
32.       
33.     s.runing = false;  
34.       
35.     s.textLayer = new LSprite();  
36.     s.textLayer.x = 5;  
37.     s.textLayer.y = s.size * 0.4;  
38.     s.addChild(s.textLayer);  
39.     s.layerUp.addEventListener(LMouseEvent.MOUSE_UP,s._onChangeUp);  
40.     s.layerDown.addEventListener(LMouseEvent.MOUSE_UP,s._onChangeDown);  
41. }  

layer就是组合框的样式了，而layerUp和layerDown分别是它的向上和向下的控制按钮，通过点击这两个按钮，分别调用_onChangeUp和_onChangeDown函数，另外组合框的内部列表会添加到textLayer层上。

看一下，setChild函数

[javascript] view plain copy

1. LComboBox.prototype.setChild = function(child){  
2.     var s = this;  
3.     if(!child || !child.value || !child.label)trace("the child must be an object like:{label:a,value:b}");  
4.       
5.     var text = new LTextField();  
6.     text.size = s.size;  
7.     text.color = s.color;  
8.     text.font = s.font;  
9.     text.text = child.label;  
10.     text.y = (s.size * 1.5 >>> 0) * s.list.length;  
11.     s.textLayer.addChild(text);  
12.     if(s.list.length == 0){  
13.         s.value = child.value;  
14.     }  
15.     s.list.push(child);  
16.     s.selectWidth = 100;  
17.     s.refresh();  
18.       
19. };  

这个函数为组合框的列表添加一个元素，使用LTextField对象来显示。

接着看_onChangeUp和_onChangeDown函数。

[javascript] view plain copy

1. LComboBox.prototype._onChangeDown = function(e,b){  
2.     var s = b.parent;  
3.     if(s.runing)return;  
4.     if(s.selectIndex >= s.list.length - 1)return;  
5.     s.runing = true;  
6.     for(k in s.list){  
7.         s.textLayer.childList[k].visible = true;  
8.     }  
9.     s.selectIndex++;  
10.     s.value = s.list[s.selectIndex].value;  
11.     var mask = new LSprite();  
12.     mask.graphics.drawRect(2,"#000000",[0,0,s.selectWidth,s.size*2]);  
13.     s.textLayer.mask = mask;  
14.     var my = s.textLayer.y - (s.size * 1.5 >>> 0);  
15.     var fun = function(layer){  
16.         var s = layer.parent;  
17.         layer.mask = null;  
18.         s.runing = false;  
19.         s.refresh();  
20.     };  
21.     LTweenLite.to(s.textLayer,0.3,  
22.     {   
23.         y:my,  
24.         onComplete:fun,  
25.         ease:Strong.easeOut  
26.     });  
27. };  
28. LComboBox.prototype._onChangeUp = function(e,b){  
29.     var s = b.parent;  
30.     if(s.runing)return;  
31.     if(s.selectIndex <= 0)return;  
32.     s.runing = true;  
33.     for(k in s.list){  
34.         s.textLayer.childList[k].visible = true;  
35.     }  
36.     s.selectIndex--;  
37.     s.value = s.list[s.selectIndex].value;  
38.     var mask = new LSprite();  
39.     mask.graphics.drawRect(2,"#000000",[0,0,s.selectWidth,s.size*2]);  
40.     s.textLayer.mask = mask;  
41.     var my = s.textLayer.y + (s.size * 1.5 >>> 0);  
42.     var fun = function(layer){  
43.         var s = layer.parent;  
44.         layer.mask = null;  
45.         s.runing = false;  
46.         s.refresh();  
47.     };  
48.     LTweenLite.to(s.textLayer,0.3,  
49.     {   
50.         y:my,  
51.         onComplete:fun,  
52.         ease:Strong.easeOut  
53.     });  
54. };  

这两个函数，通过LTweenLite来让组合框的textLayer层进行向上或者向下的缓动。

无论是setChild，还是_onChangeUp和_onChangeDown，里面都调用了refresh函数，看一下这个函数吧

[javascript] view plain copy

1. LComboBox.prototype.refresh = function(){  
2.     var s = this,k;  
3.   
4.     for(k in s.list){  
5.         s.textLayer.childList[k].visible = false;  
6.         if(s.value == s.list[k].value)s.textLayer.childList[k].visible = true;  
7.         if(s.selectWidth < s.textLayer.childList[k].getWidth() + s.size){  
8.             s.selectWidth = s.textLayer.childList[k].getWidth() + s.size;  
9.         }  
10.     }  
11.       
12.     s.layer.graphics.clear();  
13.     s.layerUp.graphics.clear();  
14.     s.layerDown.graphics.clear();  
15.     s.layer.graphics.drawRect(2,"#000000",[0,0,s.selectWidth,s.size*2],true,"#D3D3D3");  
16.     s.layerUp.x = s.selectWidth;  
17.     s.layerUp.graphics.drawRect(2,"#000000",[0,0,s.size*2,s.size]);  
18.     s.layerUp.graphics.drawVertices(2,"#000000",[[s.size*0.5*2,s.size*0.2],[s.size*0.2*2,s.size*0.8],[s.size*0.8*2,s.size*0.8]],true,"#000000");  
19.     s.layerDown.x = s.selectWidth;  
20.     s.layerDown.y = s.size;  
21.     s.layerDown.graphics.drawRect(2,"#000000",[0,0,s.size*2,s.size]);  
22.     s.layerDown.graphics.drawVertices(2,"#000000",[[s.size*0.5*2,s.size*0.8],[s.size*0.2*2,s.size*0.2],[s.size*0.8*2,s.size*0.2]],true,"#000000");  
23. };  

可以看到，这个函数其实就是对组合框做了一个重绘，利用drawRect绘制矩形，利用drawVertices绘制三角形。
组合框的用法如下：

[javascript] view plain copy

1. var com = new LComboBox(20);  
2. com.x = 50;  
3. com.y= 210;  
4. com.setChild({label:"测试一",value:"aaa"});  
5. com.setChild({label:"测试二",value:"bbb"});  
6. com.setChild({label:"测试三",value:"ccc"});  
7. com.setChild({label:"测试四",value:"ddd"});  
8. layer.addChild(com);  

效果

6，滚动条LScrollbar

最后是滚动条，这个实现起来就有点难度了，还好以前我用AS3写过一个滚动条，直接copy移植过来了，移植过程中，我再次感叹，lufylegend.js的语法模仿AS3还是比较成功的。

这个比较麻烦，所以我在这里只说一下它的用法，感兴趣的朋友可以看一下代码，自己了解一下。

看一下官方API介绍

[javascript] view plain copy

1. LScrollbar(showObject,maskW,maskH,scrollWidth,wVisible)  
2.   
3. ■作用：  
4.   
5. 带有滚动条的可视对象。  
6.   
7. ■参数：  
8.   
9. showObject：需要加入滚动条的对象。  
10.   
11. maskW：滚动条对象的可视大小的宽。  
12.   
13. maskH：滚动条对象的可视大小的高。  
14.   
15. scrollWidth：滚动条的宽。  
16.   
17. wVisible：是否显示横向滚动条，未设定则为默认。  

具体用法如下：

[javascript] view plain copy

1. var showObject = new LSprite();  
2. showObject.graphics.drawRect(2,"#ff0000",[0,0,500,500],true,"#ff0000");  
3. var t = new LTextField();  
4. t.color = "#000000";  
5. t.text = "あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてと";  
6. t.width = 300;  
7. t.stroke = true;  
8. t.size = 30;  
9. t.setWordWrap(true,35);  
10. showObject.addChild(t);  
11. var sc = new LScrollbar(showObject,200,200);  
12. sc.x = 450;  
13. sc.y = 20;  
14. layer.addChild(sc);  

效果

在下美工设计极差，所以本篇纯属抛砖引玉，大家可以试着自己写几组漂亮的UI，或者有什么好的意见或想法的，可以联系我。

HTML5开源游戏引擎lufylegend1.7.1发布贴

http://blog.csdn.net/lufy_legend/article/details/8780821

lufylegend.js引擎官网

http://lufylegend.com/lufylegend

lufylegend.js引擎在线API文档链接

http://lufylegend.com/lufylegend/api