1，矩形按钮LButtonSample1

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

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

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

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

  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);
	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的构造器代码

  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. var btn_down = new LSprite();
  23. btn_down.x = btn_down.y = 1;
  24. labelText = new LTextField();
  25. labelText.color = color;
  26. labelText.font = font;
  27. labelText.size = size;
  28. labelText.x = size*0.5;
  29. labelText.y = size*0.5;
  30. labelText.text = name;
  31. btn_down.addChild(labelText);
  32. base(s,LButton,[btn_up,btn_down]);
  33. s.width = labelText.getWidth() + size;
  34. s.height = 2.2*size;
  35. s.backgroundSet = null;
  36. btn_up.shadow.graphics.drawRoundRect(0,"#000000",[1,1,s.width-2,s.height-2,s.height*0.1],true,"#000000");
  37. s.addEventListener(LEvent.ENTER_FRAME,s._onDraw);
  38. }
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函数中，如下。

  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. var grd2=LGlobal.canvas.createLinearGradient(0,s.y-s.height,0,s.y+s.height*2);
  8. grd2.addColorStop(0,"white");
  9. grd2.addColorStop(1,s.backgroundCorl);
  10. s.bitmap_up.back.graphics.clear();
  11. s.bitmap_over.graphics.clear();
  12. s.bitmap_up.back.graphics.drawRect(1,s.backgroundCorl,[0,0,s.width,s.height],true,grd);
  13. s.bitmap_up.back.graphics.drawRect(0,s.backgroundCorl,[1,s.height*0.5,s.width-2,s.height*0.5-1],true,grd2);
  14. s.bitmap_over.graphics.drawRect(1,s.backgroundCorl,[0,0,s.width,s.height],true,grd);
  15. s.bitmap_over.graphics.drawRect(0,s.backgroundCorl,[1,s.height*0.5,s.width-2,s.height*0.5-1],true,grd2);
  16. };
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函数中，显示新建了两个渐变的颜色，然后分别在按钮的两个状态中绘制了两个普通的矩形，这样一个按钮就绘制成功了，使用方法如下。

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

	button02.backgroundCorl = "#008800";

	button02.x = 150;

	button02.y = 10;

	layer.addChild(button02);

效果

2，圆角矩形按钮LButtonSample2

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

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

	var s = this;

	base(s,LButtonSample1,[name,size,font,color]);

}

然后就是_onDraw函数，如下。

  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. var grd2=LGlobal.canvas.createLinearGradient(0,s.y-s.height,0,s.y+s.height*2);
  8. grd2.addColorStop(0,"white");
  9. grd2.addColorStop(1,s.backgroundCorl);
  10. s.bitmap_up.back.graphics.clear();
  11. s.bitmap_over.graphics.clear();
  12. s.bitmap_up.back.graphics.drawRoundRect(1,s.backgroundCorl,[0,0,s.width,s.height,s.height*0.1],true,grd);
  13. 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);
  14. s.bitmap_over.graphics.drawRoundRect(1,s.backgroundCorl,[0,0,s.width,s.height,s.height*0.1],true,grd);
  15. 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);
  16. };
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函数，它是绘制圆角矩形，使用方法如下。

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

	button04.backgroundCorl = "blue";

	button04.x = 10;

	button04.y = 70;

	layer.addChild(button04);

效果

3，单选框LRadio

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

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

  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. };
function LRadio(){

	base(this,LSprite,[]);

}

LRadio.prototype.setChildRadio = function(value,x,y,layer,layerSelect){

	var s = this;

	var child = new LRadioChild(value,layer,layerSelect);

	child.x = x;

	child.y = y;

	s.addChild(child);

};

LRadio.prototype.push = function(value){

	this.addChild(value);

};

LRadio.prototype.setValue = function(value){

    var s=this,child,k;

    for(k in s.childList){

    	child = s.childList[k];

        child.setChecked(false);

        if(child.value == value){

        	s.value = value;

        	child.setChecked(true);

        }

    }

};

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

使用方法如下：

  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);
	var radio = new LRadio();

	radio.x = 50;

	radio.y = 130;

	radio.setChildRadio(1,0,0);

	radio.setChildRadio(2,50,0);

	radio.setChildRadio(3,100,0);

	layer.addChild(radio);

效果

4，多选框LCheckBox

