UI绘制

来源：互联网发布：java基础知识书籍编辑：程序博客网时间：2024/05/22 00:41

Unity中的UGUI对外还是很开放的，查看了MaskableGraphic类，发现UI的绘制都是继承自此类，然后在OnPopulateMesh方法中进行UI的绘制，要做自己的UI需要继承此类，然后重写OnPopulateMesh方法（这个方法有两个重载）；这里就重写OnPopulateMesh(VertexHelper vh)，运用VertexHelper 对象的AddUIVertexQuad方法绘制UI；

主要看下面的方法：

  private UIVertex[] GetQuad(Vector2 startPos, Vector2 endPos, Color color0, float lineWidth = 2)    {        var dis = Vector2.Distance(startPos, endPos);        float x = lineWidth * 0.5f * (endPos.y - startPos.y) / dis;        float y = lineWidth * 0.5f * (endPos.x - startPos.x) / dis;        if (x <= 0) x = -x;        else y = -y;        UIVertex[] vertexs = new UIVertex[4];        vertexs[0].position = new Vector2(startPos.x + x, startPos.y + y);        vertexs[1].position = new Vector2(endPos.x + x, endPos.y + y);        vertexs[2].position = new Vector2(endPos.x - x, endPos.y - y);        vertexs[3].position = new Vector2(startPos.x - x, startPos.y - y);        for (int i = 0; i < vertexs.Length; i++)        {            vertexs[i].color = color0;        }        return vertexs;    }    private UIVertex[] GetQuad(Vector2 first, Vector2 second, Vector2 third, Vector2 four, Color color0)    {        UIVertex[] vertexs = new UIVertex[]        {            new UIVertex { position=first,color=color0,uv0=Vector2.zero},            new UIVertex { position=second,color=color0,uv0=Vector2.zero},            new UIVertex { position=third,color=color0,uv0=Vector2.zero},            new UIVertex { position=four,color=color0,uv0=Vector2.zero}        };        return vertexs;    }

直接上完整代码看案例：

