畫出自己的UI組件的詳情
- 黄舟原創
- 2017-03-01 15:54:111602瀏覽
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);
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物件的狀態，將點擊的子物件設為選取。
使用方法如下：
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
多重選取框比較簡單
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是一樣的，同樣透過兩個重疊的視覺物件來控制多重選取框的狀態。
使用方法如下：
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
這個相對複雜一些，因為不想單選或多選框，只是點擊改變狀態而已，它需要根據點擊動作不同，讓它內部的列表上下滾動，先看構造器。
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函數
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函數。
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函數，看一下這個函數吧
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繪製三角形。
組合方塊的用法如下：
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介绍
LScrollbar(showObject,maskW,maskH,scrollWidth,wVisible) ■作用： 带有滚动条的可视对象。 ■参数： showObject：需要加入滚动条的对象。 maskW：滚动条对象的可视大小的宽。 maskH：滚动条对象的可视大小的高。 scrollWidth：滚动条的宽。 wVisible：是否显示横向滚动条，未设定则为默认。
具体用法如下：
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);
效果
在下美工设计极差，所以本篇纯属抛砖引玉，大家可以试着自己写几组漂亮的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
以上就是画出自己的UI组件的详情的内容，更多相关内容请关注PHP中文网（www.php.cn）！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn