ugui unity 取消选择_UGUI中几种不规则按钮的实现方式

前言

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属性的菜单项。创建完一个普通的按钮后，右键执行命令：