修改UGUI RawImage形状(在一个rawimage上显示N个颜色,两两颜色之间有过度)

效果图:
这里写图片描述

将代码继承Graphic,然后重写OnPopulateMesh方法即可,具体代码如下:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class test : Graphic {
    /// <summary>
    /// 分的块数
    /// </summary>
    private int count = 5;
    /// <summary>
    /// 每一块的颜色
    /// </summary>
    public List<Color> c = new List<Color>();

    private int index = 0;

    protected override void Start()
    {
        c.Clear();
        for (int i = 0; i < count + 1; i++) {
            c.Add(Color.white);
        }
    }

    private void Update()
    {
        if (Input.GetMouseButtonDown(0)) {
            c[index] = new Color(Random.Range(0, 255) / 255.0f, Random.Range(0, 255) / 255.0f, Random.Range(0, 255) / 255.0f, 1);
            index++;
            if (index >= count + 1) {
                index = 0;
            }
        }
        SetAllDirty();//刷新界面
    }

    protected override void OnPopulateMesh(VertexHelper vh)
    {
        vh.Clear();
        //计算宽高,和每一块的宽高
        float width = transform.GetComponent<RectTransform>().sizeDelta.x;
        float height = transform.GetComponent<RectTransform>().sizeDelta.y;
        float singleWidth = width / count;
        float singleHeight = height * 0.5f;
    //
        //  upLeft    upRight
        //      -----------------------------
        //      |        |        |         |
        //      -----------------------------
        //  downLeft   downRight
        Vector2 upLeft = new Vector2(-width * 0.5f, singleHeight);
        Vector2 downLeft = new Vector2(-width * 0.5f, -singleHeight);
        Vector2 upRight = new Vector2(upLeft.x + singleWidth, singleHeight);
        Vector2 downRight = new Vector2(downLeft.x + singleWidth, -singleHeight);

        for (int i = 0; i < count; i++) {
            UIVertex first = GetUIVertex(upLeft, c[i]);
            UIVertex second = GetUIVertex(downLeft, c[i]);
            UIVertex third = GetUIVertex(downRight, c[i + 1]);
            UIVertex four = GetUIVertex(upRight, c[i + 1]);

            vh.AddUIVertexQuad(new UIVertex[] {first,second,third,four });

            upLeft = upRight;
            downLeft = downRight;
            upRight = upRight + new Vector2(singleWidth, 0);
            downRight = downRight + new Vector2(singleWidth, 0);
        }

        for (int i = 0; i < vh.currentVertCount; i+=4) {
            vh.AddTriangle(i + 0, i + 3, i + 2);
            vh.AddTriangle(i + 0, i + 2, i + 1);
        }
    }

    private UIVertex GetUIVertex(Vector2 point, Color color0) {
        UIVertex vertex = new UIVertex
        {
            position = point,
            color = color0,
        };
        return vertex;
    }
}

运行状态下,点击一下鼠标RawImage添加一个颜色

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值