Unity3d实现组件有一定斜率变化的颜色渐变

Unity3d实现组件有一定斜率变化的颜色渐变

参考了http://www.xuanyusong.com/archives/3471并进行了改进

其实现有一定斜率的颜色渐变


效果实现

实现原理

使用两种颜色，分别为底色和较鲜艳的颜色，通过插值计算该点颜色取值。

得到斜率为k，经过最左下点的斜线L1
得到经过最右上点，垂直于L1的直线L2
求出L1和L2的交点，该点到最左下点的距离即为最鲜艳的颜色P1
然后使用插值 计算每一个点垂直于L1交点于左下点的距离，对左下点和P1的距离进行插值得到每一个像素的颜色值。

AddComponentMenu("UI/Effects/Gradient")] 
将此script加入到unity3d的Compenent下方便下次使用
public class FontShaderController : BaseMeshEffect //继承unity3d中的方法使其能够对像素进行操作
{
    [SerializeField]
    private Color32 topColor = Color.black;
    [SerializeField]
    private Color32 bottomColor = Color.white;
    [Range(0,90)]  //取 0 到 90 度
    public float  k = 0;
//对变量序列化，方便在unity3d中改变参数 。
    public override void ModifyMesh(VertexHelper vh) 
//覆盖BaseMeshEffect中的方法，该方法为对该组件网络进行操作,VertexHelper储存了该组件的像素信息
    {
        if (!IsActive())
        {
            return;
        }
        k = k % 90;  
//防止k值大于90 使其强制在0~90°之间
        var vertexList = new List<UIVertex>();

        vh.GetUIVertexStream(vertexList);
//得到组件像素信息并且储存在vertexList中。
        int count = vertexList.Count;

        ApplyGradient(vertexList, 0, vertexList.Count);
        vh.Clear();
        vh.AddUIVertexTriangleStream(vertexList);
    }
private void ApplyGradient(List<UIVertex> vertexList,int start,int end)
    {
        float bottomY = vertexList[0].position.y;
        float topY = vertexList[0].position.y;
        float topX = vertexList[0].position.x;
        float bottomX = vertexList[0].position.x;
        for(int i = start; i < end; i++)
        {
            float x = vertexList[i].position.x;
            float y = vertexList[i].position.y;
            if (y > topY)
            {
                topY = y;
            }
            else
            {
                if (y < bottomY)
                {
                    bottomY = y;
                }
            }
            if (x > topX)
            {
                topX = x;
            }
            else
            {
                if (x < bottomX)
                {
                    bottomX = x;
                }
            }
        }
        float uiElementHeight = topY - bottomY;
        float uiElementWeight = topX - bottomX;
        Vector2 bottomPoint = new Vector2(bottomX, bottomY);
        for(int i = start; i < end; ++i)
        {
            UIVertex uiVertex = vertexList[i];
            if (k % 90 == 0)
            {
                uiVertex.color = Color32.Lerp(bottomColor, topColor, (uiVertex.position.x) / uiElementWeight);
            }
            else
            {
                uiVertex.color = Color32.Lerp(bottomColor, topColor, (getPointLength(bottomPoint,uiVertex.position,k))
                    /getMaxLength(bottomPoint,topX,topY,k));
            }
            vertexList[i] = uiVertex;
        }
    }
    // to do 
   //得到位置到最底端的距离
    float getPointLength(Vector2 source,Vector2 taget,float k)
    {
        Vector2 intersectionOfPoint = getIntersection(taget, source, k);
        return getDistance(intersectionOfPoint, source);
    }
    //得到最大长度
    float getMaxLength(Vector2 source,float maxX,float maxY,float k)
    {
        Vector2 intersectionOfPoint = getIntersection(new Vector2(maxX, maxY), source, k);
          return getDistance(intersectionOfPoint,source);
    }
    //得到两个点的距离
    float getDistance(Vector2 taget,Vector2 source)
    {
        return Mathf.Sqrt(Mathf.Pow(taget.x-source.x, 2) + Mathf.Pow(taget.y-taget.y, 2));
    }
    //已知斜率，其中一个点得到方程式的Y
    float getPonitY(float x,float k,Vector2 source)
    {
        return Mathf.Tan(Mathf.Deg2Rad * k) * x + source.y - Mathf.Tan(Mathf.Deg2Rad * k) * source.x;
    }
    //求两个点所在互相垂直点的交点
    Vector2 getIntersection(Vector2 point,Vector2 bottom,float k)
    {
        float x = (point.y - Mathf.Tan((k+90)*Mathf.Deg2Rad) * point.x - (bottom.y - Mathf.Tan(Mathf.Deg2Rad * k) * bottom.x))
            /(Mathf.Tan(Mathf.Deg2Rad*k) -Mathf.Tan((k+90)*Mathf.Deg2Rad));
        float y = getPonitY(x, k, bottom);
        return new Vector2(x, y);
    }
}

“`