利用UIGI製作的簡易的自定義圖形血條

目錄

5.結語

1.效果展示

                                                                                               填充形

                                                                                                  環形

                                                                                                環形滑條

2.內容簡介

       常規制作血條和進度條一般會使用Slider,很方便，但是為了滿足日益膨脹的產品要求，常規的血條和進度條已經滿足不了我們的需要了，本篇部落格博主利用Image的相關屬性來製作不規則的血條和滑動條。

3.具體內容和思路

.Image相關屬性介紹

       如上圖所示，圖1為常規圖片屬性，Image Type預設為Simple，這裡我們將圖片的型別修改為最後一項，Filled，意為將圖片修改為填充圖片。

       Fill Method:填充方法

       修改圖片填充的方法，可以設定為水平填充，垂直填充，或者是根據角度來填充

       Fill Origin:填充起點

       設定填充開始的起點，一般有上下左右四個位置

        Fill Anount:填充數值

       填充的數值，可以通過滑動來設定填充數值

       Clockwise:順時針

       只有填充方式設定為角度填充的時候可以選擇

       Preserve Aspect:儲存方向（暫時不知道幹什麼用）

.效果圖一具體實現方法

        綜上，修改小魚的圖片屬性後就可以實現效果圖所示的效果了，是不是超級簡單，和美術協商，製作不同樣式的圖片可以作出各種各樣的填充效果，Fill Amount就類似Slider的Value了。

.效果圖二具體實現方法

       設定圖片的填充方式為360度，從底部開始，滑動Fill Amount就可以實現效果圖二的效果了，超級簡單的圓環血條就實現啦。

.效果圖三具體實現方法

        大圓環和黑色小圓，大圓的設定和效果圖二保持一致，小圓設定為大圓環的子物體，鉚點設定為中下，實現思路，滑鼠拖動黑色小圓，小圓和圓環中心距離保持不變，繞中心畫圓，小圓到圓環中心為向量1，Vector2.Down為向量2，計算兩向量的夾角Angle，根據Angle/360的值來得出Fill Amount的值，計算覆蓋比例。程式碼入下：（掛載在小圓上）

/// ******************************************************************************************
/// Date:2018/10/18
/// Authour:大蝦小二
/// CSDN ID：Mr_Sun88
///  ******************************************************************************************
public class Test : MonoBehaviour, IDragHandler
{
	private float distance; //小圓到圓環中心的距離
	
	public Transform smallCricle; //小圓
	
	public Transform bigCricle; //圓環
	
	public Vector2 centerPOs; //中心座標
	
	private float angle; //夾角
	
	// Use this for initialization
	void Start()
	{
		centerPOs = bigCricle.position; //初始化中心座標
		distance = (bigCricle.position - smallCricle.position).magnitude; //計算距離
	}
	
	
	/// <summary>
	/// 繼承介面IDragHandler,重寫OnDrag類
	/// </summary>
	/// <param name="eventData"></param>
	public void OnDrag(PointerEventData eventData)
	{
		Vector2 vect = eventData.position - centerPOs; //向量1
	
		smallCricle.position = centerPOs + vect.normalized * distance; //小圓位置的更新，中心點加上滑鼠向量的歸一值乘上距離
	
		angle = Vector2.Angle(Vector2.down, vect); //計算兩個向量的夾角
	
		if (vect.x < 0)
		{
			angle = 360 - angle; //利用向量1的X的正負來判斷讀書是否超過180，超過了要換一下計算方式，因為和angle最大是180
		}
	
		bigCricle.GetComponent<Image>().fillAmount = 1 - (angle / 360); //根據角度的比值來調整圖片的填充值
	}
}

4.資源包下載

5.結語

       本篇部落格，博主只是利用了簡單的功能去實現需求，讀者可以根據自身需求結合上述方法，來製作更加精良的血條和滑動條，另博主能力有限，文中若有錯誤的地方期望各位看家可以指點交流。

       QQ交流群：806091680（Chinar）

       該群為CSDN博主Chinar所創，推薦一下！我也在群裡！