Unity切圆角矩形

本文介绍了一个 Unity Shader 示例,用于实现带有圆角效果的 UI 元素。该 Shader 通过设置不同的属性来控制圆角大小,并使用了 Unity 的 UI 渲染管线。文章详细展示了如何在 Shader 中进行条件判断以实现圆角效果。

转载地址:http://www.manew.com/blog-48527-3473.html

 

Shader "Custom/yuanjiao" {
	Properties
	{
		[PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}
	_Color("Tint", Color) = (1,1,1,1)

		_StencilComp("Stencil Comparison", Float) = 8
		_Stencil("Stencil ID", Float) = 0
		_StencilOp("Stencil Operation", Float) = 0
		_StencilWriteMask("Stencil Write Mask", Float) = 255
		_StencilReadMask("Stencil Read Mask", Float) = 255

		_ColorMask("Color Mask", Float) = 15

		[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip("Use Alpha Clip", Float) = 0

		_RoundedRadius("Rounded Radius", Range(0, 256)) = 64
	}

		SubShader
	{
		Tags
	{
		"Queue" = "Transparent"
		"IgnoreProjector" = "True"
		"RenderType" = "Transparent"
		"PreviewType" = "Plane"
		"CanUseSpriteAtlas" = "True"
	}

		Stencil
	{
		Ref[_Stencil]
		Comp[_StencilComp]
		Pass[_StencilOp]
		ReadMask[_StencilReadMask]
		WriteMask[_StencilWriteMask]
	}

		Cull Off
		Lighting Off
		ZWrite Off
		ZTest[unity_GUIZTestMode]
		Blend SrcAlpha OneMinusSrcAlpha
		ColorMask[_ColorMask]

		Pass
	{
		CGPROGRAM
#pragma vertex vert
#pragma fragment frag

#include "UnityCG.cginc"
#include "UnityUI.cginc"

#pragma multi_compile __ UNITY_UI_ALPHACLIP

		struct appdata_t
	{
		float4 vertex   :
		POSITION;
		float4 color    :
		COLOR;
		float2 texcoord :
		TEXCOORD0;
	};

	struct v2f
	{
		float4 vertex   :
		SV_POSITION;
		fixed4 color :
		COLOR;
		half2 texcoord  :
		TEXCOORD0;
		float4 worldPosition :
		TEXCOORD1;
	};

	fixed4 _Color;
	fixed4 _TextureSampleAdd;
	float4 _ClipRect;

	float _RoundedRadius;

	float4 _MainTex_TexelSize;

	v2f vert(appdata_t IN)
	{
		v2f OUT;
		OUT.worldPosition = IN.vertex;
		OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);

		OUT.texcoord = IN.texcoord;

#ifdef UNITY_HALF_TEXEL_OFFSET
		OUT.vertex.xy += (_ScreenParams.zw - 1.0)*float2(-1,1);
#endif

		OUT.color = IN.color * _Color;
		return OUT;
	}

	sampler2D _MainTex;

	fixed4 frag(v2f IN) : SV_Target
	{
		half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;

		color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);

#ifdef UNITY_UI_ALPHACLIP
		clip(color.a - 0.001);
#endif

		float width = _MainTex_TexelSize.z;
		float height = _MainTex_TexelSize.w;

		float x = IN.texcoord.x * width;
		float y = IN.texcoord.y * height;

		float r = _RoundedRadius;

		//左下角
		if (x < r && y < r)
		{
			if ((x - r) * (x - r) + (y - r) * (y - r) > r * r)
				color.a = 0;
		}

		//左上角
		if (x < r && y >(height - r))
		{
			if ((x - r) * (x - r) + (y - (height - r)) * (y - (height - r)) > r * r)
				color.a = 0;
		}

		//右下角
		if (x > (width - r) && y < r)
		{
			if ((x - (width - r)) * (x - (width - r)) + (y - r) * (y - r) > r * r)
				color.a = 0;
		}

		//右上角
		if (x > (width - r) && y > (height - r))
		{
			if ((x - (width - r)) * (x - (width - r)) + (y - (height - r)) * (y - (height - r)) > r * r)
				color.a = 0;
		}

		return color;
	}
		ENDCG
	}
	}
}

 

### 如何在 Unity 编辑器中实现圆角矩形 UI 组件 为了在 Unity 中创建带有圆角的矩形 UI 组件,可以利用 `Image` 组件并调整其属性。具体来说,通过设置 `Sprite` 的类型为 `Sliced` 或者 `Tiled` 并应用具有圆角效果的纹理资源。 #### 使用内置方法制作圆角矩形 如果希望快速获得一个简单的圆角矩形而不必自定义绘制逻辑,则可以直接使用 Unity 提供的功能: 1. 创建一个新的 Image 组件作为目标对象; 2. 将此图像组件的 Sprite 属性设为九宫格片模式下的图片素材(该素材本身应具备圆角特征),这使得即使改变大小也能保持四角不变形[^1]; 对于更复杂的场景下需要程序化生成平滑曲线的情况,还可以考虑编写脚本来动态构建路径点进而渲染线条形成近似圆形转角的效果。不过通常情况下推荐优先尝试上述简便途径。 ```csharp using UnityEngine; using UnityEngine.UI; public class RoundedRectangle : MonoBehaviour { public float cornerRadius = 10f; // 圆角度数 private RectTransform rectTransform; void Awake(){ rectTransform = GetComponent<RectTransform>(); var image = gameObject.GetComponent<Image>(); if (image != null){ image.type = Image.Type.Sliced; // 设置为 Sliced 类型以便支持拉伸同时保留边角样式 // 加载预处理过的含圆角的基础图形作为 sprite 资源 image.sprite = Resources.Load<Sprite>("Path/To/RoundedCornerBase"); UpdateCorners(); } } /// <summary> /// 更新四个角落半径参数 /// </summary> void UpdateCorners(){ Vector2 sizeDelta = rectTransform.sizeDelta; foreach(RectTransform child in transform){ switch(child.name.ToLower()){ case "top-left": child.anchorMin = new Vector2(0,1); child.anchorMax = new Vector2(cornerRadius / sizeDelta.x , 1 - cornerRadius / sizeDelta.y ); break; case "bottom-right": child.anchorMin = new Vector2(1 - cornerRadius / sizeDelta.x ,cornerRadius / sizeDelta.y ); child.anchorMax = new Vector2(1,0); break; default: Debug.LogWarning($"未识别到名为{child.name}的孩子节点."); continue; } } } } ``` 需要注意的是,在实际项目里应当根据需求选择合适的方式去达成目的,并且考虑到性能因素合理规划资源加载方式与实例化策略。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值