using UnityEngine;using System.Collections;using UnityEngine.UI;using System;using System.Collections.Generic;public enum LineType{    None,    FullLine,    LinaryLine}[Serializable]public class FunctionBase{    [Range(40, 100)]    public float axisScale = 50;    [Range(3, 20)]    public float arrowScale = 4;    public LineType lineType = LineType.FullLine;    public bool isShowScale = false;    public float scaleLength = 3;    [Range(1,100)]    public float scaleValue = 50;    public float lineLength = 3;    [Range(3, 8)]    public float spaceLength = 3;    [Range(1.5f, 10)]    public float lineWidth = 1.5f;}public class FunctionalFormula{    public  Func<float, float> formula;    public Color color;    public float LineWidth;    public FunctionalFormula(Func<float, float> Formula,Color colorL,float width)    {        this.formula = Formula;        color = colorL;        LineWidth = width;    }    public Vector2 GetResult(float x,float scale)    {        return new Vector2(x,formula(x/scale)*scale);    }}public class FunctionGraphic : MaskableGraphic{    [Header("Line About Setting")]    public FunctionBase funcBase = new FunctionBase();    public IList<FunctionalFormula> FunctionList = new List<FunctionalFormula>();    public void AddFunction(IList<FunctionalFormula> formuList)    {        foreach (FunctionalFormula formula in formuList)            AddFunction(formula);    }    public void AddFunction(Func<float ,float> function,Color color1,float width)    {        FunctionalFormula formula = new global::FunctionalFormula(function, color1, width);        AddFunction(formula);    }    public void AddFunction(FunctionalFormula formula)    {        FunctionList.Add(formula);    }    protected override void OnPopulateMesh(VertexHelper vh)    {        vh.Clear();        var size = GetPixelAdjustedRect().size;        var topLeft = new Vector2(-size.x / 2, size.y / 2);        var topRight = new Vector2(size.x / 2, size.y / 2);        var bottomLeft = new Vector2(-size.x / 2, -size.y / 2);        var bottomRight = new Vector2(size.x / 2, -size.y / 2);        #region Draw X axis        var startPos = new Vector2(-size.x / 2, 0);        var endPos = new Vector2(size.x / 2, 0);        vh.AddUIVertexQuad(GetQuad(startPos, endPos, Color.red, funcBase.lineWidth));        var firstPoint = new Vector2(size.x / 2, 0);        var secondPoint = firstPoint + new Vector2(0, funcBase.arrowScale);        var thirdPoint = firstPoint + new Vector2(Mathf.Sqrt(3) * funcBase.arrowScale, 0);        var fourPoint = firstPoint + new Vector2(0, -funcBase.arrowScale);        vh.AddUIVertexQuad(GetQuad(firstPoint, secondPoint, thirdPoint, fourPoint, Color.red));        #endregion        #region Draw Y Axis        var bottomPos = new Vector2(0, -size.y / 2);        var topPos = new Vector2(0, size.y / 2);        vh.AddUIVertexQuad(GetQuad(bottomPos, topPos, Color.red, funcBase.lineWidth));        var firstPos = topPos;        var secondPos = new Vector3(-funcBase.arrowScale, size.y / 2);        var thirdPos = new Vector3(0, size.y / 2 + Mathf.Sqrt(3) * funcBase.arrowScale);        var fourPos = new Vector3(funcBase.arrowScale, size.y / 2);        vh.AddUIVertexQuad(GetQuad(firstPos, secondPos, thirdPos, fourPos, Color.red));        #endregion        #region ShowScale        if (funcBase.isShowScale)        {            for (var i = 1; i * funcBase.axisScale < size.x / 2; i++)            {                var StartPos = new Vector2(funcBase.axisScale * i, 0);                vh.AddUIVertexQuad(GetQuad(StartPos, new Vector2(StartPos.x, funcBase.scaleLength), Color.red, 1.5f));            }            for (var i = 1; -funcBase.axisScale * i > -size.x / 2; i++)            {                var StartPos = new Vector2(-funcBase.axisScale * i, 0);                vh.AddUIVertexQuad(GetQuad(StartPos, new Vector2(StartPos.x, funcBase.scaleLength), Color.red, 1.5f));            }            for (var i = 1; i * funcBase.axisScale < size.y / 2; i++)            {                var StartPos = new Vector2(0, i * funcBase.axisScale);                vh.AddUIVertexQuad(GetQuad(StartPos, new Vector2(funcBase.scaleLength, StartPos.y), Color.red, 1.5f));            }            for (var i = 1; -i * funcBase.axisScale > -size.y / 2; i++)            {                var StartPos = new Vector2(0, -i * funcBase.axisScale);                vh.AddUIVertexQuad(GetQuad(StartPos, new Vector2(funcBase.scaleLength, StartPos.y), Color.red, 1.5f));            }        }        #endregion        #region Draw FrameLine                    switch (funcBase.lineType)                    {                        case LineType.FullLine:                            for (var i = 1; i * funcBase.axisScale < size.x / 2; i++)                            {                                var StartPos = new Vector2(funcBase.axisScale * i, -size.y / 2);                                var UpEndPos = new Vector2(StartPos.x, size.y / 2);                                vh.AddUIVertexQuad(GetQuad(StartPos, UpEndPos, Color.white, funcBase.lineWidth));                            }                            for (var i = 1; -funcBase.axisScale * i > -size.x / 2; i++)                            {                                var StartPos = new Vector2(-funcBase.axisScale * i, -size.y / 2);                                var UpEndPos = new Vector2(StartPos.x, size.y / 2);                                vh.AddUIVertexQuad(GetQuad(StartPos, UpEndPos, Color.white, funcBase.lineWidth));                            }                            for (var i = 1; i * funcBase.axisScale < size.y / 2; i++)                            {                                var StartPos = new Vector2(-size.x / 2, i * funcBase.axisScale);                                var rightEndPos = new Vector2(size.x / 2, StartPos.y);                                vh.AddUIVertexQuad(GetQuad(StartPos, rightEndPos, Color.white, funcBase.lineWidth));                            }                            for (var i = 1; -i * funcBase.axisScale > -size.y / 2; i++)                            {                                var StartPos = new Vector2(-size.x / 2, -i * funcBase.axisScale);                                var rightEndPos = new Vector2(size.x / 2, StartPos.y);                                vh.AddUIVertexQuad(GetQuad(StartPos, rightEndPos, Color.white, funcBase.lineWidth));                            }                            break;                        case LineType.LinaryLine:                            {                                for (var i = 1; i * funcBase.axisScale < size.x / 2; i++)                                {                                    var firstPointX = new Vector2(i * funcBase.axisScale, -size.y / 2);                                    var secondPointx = new Vector2(firstPointX.x, size.y / 2);                                    GetImageLinaryLine(ref vh, firstPointX, secondPointx, Color.gray, funcBase.lineLength, funcBase.spaceLength, funcBase.lineWidth);                                }                                for (var i = 1; -funcBase.axisScale * i > -size.x / 2; i++)                                {                                    var firstPointX = new Vector2(-i * funcBase.axisScale, -size.y / 2);                                    var secondPointx = new Vector2(firstPointX.x, size.y / 2);                                    GetImageLinaryLine(ref vh, firstPointX, secondPointx, Color.gray, funcBase.lineLength, funcBase.spaceLength, funcBase.lineWidth);                                }                                for (var i = 1; i * funcBase.axisScale < size.y / 2; i++)                                {                                    var firstPointX = new Vector2(-size.x / 2, i * funcBase.axisScale);                                    var secondPointx = new Vector2(size.x / 2, firstPointX.y);                                    GetImageLinaryLine(ref vh, firstPointX, secondPointx, Color.gray, funcBase.lineLength, funcBase.spaceLength, funcBase.lineWidth);                                }                                for (var i = 1; -i * funcBase.axisScale > -size.y / 2; i++)                                {                                    var firstPointX = new Vector2(-size.x / 2, -i * funcBase.axisScale);                                    var secondPointx = new Vector2(size.x / 2, firstPointX.y);                                    GetImageLinaryLine(ref vh, firstPointX, secondPointx, Color.gray, funcBase.lineLength, funcBase.spaceLength, funcBase.lineWidth);                                }                            }                            break;                    }        #endregion        if (FunctionList.Count <= 0) return;        var unitPixel = 100 / funcBase.axisScale;        foreach(var formula in FunctionList)        {            var startPoint= formula.GetResult(-size.x/2, funcBase.axisScale);            for(var i=-size.x/2+1;i<size.x/2;i+= unitPixel)            {                var endPoint=formula.GetResult(i, funcBase.axisScale);                vh.AddUIVertexQuad(GetQuad(startPoint,endPoint,formula.color,formula.LineWidth));                startPoint = endPoint;            }                   }    }    private UIVertex[] GetQuad(Vector2 startPos, Vector2 endPos, Color color0, float lineWidth = 2)    {        var dis = Vector2.Distance(startPos, endPos);        float x = lineWidth * 0.5f * (endPos.y - startPos.y) / dis;        float y = lineWidth * 0.5f * (endPos.x - startPos.x) / dis;        if (x <= 0) x = -x;        else y = -y;        UIVertex[] vertexs = new UIVertex[4];        vertexs[0].position = new Vector2(startPos.x + x, startPos.y + y);        vertexs[1].position = new Vector2(endPos.x + x, endPos.y + y);        vertexs[2].position = new Vector2(endPos.x - x, endPos.y - y);        vertexs[3].position = new Vector2(startPos.x - x, startPos.y - y);        for (int i = 0; i < vertexs.Length; i++)        {            vertexs[i].color = color0;        }        return vertexs;    }    private UIVertex[] GetQuad(Vector2 first, Vector2 second, Vector2 third, Vector2 four, Color color0)    {        UIVertex[] vertexs = new UIVertex[]        {            new UIVertex { position=first,color=color0,uv0=Vector2.zero},            new UIVertex { position=second,color=color0,uv0=Vector2.zero},            new UIVertex { position=third,color=color0,uv0=Vector2.zero},            new UIVertex { position=four,color=color0,uv0=Vector2.zero}        };        return vertexs;    }    private void GetImageLinaryLine(ref VertexHelper vh,Vector2 startPos,Vector2 endPos,Color color0,float LineLength,float SpaceLength,float lineWidth=1.5f)    {        if(startPos.x.Equals(endPos.x))        {                        var secondPoint =startPos+ new Vector2(0,LineLength);            while(secondPoint.y<endPos.y)            {                vh.AddUIVertexQuad(GetQuad(startPos, secondPoint, color0, lineWidth));                startPos = secondPoint + new Vector2(0, SpaceLength);                secondPoint = startPos + new Vector2(0, LineLength);                if(secondPoint.y>endPos.y)                {                    secondPoint = new Vector2(startPos.x,endPos.y);                    vh.AddUIVertexQuad(GetQuad(startPos, secondPoint, color0, lineWidth));                }            }        }        if(startPos.y.Equals(endPos.y))        {            var secondPoint = startPos + new Vector2(LineLength,0);            while(secondPoint.x<endPos.x)            {                vh.AddUIVertexQuad(GetQuad(startPos,secondPoint,color0, lineWidth));                startPos = secondPoint + new Vector2(SpaceLength,0);                secondPoint = startPos + new Vector2(LineLength,0);                if(secondPoint.x>endPos.x)                {                    secondPoint = new Vector2(startPos.x,endPos.y);                    vh.AddUIVertexQuad(GetQuad(startPos,secondPoint,color0, lineWidth));                }            }        }    }}

效果图：

阅读全文

0 0