制作圆形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绘制自定义圆形遮罩超详解

相关推荐
浅陌sss13 小时前
Unity中可靠的UDP实现
unity
奔跑的犀牛先生18 小时前
unity学习46:反向动力学IK
unity
幻世界21 小时前
【工具插件类教学】实现运行时2D物体交互的利器Runtime2DTransformInteractor
unity·交互·运行时2d物体交互
音视频牛哥2 天前
Unity实现高性能多实例RTSP|RTMP播放器技术实践
unity·游戏引擎·音视频·实时音视频·大牛直播sdk·rtsp播放器·rtsp player
Artistation Game2 天前
三、Unity基础(主要框架)
游戏·unity·c#·游戏引擎
Edision_li2 天前
DeepSeek教unity------MessagePack-03
unity·messagepack
lalapanda2 天前
Unity学习part2
学习·unity·游戏引擎
CODE_RabbitV2 天前
【快速入门】Unity 常用组件(功能块)
unity·游戏引擎
BuHuaX2 天前
Unity-New Input System
unity·c#·游戏引擎·游戏程序·lucene
Edision_li3 天前
DeepSeek教unity------UI框架
学习·ui·unity·c#