Unity中实现可变形的Image

Posted 2023-03-03 Hello Bug.

一：效果演示

---

二：实现思路

重写Image的OnPopulateMesh方法，首先获取到顶点坐标，然后不同方向做不同的偏移

---

三：代码实现

using UnityEngine;
using UnityEngine.UI;

/// <summary>
/// 可变形的image
/// </summary>
public class SkewImage : Image

    [SerializeField]
    private Vector2 rtOffset;//右上
    [SerializeField]
    private Vector2 rbOffset;//右下
    [SerializeField]
    private Vector2 ltOffset;//左上
    [SerializeField]
    private Vector2 lbOffset;//左下

    /// <summary>
    /// 获取偏移量
    /// </summary>
    private Vector3 GetOffset(int i)
    
        if (i == 0)
        
            return lbOffset;
        
        else if (i == 1)
        
            return ltOffset;
        
        else if (i == 2)
        
            return rtOffset;
        
        else if (i == 3)
        
            return rbOffset;
        
        return Vector3.zero;
    

    protected override void OnPopulateMesh(VertexHelper vh)
    
        base.OnPopulateMesh(vh);
        int vertexCount = vh.currentVertCount;
        for (int i = 0; i < vertexCount; i++)
        
            UIVertex vertex = new UIVertex();
            vh.PopulateUIVertex(ref vertex, i);
            vertex.position += GetOffset(i);
            vh.SetUIVertex(vertex, i);