UGUI引导遮罩实现

思路:
1.显示上用一个全屏的灰色Image 作为遮罩体, 获取目标控件的位置和大小数据后,重新组织遮罩的网格数据把目标控件的部分剔除,形成镂空;
2.点击事件 根据点击位置 判断 是否在目标控件的矩形中,如果在矩形中事件穿透下去传递给目标的控件 , 如果不在拦截该点击事件,让事件无效;

先来实现1的效果:
unity的UGUI 控件都是继承至UnityEngine.UI.Graphic这个基类,它有一个OnPopulateMesh(VertexHelper vh)函数
这个函数会在UI元素生成顶点数据时调用,vh里存的就是该控件的顶点数据信息,如果我们重写该函数,把我们自定的顶点数据放进去,控件就会按照修改后的顶点数据渲染出控件的样子.
所以现在关键是如何自定遮罩镂空的顶点数据,这里需要一点点图形学的知识.关于顶点,绘制三角形,绘制矩形 看下这个链接:xxx
画张图来描述:

最后上代码:
 

public class GuideMask : MaskableGraphic, ICanvasRaycastFilter
{
    [Header("目标控件")]
    public RectTransform TargetItem;
    public bool IsRaycast = true;
    private Vector2 targetMin;
    private Vector2 targetMax;
    //事件筛选
    bool ICanvasRaycastFilter.IsRaycastLocationValid(Vector2 screenPos, Camera eventCamera) {
        //没有目标 事件有效