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. USB协通讯议--深入理解【转】

    转自:http://blog.csdn.net/myarrow/article/details/8484113 0. 基本概念 一个[传输](控制.批量.中断.等时):由多个[事务]组成: 一个[事务 ...

  2. mysqldump只导出表结构或只导出数据的实现方法【转】

    mysql mysqldump 只导出表结构 不导出数据 mysqldump --opt -d 数据库名 -u root -p > xxx.sql 备份数据库 #mysqldump 数据库名 & ...

  3. 微信小程序入门与实战

    1. 备注:并不是真的不需要下载,只是下载的包小于1MB,给人的感觉像是不用下载 2. 3. 理论上:同一级可以有无限个,纵向只能有五级 目前小程序分包大小有以下限制: 整个小程序所有分包大小不超过 ...

  4. VMWare 虚拟机 安装 Mac OS X

    VMWare安装Mac OS X 随着iPhone.iPad.Mac等苹果产品越来越火爆,越来越多的初学者想要了解和尝试苹果平台,包括苹果操作系统Mac OS X.苹果演示软件Keynote.苹果开发 ...

  5. django startproject xxx:报错UnicodeDecodeError: 'ascii' codec can't decode byte 0xe6 in position 13: ordinal not in range(128)

    django startproject xxx:报错UnicodeDecodeError: 'ascii' codec can't decode byte 0xe6 in position 13: o ...

  6. linux下cpu物理个数、多核、超线程判断解析

    在Linux体系中,供给了proc文件体系显示体系的软硬件信息.若是想懂得体系中CPU的供给商和相干设备信息,则可以经由过程/proc/cpuinfo文件获得.本文章针对该文件进行简单的总结. 基于指 ...

  7. Selector 实现原理

    概述 Selector是NIO中实现I/O多路复用的关键类.Selector实现了通过一个线程管理多个Channel,从而管理多个网络连接的目的. Channel代表这一个网络连接通道,我们可以将Ch ...

  8. java 完全解耦

    只要有一个方法操作的是类而非接口,那么你就只能使用这个类及其子类,如果你想要将这个方法应用于不在此继承结构中的某个类,那么你就会触霉头,接口可以在很大程度上放宽这种限制,因此,我们可以编写可服用性更好 ...

  9. 整理OpenResty+Mysql+Tomcat+JFinal+Cannal+HUI

    阿里云运维主机 118.190.89.22 26611 1.CentOS6.9下安装OpenResty 2.CentOS6.9下安装MariaDB10.2.11 3.使用Intellij IDEA把J ...

  10. python 单变量线性回归

      单变量线性回归(Linear Regression with One Variable)¶ In [54]: #初始化工作 import random import numpy as np imp ...