多选框比较简单

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

	var s = this;

	base(s,LSprite,[]);

	if(!layer){

		layer = new LSprite();

		layer.graphics.drawRect(2,"#000000",[0,0,20,20],true,"#D3D3D3");

	}

	if(!layerSelect){

		layerSelect = new LSprite();

		layerSelect.graphics.drawLine(5,"#000000",[2,10,10,18]);

		layerSelect.graphics.drawLine(5,"#000000",[10,18,18,2]);

	}

	s.layer = layer;

	s.layerSelect = layerSelect;

	s.addChild(s.layer);

	s.addChild(s.layerSelect);

	s.layerSelect.visible = s.checked = false;

	s.addEventListener(LMouseEvent.MOUSE_UP,s._onChange);

}

LCheckBox.prototype._onChange = function(e,s){

	s.checked = !s.checked;

	s.layerSelect.visible = s.checked;

};

LCheckBox.prototype.setChecked = function(value){

	s.checked = value;

	s.layerSelect.visible = s.checked;

};

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

使用方法如下：

  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);
	var check1 = new LCheckBox();

	check1.x = 50;

	check1.y= 160;

	layer.addChild(check1);

	var check2 = new LCheckBox();

	check2.x = 100;

	check2.y= 160;

	layer.addChild(check2);

效果

5，组合框LComboBox

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

  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. if(!layer){
  16. s.refreshFlag = true;
  17. layer = new LSprite();
  18. layerUp = new LSprite();
  19. layerDown = new LSprite();
  20. s.layer = layer;
  21. s.layerUp = layerUp;
  22. s.layerDown = layerDown;
  23. s.refresh();
  24. }
  25. s.addChild(layer);
  26. s.addChild(layerUp);
  27. s.addChild(layerDown);
  28. s.layer = layer;
  29. s.layerUp = layerUp;
  30. s.layerDown = layerDown;
  31. s.runing = false;
  32. s.textLayer = new LSprite();
  33. s.textLayer.x = 5;
  34. s.textLayer.y = s.size * 0.4;
  35. s.addChild(s.textLayer);
  36. s.layerUp.addEventListener(LMouseEvent.MOUSE_UP,s._onChangeUp);
  37. s.layerDown.addEventListener(LMouseEvent.MOUSE_UP,s._onChangeDown);
  38. }
function LComboBox(size,color,font,layer,layerUp,layerDown){

	var s = this;

	base(s,LSprite,[]);

	s.list = [];

	s.selectIndex = 0;

	s.value = null;

	s.selectWidth = 100;

	if(!size)size=16;

	if(!color)color = "black";

	if(!font)font = "黑体";

	s.size = size;

	s.color = color;

	s.font = font;

	s.refreshFlag = false;

	if(!layer){

		s.refreshFlag = true;

		layer = new LSprite();

		layerUp = new LSprite();

		layerDown = new LSprite();

		s.layer = layer;

		s.layerUp = layerUp;

		s.layerDown = layerDown;

		s.refresh();

	}

	s.addChild(layer);

	s.addChild(layerUp);

	s.addChild(layerDown);

	s.layer = layer;

	s.layerUp = layerUp;

	s.layerDown = layerDown;

	s.runing = false;

	s.textLayer = new LSprite();

	s.textLayer.x = 5;

	s.textLayer.y = s.size * 0.4;

	s.addChild(s.textLayer);

	s.layerUp.addEventListener(LMouseEvent.MOUSE_UP,s._onChangeUp);

	s.layerDown.addEventListener(LMouseEvent.MOUSE_UP,s._onChangeDown);

}

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

看一下，setChild函数

  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. var text = new LTextField();
  5. text.size = s.size;
  6. text.color = s.color;
  7. text.font = s.font;
  8. text.text = child.label;
  9. text.y = (s.size * 1.5 >>> 0) * s.list.length;
  10. s.textLayer.addChild(text);
  11. if(s.list.length == 0){
  12. s.value = child.value;
  13. }
  14. s.list.push(child);
  15. s.selectWidth = 100;
  16. s.refresh();
  17. };
