前言

UGUI中的按鈕默認是矩形的，若要實現非矩形按鈕該怎么做呢？比如這樣的按鈕：

本文將介紹兩種實現方式供大家選擇。

使用alphaHitTestMinimumThreshold

Image類的alphaHitTestMinimumThreshold是一個浮點值，Raycast檢測時只有圖片中高于該值的部分會拋出點擊事件。因此我們可以使用一張alpha通道的值高于該設置值的Sprite用于自定義按鈕的點擊相應區域。

我們準備一張點擊區域alpha高于某值，非點擊區域alpha低于某值的Sprite用于Button的Image組件的Sprite。然后給這個Button掛上如下腳本組件即可：

using UnityEngine; using UnityEngine.UI;public class AlphaButton : MonoBehaviour {public float alphaThreshold = 0.1f;void Start() {GetComponent<Image>().alphaHitTestMinimumThreshold = alphaThreshold;} }

但這種方法有幾個問題：

由于是代碼中需要讀取圖片的alpha值用于比較，因此圖片在導入時需要開啟Readable/Write Enable，這樣會使運行時貼圖大小翻倍，內存中會額外存儲一份貼圖數據，增大內存開銷。

如果是點擊區域內部需要有一些低于設置值的透明樣式則無法滿足。

點擊區域的調整需要修改圖片資源，十分不便。

如果可以接受這些缺點，可以使用這個方法。

使用IsRaycastLocationValid

通過繼承Image并重寫IsRaycastLocationValid方法可以自定義按鈕的可點擊區域。

將如下代碼放置于項目中：

using UnityEngine; using UnityEngine.UI; #if UNITY_EDITOR using UnityEditor;#endif [RequireComponent(typeof(PolygonCollider2D))] public class NonRectangularButtonImage : Image {private PolygonCollider2D areaPolygon;protected NonRectangularButtonImage() {useLegacyMeshGeneration = true;}private PolygonCollider2D Polygon{get{if (areaPolygon != null)return areaPolygon;areaPolygon = GetComponent<PolygonCollider2D>();return areaPolygon;}}protected override void OnPopulateMesh(VertexHelper vh) {vh.Clear();}public override bool IsRaycastLocationValid(Vector2 screenPoint, Camera eventCamera) {return Polygon.OverlapPoint(eventCamera.ScreenToWorldPoint(screenPoint));}#if UNITY_EDITOR protected override void Reset() {base.Reset();transform.localPosition = Vector3.zero;var w = rectTransform.sizeDelta.x * 0.5f + 0.1f;var h = rectTransform.sizeDelta.y * 0.5f + 0.1f;Polygon.points = new[]{new Vector2(-w, -h),new Vector2(w, -h),new Vector2(w, h),new Vector2(-w, h)};} #endif } #if UNITY_EDITOR [CustomEditor(typeof(NonRectangularButtonImage), true)] public class CustomRaycastFilterInspector : Editor {public override void OnInspectorGUI() {} }public class NonRectAngularButtonImageHelper {[MenuItem("GameObject/UI/NonRectangularButtonImage")]public static void CreateNonRectAngularButtonImage() {var goRoot = Selection.activeGameObject;if (goRoot == null)return;var button = goRoot.GetComponent<Button>();if (button == null){Debug.Log("Selecting Object is not a button!");return;}// 關閉原來button的射線檢測var graphics = goRoot.GetComponentsInChildren<Graphic>();foreach (var graphic in graphics){graphic.raycastTarget = false;}var polygon = new GameObject("NonRectangularButtonImage");polygon.AddComponent<PolygonCollider2D>();polygon.AddComponent<NonRectangularButtonImage>();polygon.transform.SetParent(goRoot.transform, false);polygon.transform.SetAsLastSibling();} }#endif

這段代碼大部分參考自雨松大神的這篇文章：

UGUI研究院之不規則按鈕的響應區域（十四）

還額外寫了一個自動添加組件和設置raycastTarget屬性的菜單項。創建完一個普通的按鈕后，右鍵執行命令：

這將自動創建一個名為“NonRectangularButtonImage”的子節點，并添加一個同名的腳本組件和一個PolygonCollider2D組件。編輯PolygonCollider2D組件即可設置按鈕的點擊區域，調整起來也十分方便，既簡單又節省內存。

我的Github中這兩種方式都有實現，供大家參考：

共三組按鈕，點擊后可以在Console窗口中看到響應Log。

第一組是沒有任何處理的普通按鈕，由于在Hierarchy中RightButton在下，點擊Left的右下角還是右邊按鈕響應，用于對照。

第二組使用了設置alphaHitTestMinimumThreshold的方式。

第三組使用了重寫IsRaycastLocationValid的方式，并故意調整了Button在Hierarchy中的順序。

如果可以，也希望大家點個Star。

專欄文章繼續更新，歡迎關注微信公眾號：Unity與圖形學

參考

使用alphaHitTestMinimumThreshold的方式

UGUI研究院之不規則按鈕的響應區域（十四）

使用mask的方式

Image.alphaHitTestMinimumThreshold

ICanvasRaycastFilter.IsRaycastLocationValid

總結

以上是生活随笔為你收集整理的ugui unity 取消选择_UGUI中几种不规则按钮的实现方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。