Unity: 一个简单的矩形遮罩组件

代码如下:

namespace DCG
{
    using UnityEngine;
    using UnityEngine.UI;
    using UnityEngine.Sprites;

    /// <summary>
    /// 矩形遮罩
    /// @Author: Danny Yan
    /// </summary>
    [RequireComponent(typeof(Image))]
    public class ImageMaskRect : UnityEngine.UI.BaseMeshEffect
    {
        [SerializeField]
        private float offX = 0;
        [SerializeField]
        private float offY = 0;

        [SerializeField]
        private float maskWidth = 0;
        [SerializeField]
        private float maskHeight = 0;

        [SerializeField]
        [Tooltip("mask方式,true:视觉上mash相对位置不变,图片在mask内滑动  false:视觉上图片不动,mask在图片上滑动")]
        private bool _fixMaskViewPort = false;
        public bool fixMaskViewPort
        {
            get { return this._fixMaskViewPort; }
            set
            {
                this._fixMaskViewPort = value;
                this.graphic.SetVerticesDirty();
            }
        }

        [Tooltip("isInner true:不包含渐变边缘(会导致uv大于1,产生放大) false:包含渐变边缘")]
        public bool isInner = false;

        private Vector3[] vertices;
        private Vector3[] triangles;

        private Vector2 uvs;

        private Image _image;

        // --------------------------------------------
        override protected void Awake()
        {
            base.Awake();
            this._image = this.GetComponent<Image>();
            var size = _image.rectTransform.sizeDelta;
            this.SetMaskRectQuick(size.x, size.y);
        }
        internal void FixedUpdate()
        {
#if UNITY_EDITOR
            this.SetRect(this.offX, this.offY, this.maskWidth, this.maskHeight);
            // this.SetMaskRectQuick(this.maskWidth, this.maskHeight);
#endif
        }

        /// 使fixMaskViewPort为false,且根据image的anchor自动设置offx/offy,达到只通过width/height来设置mask的效果
        public void SetMaskRectQuick(float width, float height)
        {
            this._fixMaskViewPort = false;
            var pivot = this._image.rectTransform.pivot;
            var size = _image.rectTransform.sizeDelta;
            var offX = -pivot.x * size.x;
            var offY = -pivot.y * size.y;
            this.SetRect(offX, offY, width, height);
        }

        public void SetRect(float offX, float offY, float width, float height)
        {
            this.offX = offX;
            this.offY = offY;
            this.maskWidth = width;
            this.maskHeight = height;

            if (this.vertices == null || this.vertices.Length != 4)
            {
                this.vertices = new Vector3[4];
            }

            if (triangles == null || this.triangles.Length != 2)
            {
                triangles = new Vector3[2];
                this.triangles[0] = new Vector3(0, 1, 2);
                this.triangles[1] = new Vector3(2, 3, 0);
            }

            if (uvs == null)
            {
                uvs = new Vector2(0, 0);
            }

            var _offx = this._fixMaskViewPort ? 0 : this.offX;
            var _offy = this._fixMaskViewPort ? 0 : this.offY;
            this.vertices[0].x = _offx; this.vertices[0].y = _offy;
            this.vertices[1].x = _offx + maskWidth; this.vertices[1].y = this.vertices[0].y;
            this.vertices[2].x = this.vertices[1].x; this.vertices[2].y = _offy + maskHeight;
            this.vertices[3].x = this.vertices[0].x; this.vertices[3].y = this.vertices[2].y;
            this.graphic.SetVerticesDirty();
        }

        override public void ModifyMesh(VertexHelper vh)
        {
            if (!this.enabled || this._image == null) return;
            vh.Clear();

            float tw = _image.rectTransform.rect.width;
            float th = _image.rectTransform.rect.height;
            // uv映射得到宽高. GetOuterUV获取到包含所有像素的UV, GetInnerUV在遇到渐变图片时返回的uv可能大于1,最终会产生放大效果
            Vector4 uv = _image.overrideSprite != null ? (isInner ? DataUtility.GetInnerUV(_image.overrideSprite) : DataUtility.GetOuterUV(_image.overrideSprite)) : Vector4.zero;
            float w = uv.z - uv.x;
            float h = uv.w - uv.y;

            float uvScaleX = w / tw; // 宽的比例
            float uvScaleY = h / th; // 高的比例
            float uvCenterX = uv.x + w * _image.rectTransform.pivot.x;
            float uvCenterY = uv.y + h * _image.rectTransform.pivot.y;

            UIVertex uivert = UIVertex.simpleVert;

            for (int i = 0; i < (this.vertices == null ? 0 : this.vertices.Length); i++)
            {
                uivert.color = _image.color;
                uivert.position = this.vertices[i];
                if (this._fixMaskViewPort)
                {
                    this.uvs.x = (this.vertices[i].x + offX) * uvScaleX + uvCenterX;
                    this.uvs.y = (this.vertices[i].y + offY) * uvScaleY + uvCenterY;
                }
                else
                {
                    this.uvs.x = this.vertices[i].x * uvScaleX + uvCenterX;
                    this.uvs.y = this.vertices[i].y * uvScaleY + uvCenterY;
                }
                uivert.uv0 = this.uvs;
                vh.AddVert(uivert);
            }

            for (int i = 0; i < (this.triangles == null ? 0 : this.triangles.Length); i++)
            {
                var tri = this.triangles[i];
                vh.AddTriangle((int)tri.x, (int)tri.y, (int)tri.z);
            }
        }
    }
}

image.png

使用以下属性:

image.png

得到:

image.png

转载请注明出处: https://www.jianshu.com/p/2e0d8f3ef9e2