LComboBox.prototype.setChild = function(child){

	var s = this;

	if(!child || !child.value || !child.label)trace("the child must be an object like:{label:a,value:b}");

	var text = new LTextField();

	text.size = s.size;

	text.color = s.color;

	text.font = s.font;

	text.text = child.label;

	text.y = (s.size * 1.5 >>> 0) * s.list.length;

	s.textLayer.addChild(text);

	if(s.list.length == 0){

		s.value = child.value;

	}

	s.list.push(child);

	s.selectWidth = 100;

	s.refresh();

};

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

接着看_onChangeUp和_onChangeDown函数。

  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. };
LComboBox.prototype._onChangeDown = function(e,b){

	var s = b.parent;

	if(s.runing)return;

	if(s.selectIndex >= s.list.length - 1)return;

	s.runing = true;

	for(k in s.list){

		s.textLayer.childList[k].visible = true;

	}

	s.selectIndex++;

	s.value = s.list[s.selectIndex].value;

	var mask = new LSprite();

	mask.graphics.drawRect(2,"#000000",[0,0,s.selectWidth,s.size*2]);

	s.textLayer.mask = mask;

	var my = s.textLayer.y - (s.size * 1.5 >>> 0);

	var fun = function(layer){

		var s = layer.parent;

		layer.mask = null;

		s.runing = false;

		s.refresh();

	};

	LTweenLite.to(s.textLayer,0.3,

	{

		y:my,

		onComplete:fun,

		ease:Strong.easeOut

	});

};

LComboBox.prototype._onChangeUp = function(e,b){

	var s = b.parent;

	if(s.runing)return;

	if(s.selectIndex <= 0)return;

	s.runing = true;

	for(k in s.list){

		s.textLayer.childList[k].visible = true;

	}

	s.selectIndex--;

	s.value = s.list[s.selectIndex].value;

	var mask = new LSprite();

	mask.graphics.drawRect(2,"#000000",[0,0,s.selectWidth,s.size*2]);

	s.textLayer.mask = mask;

	var my = s.textLayer.y + (s.size * 1.5 >>> 0);

	var fun = function(layer){

		var s = layer.parent;

		layer.mask = null;

		s.runing = false;

		s.refresh();

	};

	LTweenLite.to(s.textLayer,0.3,

	{

		y:my,

		onComplete:fun,

		ease:Strong.easeOut

	});

};

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

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

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

	var s = this,k;

	for(k in s.list){

		s.textLayer.childList[k].visible = false;

		if(s.value == s.list[k].value)s.textLayer.childList[k].visible = true;

		if(s.selectWidth < s.textLayer.childList[k].getWidth() + s.size){

			s.selectWidth = s.textLayer.childList[k].getWidth() + s.size;

		}

	}

	s.layer.graphics.clear();

	s.layerUp.graphics.clear();

	s.layerDown.graphics.clear();

	s.layer.graphics.drawRect(2,"#000000",[0,0,s.selectWidth,s.size*2],true,"#D3D3D3");

	s.layerUp.x = s.selectWidth;

	s.layerUp.graphics.drawRect(2,"#000000",[0,0,s.size*2,s.size]);

	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");

	s.layerDown.x = s.selectWidth;

	s.layerDown.y = s.size;

	s.layerDown.graphics.drawRect(2,"#000000",[0,0,s.size*2,s.size]);

	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");

};

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

  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);
	var com = new LComboBox(20);

	com.x = 50;

	com.y= 210;

	com.setChild({label:"测试一",value:"aaa"});

	com.setChild({label:"测试二",value:"bbb"});

	com.setChild({label:"测试三",value:"ccc"});

	com.setChild({label:"测试四",value:"ddd"});

	layer.addChild(com);

效果

6，滚动条LScrollbar

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

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

看一下官方API介绍

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

■作用：

带有滚动条的可视对象。

■参数：

showObject：需要加入滚动条的对象。

maskW：滚动条对象的可视大小的宽。

maskH：滚动条对象的可视大小的高。

scrollWidth：滚动条的宽。

wVisible：是否显示横向滚动条，未设定则为默认。

具体用法如下：

  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);
	var showObject = new LSprite();

	showObject.graphics.drawRect(2,"#ff0000",[0,0,500,500],true,"#ff0000");

	var t = new LTextField();

	t.color = "#000000";

	t.text = "あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてと";

	t.width = 300;

	t.stroke = true;

	t.size = 30;

	t.setWordWrap(true,35);

	showObject.addChild(t);

	var sc = new LScrollbar(showObject,200,200);

	sc.x = 450;

	sc.y = 20;

	layer.addChild(sc);

