lufylegend:Lbuttion等UI组件

1，矩形按钮LButtonSample1

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

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

[javascript] view plaincopyprint?

  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属性绘制一个图形，一般做法如下

[javascript] view plaincopyprint?

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

[javascript] view plaincopyprint?

  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函数中，如下。

[javascript] view plaincopyprint?

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

[javascript] view plaincopyprint?

  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就可以了，如下

[javascript] view plaincopyprint?

  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函数，如下。

[javascript] view plaincopyprint?

  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函数，它是绘制圆角矩形，使用方法如下。

[javascript] view plaincopyprint?

  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对象组成的。

[javascript] view plaincopyprint?

  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代码。

[javascript] view plaincopyprint?

  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对象的状态，将点击的子对象设为选中。

使用方法如下：

[javascript] view plaincopyprint?

  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

多选框比较简单

[javascript] view plaincopyprint?

  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是一样的，同样通过两个重叠的可视对象来控制多选框的状态。

使用方法如下：

[javascript] view plaincopyprint?

  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

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

[javascript] view plaincopyprint?

  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函数

[javascript] view plaincopyprint?

  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函数。

[javascript] view plaincopyprint?

  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函数，看一下这个函数吧

[javascript] view plaincopyprint?

  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绘制三角形。 组合框的用法如下：

[javascript] view plaincopyprint?

  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介绍

[javascript] view plaincopyprint?

  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：是否显示横向滚动条，未设定则为默认。

具体用法如下：

[javascript] view plaincopyprint?

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

效果

时间： 2024-10-11 23:12:21

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

Android UI组件进阶(2)——仿Windows对话框

Android UI组件进阶(2)--仿Windows对话框 在开始本章前先祝大家中秋节快乐哈,相信很多上班的朋友都是放三天假的哈! 有时间的话回家陪陪父母吧!树欲静而风不止,子欲养而亲不待!岁月不饶人! 好了,道理和祝福语就说到这里了,今天给大家准备的是模仿Windows风格对话框! 效果图: 相信大部分的AlertDialog都是下面这个样子的: 今天给大家讲解的对话框是下面这样的: 对比两种对话框,站在用户的角度,相信你更加钟情于第二种颜色鲜明的对话框 好了下面就开始讲解如何制作模仿win

React-Native入门指南（五）——UI组件

React-Native入门指南 github:https://github.com/vczero/react-native-lession React-Native:用JavaScript开发你的原生应用,释放Native的UI体验,体验 Hybird开发效率. 最近一个星期写的文章如下: 第1篇hello react-native 第2篇认识代码结构 第3篇css和布局 第4篇学会react-native布局 第5篇ui组件 还有几篇需要这这周完成(这块会时刻更新): 第6篇JSX语法 第7

推荐使用Tiny Framework web开发UI组件

TINY FRAMEWORK 基于组件化的J2EE开发框架,from:http://www.tinygroup.org/ 名字 Tiny名称的来历 取名Tiny是取其微不足道,微小之意. Tiny的构建者认为,一个J2EE开发框架是非常复杂的,只有把框架分解成非常细小.可控的部分,并且对每个细小.可控的部分都有一个最优解或相对最优解, 那么整个方案也就可以非常不错的落地. 策略 Tiny框架的构建策略 Think big, start small, scale fast. 想法要宏伟,但是要从小

布局技巧1：创建可重用的UI组件（include标签）

Android平台提供了大量的UI构件,你可以将这些小的视觉块(构件)搭建在一起,呈现给用户复杂且有用的画面.然而,应用程序有时需要一些高级的视觉组件.为了满足这一需求,并且能高效的实现,你可以把多个标准的构件结合起来成为一个单独的.可重用的组件. 例如,你可以创建一个可重用的组件包含一个进度条和一个取消按钮,一个Panel包含两个按钮(确定和取消动作),一个Panel包含图标.标题和描述等等.简单的,你可以通过书写一个自定义的View来创建一个UI组件,但更简单的方式是仅使用XML来实现. 在

微信小程序UI组件、开发框架、实用库

UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wemark ★85 - 微信小程序Markdown渲染库 WeZRender ★36 - 微信小程序Canvas增强组件 wetoast ★21 - 仿照微信小程序提供的showToast功能 wxapp-charts ★20 - 微信小程序图表charts组件 WeiXinProject ★18 - 列

推荐 11 款 React Native 开源移动 UI 组件

推荐 11 款 React Native 开源移动 UI 组件 oschina 发布于 10个月前,共有 14 条评论 本文推荐 11 个非常棒的 React Native 开源组件,希望能给移动应用开发者提供帮助. React Native 是近期 Facebook 基于 MIT 协议开源的原生移动应用开发框架,已经用于 Facebook 的生产环境.React Native 可以使用最近非常流行的 React.js 库来开发 iOS 和 Android 原生 APP. 1. iOS 表单处理

前端UI组件复用工具

"懒"是第一生产力. 代码复用总是程序员喜闻乐见的,前端组件化的最终目的就是复用,今天我们就将深入探讨如何实现UI组件的复用. 通常我们所说的组件往往是包含业务逻辑的前端组件,而这类组件实际上很难实现广义上的复用,顶多能在同一条业务线上复用一下,但UI组件就不一样了,没有了业务的约束,只在UI层面上实现复用,那想象空间就很大了,所以这里我们只讨论UI组件. 首先界定一下,UI组件就是一个web界面的前端代码片段,虽然说不包含业务,但基本的JS效果是可以有的,比如表单验证.轮播图效果.选

封装一个简单的UI组件

方法其实很简单,用一个函数把整个过程包起来.调用时用new,这样可以在一个页面使用多个改组件.这是一个非常简单的方法,后面还有很大改进的空间.下面是一个封装日历的示例. 现在我们的组件类似bootstrap,写好下面的html结构,然后引入ui.css和ui.js,就可以生成相应的UI组件了.效果如上图. <!doctype html> <html> <head> <meta charset="UTF-8"> <title>C

工作流,WEB框架,UI组件网络收集整理

工作流,WEB框架,UI组件网络收集整理 在博客园上逛了好多年,随手收录了一些工作流,WEB开发框架,UI组件,现在整理一下与大家分享. 由于个人能力与精力有限,望各位园友在评论中补充,我将全部整理到正文: ? 工作流篇 RoadFlow工作流(收费):                  http://www.cqroad.cn/WorkFlow 驰骋工作流引擎 ccflow                       https://www.oschina.net/p/ccflow YbSof