简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > H5 チュートリアル > 本文

独自の UI コンポーネントの詳細を描画します

黄舟
リリース： 2017-03-01 15:54:11
オリジナル
1563 人が閲覧しました

HTML5 オープンソース エンジン lufylegend-1.7.1 バージョンのダウンロード パッケージには、lufylegend.js エンジンの専用 UI コンポーネントである lufylegend.ui-0.1.0.js ファイルが含まれています。 API の概要を説明します。この UI コンポーネントは、ボタン、ラジオ ボックス、複数選択ボックス、コンボ ボックス、スクロール バー、その他の UI を含む、怠け者向けに特別に用意されています。

ここで、誰もが新しい UI コンポーネントをよりよく理解し、拡張できるように、これらの UI の描画プロセスについて詳しく説明します。

1、長方形ボタン LButtonSample1

まず、LButtonSample1 ボタンの描画を見てみましょう。

LButton クラスを使用して lufylegend.js エンジンにボタンを追加できますが、ボタンのポップアップとボタンの押下という 2 つの状態のビジュアル オブジェクトを渡す必要があります。必要に応じて、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);
ログイン後にコピー

上記のコードは 2 つの異なる色を描画するだけです。これは単なる長方形ですが、確かに十分に美しくありません。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 のすべてのメソッドとプロパティも持ち、ボタンの 2 つの状態として btn_up と btn_down を使用し、それをボタンに渡します。親クラス LButton 。

btn_up はボタンのポップアップ状態です。これには 2 つの LSprite オブジェクト (シャドウとバック) と LTextField オブジェクトが含まれており、シャドウはボタンのシャドウ効果を設定するために使用され、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 関数では、2 つの新しいグラデーション色が作成され、ボタンの 2 つの状態で 2 つの通常の長方形が描画されることが示されています。使用方法は次のとおりです。 。 

	var button02 = new LButtonSample1("测试按钮2");
	button02.backgroundCorl = "#008800";
	button02.x = 150;
	button02.y = 10;
	layer.addChild(button02);
ログイン後にコピー

Effect

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);
ログイン後にコピー

Effect

3. ラジオボタン LRadio

LRadio は 1 つ以上の 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 という 2 つの重なったビジュアル オブジェクトで構成されます。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);
ログイン後にコピー

Effect




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 と同じで、2 つのオーバーラップするビジュアル オブジェクトを通じてチェックボックスの状態を制御します。

使用方法は次のとおりです: 

	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);
ログイン後にコピー

Effect



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 はそれぞれその上と下のコントロール ボタンです。これら 2 つのボタンをクリックすると、それぞれ _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
	});
};
ログイン後にコピー

これら 2 つの関数は、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 を使用して四角形を描画していることがわかります。三角形。
コンボボックスの使い方は以下の通りです: 

	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);
ログイン後にコピー

Effect


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


関連ラベル：
UI组件，HTML5
ソース：php.cn
前の記事：HTML5 開発 - ゲーム アプリケーションに広告を追加する 次の記事：HTML5オープンソースゲームエンジン lufylegend1.7.1 リリース
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Reactのsortメソッドでレンダリング(フィルターとページネーションを使用)をトリガーするにはどうすればよいですか? これが私の Sort.js スタイル コンポーネントです: <SortWrapper><SortText>SortBy</SortText>&l...
から 2024-04-06 21:28:37
0
1
2257
livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したい これまでに試したこと: Laravel コンポーネントを含めることによる Live...
から 2024-04-06 20:02:10
0
2
543
Android 上の React-Native でステータス更新が機能しない スワイプ可能な水平ギャラリーに画像のペアを含むコードがいくつかあります。両方の画像の上部をクリックすると、画像がオフに切り替わるはずです。そのため、私が行ったのは、isImage2...
から 2024-04-06 16:54:10
0
1
410
React Three Fiber: スクロール イベントが遅れるのはなぜですか? ReactThreeFiber には、カメラのズーム全体にわたって保持したいスプライトを生成する React コンポーネントがあります。アルゴリズムは機能しているようですが (サイ...
から 2024-04-06 13:39:24
0
1
410
Vue3 Webコンポーネントのプロダクションビルドの問題を解決する vue2web コンポーネントを vue3 に移行しようとしていますが、運用用のビルドを作成するときに問題が発生します。 --targetwc を指定して vue-cli を使用し...
から 2024-04-06 12:43:37
0
1
473
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！