效果

lufylegend:Lbuttion等UI组件的更多相关文章

  1. iOS之UI组件整理

    作者:神兽gcc 授权本站转载. 最近把iOS里的UI组件重新整理了一遍,简单来看一下常用的组件以及它们的实现.其实现在这些组件都可以通过Storyboard很快的生成,只是要向这些组件能够变得生动起 ...

  2. Atitit.web ui  组件化 vs  mvc

    Atitit.web ui  组件化 vs  mvc   组件化  与 mvc并不矛盾..单双方适用的地方有所不同.. React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定 ...

  3. 这是一个比较全的Android UI 组件

     Android组件及UI框架大全 原文地址:http://blog.csdn.net/smallnest/article/details/38658593 Android 是目前最流行的移动操作系统 ...

  4. AngularJs的UI组件ui-Bootstrap分享（一）

    最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...

  5. AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

    Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui ...

  6. AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar

    进度条控件有两种指令,第一种是uib-progressbar指令,表示单一颜色和进度的一个进度条.第二种是uib-bar和uib-progress指令,表示多种颜色和多个进度组合而成的一个进度条. 这 ...

  7. AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

    Rating是一个用于打分或排名的控件.看一个最简单的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" x ...

  8. AngularJs的UI组件ui-Bootstrap分享（十一）——Typeahead

    Typeahead指令是一个用于智能提示或自动完成的控件,就像Jquery的AutoComplete控件一样.来看一个最简单的例子: <!DOCTYPE html> <html ng ...

  9. AngularJs的UI组件ui-Bootstrap分享（十）——Model

    Model是用来创建模态窗口的,但是实际上,并没有Model指令,而只有$uibModal服务,创建模态窗口是使用$uibModal.open()方法. 创建模态窗口时,要有一个模态窗口的模板和对应的 ...

随机推荐

  1. [转]如何取得当前正在执行的shell脚本的绝对路径？

    来源:http://sexywp.com/bash-how-to-get-the-basepath-of-current-running-script.htm 如题,一般我们写Shell脚本的时候,都 ...

  2. 小白学习安全测试（一）——Http协议基础

    Http协议基础 Web技术发展[http://www.cnblogs.com/ProgrammerGE/articles/1824657.html] 静态WEB[网页] 动态WEB 属于一种应用程序 ...

  3. VM workstation 与 VM vSphere的区别 [转载]

    在学完vSphere后,想起了VMware Workstation.这两个都是虚拟化的东西,这两者到底有什么本质的不同呢?顺着我的思路我开始将所学过的进行检索期望从中寻到一丝半点的线索.很快大脑中建立 ...

  4. 解决Too many connections问题

    有些人觉得,解决too many connections问题,灰非简单,down了mysql,修改my.cnf调大max_connections,好吧,你想法是没错的,这的确可以解决问题,但试问对于线 ...

  5. codewar 上做练习的一些感触

    废话 在[codewar][1]上做练习,每次都是尽量快速地做完,然后赶着去看排名里面clever分最高的solution,看完每次都要感叹一下人家怎么可以写得这么简洁,甚至有一次我用了一段大约七八行 ...

  6. CSS渐变之CSS3 gradient在Firefox3.6下的使用

    一.引子 Firefox3.6包含了许多CSS的改进,本文将向您展示如果使用CSS渐变. 如果你正在运行的Firefox 3.6的最新测试版,你应该看看我们的互动演示,并查看相应的代码.使用单选按钮来 ...

  7. RocketMQ 部署

    1. 下载 下载RocketMQwget https://github.com/alibaba/RocketMQ/releases/download/v3.2.6/alibaba-rocketmq-3 ...

  8. 017.Zabbix宏介绍

    一 宏介绍 Zabbix宏的作用是便于在模板.Items.Trigger中的引用,名称为{$名称},宏的字符范围为:A~Z/0~9/_. 如:net.tcp.service[ssh,{$SSH_POR ...

  9. maven自定义脚手架（快速生成项目）

    Maven之自定义archetype生成项目骨架 利用脚手架生成 新项目 命令行方式 mvn archetype:generate \ -DarchetypeGroupId=com.xxx \ -Da ...

  10. 循序渐进学.Net Core Web Api开发系列【7】：项目发布到CentOS7

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇讨论如 ...