制作圆形Image

思路

  1. 绘制圆 ,使用多个三角形组合在一起近似一个圆
  2. 单位圆上的点使用(Cosx,Sinx)表示
  3. sprite的uv映射到单位圆上

点到UV的映射规律

Sprite的外部uv 为 (x y z w ) 原点为 (x,y) 宽度为z-x 高度为w-y

单位圆上的点为(CosA,SinA)

uv坐标 = (x,y) + (CosA*(z-x)/2+(z-x)/2 ,SinA*(w-y)/2+(w-y)/2);

例如 圆上的点为(1,0) uv为(0,0.1,1)

对应的uv为 (0,0) + (1*(1-0)/2+(1-0)/2 ,0*(1-0)/2+(1-0)/2)=(1,0.5)

代码示例

csharp 复制代码
using UnityEngine;
using UnityEngine.Sprites;
using UnityEngine.UI;
public class ImageCircle : Image
{
    protected override void OnPopulateMesh(VertexHelper toFill)
    {
        toFill.Clear();//清除顶点

        Vector4 SpriteUV = overrideSprite != null ? DataUtility.GetOuterUV(overrideSprite) : Vector4.zero;
        Vector2 UVSize = new Vector2(SpriteUV.z - SpriteUV.x, SpriteUV.w - SpriteUV.y);//获取精灵uv 宽高
        Vector2 UVOrigion = new Vector2(SpriteUV.x, SpriteUV.y);//uv原点
        Vector2 UVHalfSize = UVSize / 2;
        Vector2 CenterUV = UVOrigion + UVHalfSize;

        Vector2 roundPoint = rectTransform.rect.center;//圆心
        toFill.AddVert(roundPoint, color, CenterUV);

        float width = rectTransform.rect.width;//image 矩形框的宽度
        float height = rectTransform.rect.height;
        float radius = width > height ? height / 2 : width / 2;//半径 取较小值

        int triangleCount = 100;//组成圆的三角形数量
        float singleAngle = 2 * Mathf.PI / triangleCount;//单个三角形顶点角度

        Vector2 pointInCircle;
        Vector2 pointToUV;
        float currentAngle;

        for (int i = 0; i < triangleCount + 1; i++)//获取圆上的点 圆上的点比三角形数量多1
        {
            currentAngle = i * singleAngle;//当前角度

            pointInCircle = new Vector2(Mathf.Cos(currentAngle), Mathf.Sin(currentAngle));//单位圆上的点

            pointToUV = UVOrigion +
                new Vector2(pointInCircle.x * UVHalfSize.x + UVHalfSize.x,
                pointInCircle.y * UVHalfSize.y + UVHalfSize.y);//点对应的uv

            toFill.AddVert(roundPoint + pointInCircle * radius, color, pointToUV);
        }

        for (int i = 0; i < triangleCount; i++)//绘制三角形
        {
            toFill.AddTriangle(i + 1, 0, i + 2);
        }
    }
}

参考

Unity用OnPopulateMesh绘制自定义圆形遮罩超详解

相关推荐
程序猿多布6 小时前
预定义委托(C# and Unity)
unity·c#
Edision_li16 小时前
DeepSeek教unity------Dotween
unity·游戏引擎
zfoo-framework17 小时前
Unity中NavMesh的使用 及其 导出给java服务端进行寻路
unity
程序猿多布17 小时前
数学函数(C#、Lua 、Unity)
unity·c#·lua
浅陌sss2 天前
Unity中可靠的UDP实现
unity
奔跑的犀牛先生2 天前
unity学习46:反向动力学IK
unity
幻世界2 天前
【工具插件类教学】实现运行时2D物体交互的利器Runtime2DTransformInteractor
unity·交互·运行时2d物体交互
音视频牛哥3 天前
Unity实现高性能多实例RTSP|RTMP播放器技术实践
unity·游戏引擎·音视频·实时音视频·大牛直播sdk·rtsp播放器·rtsp player
Artistation Game3 天前
三、Unity基础(主要框架)
游戏·unity·c#·游戏引擎
Edision_li3 天前
DeepSeek教unity------MessagePack-03
unity·messagepack