本文主要包含UI组件，HTML5等相关知识,匿名希望在学习及工作中可以帮助到您
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，想要漂亮一点的按钮的朋友们可以使用一张漂亮的图片，一般做法如下
btn01 = new LButton(new LBitmap(new LBitmapData(imglist["replay_button_up"])), new LBitmap(new LBitmapData(imglist["replay_button_over"])));
当然，也可以使用LSprite对象的graphics属性绘制一个图形，一般做法如下
var up = new LSprite(); up.graphics.drawRect(1,"black",[0, 0, 100, 30],true,"#999999"); var txt = new LTextField(); txt.x = 10; txt.y = 5; txt.text = "测试按钮"; up.addChild(txt); var over = new LSprite(); over.graphics.drawRect(1,"black",[0, 0, 100, 30],true,"#cccccc"); var txt1 = new LTextField(); txt1.x = 10; txt1.y = 5; txt1.text = "测试按钮"; over.addChild(txt1); var btn = new LButton(up,over);
上面的代码只是绘制了两个不同颜色的矩形而已，当然不够美观，LButtonSample1对象就是在这种方法的基础上来制作的。
看LButtonSample1的构造器代码
function LButtonSample1(name,size,font,color){
var s = this;
if(!size)size=16;
if(!color)color = "white";
if(!font)font = "黑体";
s.backgroundCorl = "black";
var btn_up = new LSprite();
btn_up.shadow = new LSprite();
btn_up.back = new LSprite();
btn_up.addChild(btn_up.shadow);
btn_up.addChild(btn_up.back);
labelText = new LTextField();
labelText.color = color;
labelText.font = font;
labelText.size = size;
labelText.x = size*0.5;
labelText.y = size*0.5;
labelText.text = name;
btn_up.back.addChild(labelText);
var shadow = new LDropShadowFilter(4,45,"#000000",10);
btn_up.shadow.filters = [shadow];
var btn_down = new LSprite();
btn_down.x = btn_down.y = 1;
labelText = new LTextField();
labelText.color = color;
labelText.font = font;
labelText.size = size;
labelText.x = size*0.5;
labelText.y = size*0.5;
labelText.text = name;
btn_down.addChild(labelText);
base(s,LButton,[btn_up,btn_down]);
s.width = labelText.getWidth() + size;
s.height = 2.2*size;
s.backgroundSet = null;
btn_up.shadow.graphics.drawRoundRect(0,"#000000",[1,1,s.width-2,s.height-2,s.height*0.1],true,"#000000");
s.addEventListener(LEvent.ENTER_FRAME,s._onDraw);
}可以看到它继承自LButton，所以它有LButton的所有方法和属性，同时利用了btn_up和btn_down作为按钮的两个状态，传给了它的父类LButton。
btn_up作为按钮的弹起的状态，它包含了两个LSprite对象(shadow和back)和一个LTextField对象，shadow用来给按钮设置阴影效果，LTextField对象用来显示按钮文字。
按钮的绘制过程是在_onDraw函数中，如下。
LButtonSample1.prototype._onDraw = function(s){
if(s.backgroundSet == s.backgroundCorl)return;
s.backgroundSet = s.backgroundCorl;
var grd=LGlobal.canvas.createLinearGradient(0,s.y-s.height*0.5,0,s.y+s.height*2);
grd.addColorStop(0,"white");
grd.addColorStop(1,s.backgroundCorl);
var grd2=LGlobal.canvas.createLinearGradient(0,s.y-s.height,0,s.y+s.height*2);
grd2.addColorStop(0,"white");
grd2.addColorStop(1,s.backgroundCorl);
s.bitmap_up.back.graphics.clear();
s.bitmap_over.graphics.clear();
s.bitmap_up.back.graphics.drawRect(1,s.backgroundCorl,[0,0,s.width,s.height],true,grd);
s.bitmap_up.back.graphics.drawRect(0,s.backgroundCorl,[1,s.height*0.5,s.width-2,s.height*0.5-1],true,grd2);
s.bitmap_over.graphics.drawRect(1,s.backgroundCorl,[0,0,s.width,s.height],true,grd);
s.bitmap_over.graphics.drawRect(0,s.backgroundCorl,[1,s.height*0.5,s.width-2,s.height*0.5-1],true,grd2);
};在_onDraw函数中，显示新建了两个渐变的颜色，然后分别在按钮的两个状态中绘制了两个普通的矩形，这样一个按钮就绘制成功了，使用方法如下。
var button02 = new LButtonSample1("测试按钮2");
button02.backgroundCorl = "#008800";
button02.x = 150;
button02.y = 10;
layer.addChild(button02);效果
2，圆角矩形按钮LButtonSample2
有了LButtonSample1，圆角矩形LButtonSample2就简单了，把绘制矩形部分换成圆角矩形就行了，但是构造器，我们也不需要再多写一遍了，直接让LButtonSample2继承LButtonSample1就可以了，如下
function LButtonSample2(name,size,font,color){
var s = this;
base(s,LButtonSample1,[name,size,font,color]);
}然后就是_onDraw函数，如下。
LButtonSample2.prototype._onDraw = function(s){
if(s.backgroundSet == s.backgroundCorl)return;
s.backgroundSet = s.backgroundCorl;
var grd=LGlobal.canvas.createLinearGradient(0,s.y-s.height*0.5,0,s.y+s.height*2);
grd.addColorStop(0,"white");
grd.addColorStop(1,s.backgroundCorl);
var grd2=LGlobal.canvas.createLinearGradient(0,s.y-s.height,0,s.y+s.height*2);
grd2.addColorStop(0,"white");
grd2.addColorStop(1,s.backgroundCorl);
s.bitmap_up.back.graphics.clear();
s.bitmap_over.graphics.clear();
s.bitmap_up.back.graphics.drawRoundRect(1,s.backgroundCorl,[0,0,s.width,s.height,s.height*0.1],true,grd);
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);
s.bitmap_over.graphics.drawRoundRect(1,s.backgroundCorl,[0,0,s.width,s.height,s.height*0.1],true,grd);
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);
};区别就在于drawRoundRect函数，它是绘制圆角矩形，使用方法如下。
var button04 = new LButtonSample2("测试按钮4");
button04.backgroundCorl = "blue";
button04.x = 10;
button04.y = 70;
layer.addChild(button04);效果
3，单选框LRadio
LRadio是由一个或多个LRadioChild对象组成的。
function LRadioChild(value,layer,layerSelect){
var s = this;
base(s,LSprite,[]);
s.value = value;
if(!layer){
layer = new LSprite();
layer.graphics.drawArc(2,"#000000",[0,0,10,0,2*Math.PI],true,"#D3D3D3");
}
if(!layerSelect){
layerSelect = new LSprite();
layerSelect.graphics.drawArc(0,"#000000",[0,0,4,0,2*Math.PI],true,"#000000");
}
s.layer = layer;
s.layerSelect = layerSelect;
s.addChild(s.layer);
s.addChild(s.layerSelect);
s.layerSelect.visible = false;
s.checked = false;
s.addEventListener(LMouseEvent.MOUSE_UP,s._onChange);
}
LRadioChild.prototype._onChange = function(e,s){
s.parent.setValue(s.value);
};
LRadioChild.prototype.setChecked = function(v){
this.layerSelect.visible = this.checked = v;
};LRadioChild其实就是由两个重叠的可视对象layer和layerSelect组成的，通过setChecked设定layerSelect对象是否显示，从而改变它的外观，当点击LRadioChild对象时，调用它父级即上一级对象的setValue方法，再来看看LRadio代码。
function LRadio(){
base(this,LSprite,[]);
}
LRadio.prototype.setChildRadio = function(value,x,y,layer,layerSelect){
var s = this;
var child = new LRadioChild(value,layer,layerSelect);