代碼如下:

    using UnityEngine;
    using UnityEngine.UI;
    using UnityEngine.Sprites;

    /// <summary>
    /// 矩形遮罩
    /// </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

轉載請注明出處: http://www.itdecent.cn/p/2e0d8f3ef9e2