Zeichnen Sie die Details Ihrer eigenen UI-Komponenten

Das Download-Paket der HTML5-Open-Source-Engine lufylegend-1.7.1 enthält die Datei lufylegend.ui-0.1.0.js, eine dedizierte UI-Komponente der lufylegend.js-Engine Verwendung der API Wie in der Einleitung erwähnt, ist diese UI-Komponente speziell für faule Leute vorbereitet, einschließlich Schaltflächen, Optionsfeldern, Mehrfachauswahlfeldern, Kombinationsfeldern, Bildlaufleisten und anderen UIs.

Lassen Sie mich ausführlich über den Zeichenprozess dieser Benutzeroberflächen sprechen, damit jeder neue UI-Komponenten besser verstehen und erweitern kann.

1, rechteckige Schaltfläche LButtonSample1

Werfen wir zunächst einen Blick auf die Zeichnung der Schaltfläche LButtonSample1.

Sie können die LButton-Klasse verwenden, um eine Schaltfläche in der lufylegend.js-Engine hinzuzufügen, Sie müssen jedoch die visuellen Objekte der beiden Zustände „Taste hoch“ und „Taste runter“ übergeben, bei denen es sich um LSprite oder LBitmap Friends handeln kann Wer eine schönere Schaltfläche möchte, kann ein schönes Bild verwenden.

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

Natürlich können Sie auch das Grafikattribut des LSprite-Objekts verwenden, um eine Grafik zu zeichnen folgt

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

Der obige Code zeichnet nur zwei Rechtecke unterschiedlicher Farbe, was natürlich nicht schön genug ist. Das LButtonSample1-Objekt wird basierend auf dieser Methode erstellt.

Schauen Sie sich den Konstruktorcode von LButtonSample1 an

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

Sie können sehen, dass er von LButton erbt, also über alle Methoden und Eigenschaften von LButton verfügt und außerdem btn_up und btn_down als zwei verwendet Buttons Der Zustand wird an die übergeordnete Klasse LButton übergeben.

btn_up ist der Popup-Status der Schaltfläche. Er enthält zwei LSprite-Objekte (Shadow und Back) und ein LTextField-Objekt. Der Schatten wird verwendet, um den Schatteneffekt auf der Schaltfläche festzulegen, und das LTextField-Objekt Wird verwendet, um den Schaltflächentext anzuzeigen. Der Zeichenvorgang der Schaltfläche

erfolgt in der Funktion _onDraw wie folgt.

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

In der Funktion _onDraw werden zwei neue Verlaufsfarben angezeigt und dann werden zwei normale Rechtecke in den beiden Zuständen der Schaltfläche gezeichnet. Auf diese Weise wird eine Schaltfläche erfolgreich gezeichnet.

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

Effekt

2, abgerundete Rechteck-Schaltfläche LButtonSample2

Mit LButtonSample1 ist das abgerundete Rechteck LButtonSample2 einfach. Ersetzen Sie einfach das gezeichnete rechteckiger Teil mit abgerundetem Rechteck, aber wir müssen den Konstruktor nicht erneut schreiben. Lassen Sie einfach LButtonSample2 wie folgt LButtonSample1 erben und dann die Funktion _onDraw wie folgt.

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

Der Unterschied liegt in der Funktion drawRoundRect, die ein abgerundetes Rechteck zeichnet. Die Verwendungsmethode ist wie folgt.

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

Effekt

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

3. Optionsfeld LRadio

LRadio besteht aus einem oder mehreren LRadioChild-Objekten.

LRadioChild besteht tatsächlich aus zwei überlappenden visuellen Objekten, „layer“ und „layerSelect“, um festzulegen, ob das „layerSelect“-Objekt angezeigt wird, wodurch sich sein Erscheinungsbild ändert. Wenn auf das „LRadioChild“-Objekt geklickt wird, heißt das übergeordnete Objekt level ist die setValue-Methode des übergeordneten Objekts. Schauen wir uns noch einmal den LRadio-Code an.

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

Fügen Sie untergeordnete LRadioChild-Objekte über setChildRadio oder Push hinzu und ändern Sie dann beim Aufruf der setValue-Funktion den Status aller untergeordneten LRadioChild-Objekte und legen Sie das angeklickte untergeordnete Objekt als ausgewählt fest.

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

Wie folgt verwenden:

Wirkung

	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. Das Mehrfachauswahlfeld LCheckBox

Das Mehrfachauswahlfeld ist relativ einfach

Wie Sie sehen können, ist sein Prinzip das gleiche wie bei LRadioChild und wird auch von gesteuert zwei überlappende visuelle Objekte.

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

Die Verwendungsmethode ist wie folgt:

Effekt

	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, Kombinationsfeld LComboBox

Dies ist etwas komplizierter, da Sie keine Einzelauswahl- oder Mehrfachauswahlfelder haben möchten. Klicken Sie einfach, um den Status zu ändern. Es muss je nach Klick in der internen Liste nach oben und unten gescrollt werden Schauen wir uns zunächst den Konstruktor an.

Layer ist der Stil des Kombinationsfelds, und LayerUp und LayerDown sind die Auf- bzw. Ab-Steuerschaltflächen. Durch Klicken auf diese beiden Schaltflächen werden zusätzlich die Funktionen _onChangeUp und _onChangeDown aufgerufen Die interne Liste der Box wird der textLayer-Ebene hinzugefügt.

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

Sehen Sie, die setChild-Funktion

Diese Funktion fügt der Kombinationsfeldliste ein Element hinzu und verwendet das LTextField-Objekt, um es anzuzeigen.

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

Dann schauen Sie sich die Funktionen _onChangeUp und _onChangeDown an.

Diese beiden Funktionen verwenden LTweenLite, um die Textebene des Kombinationsfelds nach oben oder unten zu verschieben.

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

Ob setChild oder _onChangeUp und _onChangeDown, die Aktualisierungsfunktion wird aufgerufen.

Sie können sehen, dass diese Funktion tatsächlich etwas mit dem Kombinationsfeld macht Es wird eine Neuzeichnung durchgeführt, wobei drawRect zum Zeichnen des Rechtecks ​​und drawVertices zum Zeichnen des Dreiecks verwendet wird.

Das Kombinationsfeld wird wie folgt verwendet:

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

Effekt

	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）！