美文网首页unity
【Unity】UGUI圆形(多边)头像解决方案

【Unity】UGUI圆形(多边)头像解决方案

作者: 木心Sepith | 来源:发表于2019-01-30 10:29 被阅读54次

这个类继承自RawImage,挂上去直接用就行,如果要圆形的头像只要把边调整为25以上,效果就近似圆形了

using System;
using UnityEngine;
using UnityEngine.UI;

public class UICircle : RawImage
{
    const int FILL_PERCENT = 100;
    float thickness = 5;

    [SerializeField]
    [Range(4, 360)]
    int _segments = 4;

    public int segments
    {
        get { return _segments; }
        set
        {
            if (_segments != value)
            {
                _segments = value;
                SetVerticesDirty();
#if UNITY_EDITOR
                UnityEditor.EditorUtility.SetDirty(transform);
#endif
            }
        }
    }

    protected override void OnRectTransformDimensionsChange()
    {
        base.OnRectTransformDimensionsChange();
        this.thickness = (float)Mathf.Clamp(this.thickness, 0, rectTransform.rect.width / 2);
    }

    protected override void OnPopulateMesh(VertexHelper vh)
    {
        float outer = rectTransform.rect.width / 2.0f;

        vh.Clear();

        Vector2 prevX = Vector2.zero;
        Vector2 prevY = Vector2.zero;
        Vector2 uv0 = new Vector2(0, 0);
        Vector2 uv1 = new Vector2(0, 1);
        Vector2 uv2 = new Vector2(1, 1);
        Vector2 uv3 = new Vector2(1, 0);
        Vector2 pos0;
        Vector2 pos1;
        Vector2 pos2;
        Vector2 pos3;

        float tw = rectTransform.rect.width;
        float th = rectTransform.rect.height;

        float angleByStep = (FILL_PERCENT / 100f * (Mathf.PI * 2f)) / segments;
        float currentAngle = 0f;
        for (int i = 0; i < segments + 1; i++)
        {

            float c = Mathf.Cos(currentAngle);
            float s = Mathf.Sin(currentAngle);

            StepThroughPointsAndFill(outer, ref prevX, ref prevY, out pos0, out pos1, out pos2, out pos3, c, s);

            uv0 = new Vector2(pos0.x / tw + 0.5f, pos0.y / th + 0.5f);
            uv1 = new Vector2(pos1.x / tw + 0.5f, pos1.y / th + 0.5f);
            uv2 = new Vector2(pos2.x / tw + 0.5f, pos2.y / th + 0.5f);
            uv3 = new Vector2(pos3.x / tw + 0.5f, pos3.y / th + 0.5f);

            vh.AddUIVertexQuad(SetVbo(new[] { pos0, pos1, pos2, pos3 }, new[] { uv0, uv1, uv2, uv3 }));

            currentAngle += angleByStep;
        }
    }

    private void StepThroughPointsAndFill(float outer, ref Vector2 prevX, ref Vector2 prevY, out Vector2 pos0, out Vector2 pos1, out Vector2 pos2, out Vector2 pos3, float c, float s)
    {
        pos0 = prevX;
        pos1 = new Vector2(outer * c, outer * s);

        pos2 = Vector2.zero;
        pos3 = Vector2.zero;

        prevX = pos1;
        prevY = pos2;
    }

    protected UIVertex[] SetVbo(Vector2[] vertices, Vector2[] uvs)
    {
        UIVertex[] vbo = new UIVertex[4];
        for (int i = 0; i < vertices.Length; i++)
        {
            var vert = UIVertex.simpleVert;
            vert.color = color;
            vert.position = vertices[i];
            vert.uv0 = uvs[i];
            vbo[i] = vert;
        }
        return vbo;
    }
}

相关文章

  • 【Unity】UGUI圆形(多边)头像解决方案

    这个类继承自RawImage,挂上去直接用就行,如果要圆形的头像只要把边调整为25以上,效果就近似圆形了

  • 6、实现圆形组件

    圆形在很多地方都会有应用,圆形小地图,圆形头像框,圆形技能框,圆形瞄准镜框等。 在Unity中UGUI的IMage...

  • Unity3d Shader实现圆形头像

    Unity3d Shader实现圆形头像 设计需要头像显示圆形,但是默认图片类型都是矩形。因为没有美术兄弟帮助所以...

  • Unity3D

    UGUI简介 UGUI是Unity官方推出的UI系统,集成了所见即所得的UI解决方案, 其功能丰富并且使用简单,同...

  • Unity官方的UGUI优化指南读后总结

    Unity官方的UGUI优化指南读后总结 Unity官方的UGUI优化指南: Optimizing Unity U...

  • UI之Scroll View加组件Grid Layout Gro

    参考链接 Unity UGUI 之 Scroll View 使用 Unity UGUI 利用Scroll Vie...

  • 20UGUI系统控件的了解

    UGUI的了解## UGUI(unity graphical user interface)可以简称为Unity图...

  • unity ugui多边形显示

    原博客 大家好我是白泽。 今天刚好用到unity的多边形显示功能到网上找例子发现只有雨凇的例子。之后照着雨凇的例子...

  • Unity学习—UGUI使用

    关于Unity UGUI使用方面知识 必读参考 本文原地址:Unity学习—UGUI使用 画布 Canvas 渲染...

  • unity 面试 准备

    unity相关 先上参考帖Unity3D :关于UGUI的网格重建、动静分离 关于Unity中的UGUI优化,你可...

网友评论

    本文标题:【Unity】UGUI圆形(多边)头像解决方案

    本文链接:https://www.haomeiwen.com/subject/wlpqsqtx.html