LiRuochen_WorkFlow/UIGraphRenderer
Archived
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

改进ui多边形渲染组件功能。

Browse Source 
改进渲染器基类流程。
改进多边形shader逻辑。
This commit is contained in:
lrss3
2026-03-30 09:27:19 +08:00
parent c4dfa3301e
commit 903a7938b3
21 changed files with 1421 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Runtime/Material.meta
+3
View File
@@ -0,0 +1,3 @@
fileFormatVersion: 2
guid: 8809f4d705e747558add71820c73b3a6
timeCreated: 1774340409
Runtime/UILineRender.mat → Runtime/Material/UILineRender.mat
View File
Runtime/UILineRender.mat.meta → Runtime/Material/UILineRender.mat.meta
View File
Runtime/UILineRender.shader → Runtime/Material/UILineRender.shader
+8 -8
View File
@@ -1,6 +1,6 @@
// Made with Amplify Shader Editor v1.9.9.1
// Made with Amplify Shader Editor v1.9.9.8
// Available at the Unity Asset Store - http://u3d.as/y3X
Shader "UILineRender"
Shader "XericLibrary/UILine/UILineRender"
{
Properties
{
@@ -48,7 +48,7 @@ Shader "UILineRender"
{
Name "Default"
CGPROGRAM
#define ASE_VERSION 19901
#define ASE_VERSION 19908
#pragma vertex vert
#pragma fragment frag
@@ -156,11 +156,11 @@ Shader "UILineRender"
Fallback Off
}
/*ASEBEGIN
Version=19901
Node;AmplifyShaderEditor.TextureCoordinatesNode, AmplifyShaderEditor, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null;1;-432.087,-103.4147;Inherit;False;0;-1;2;3;2;SAMPLER2D;;False;0;FLOAT2;1,1;False;1;FLOAT2;0,0;False;5;FLOAT2;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4
Node;AmplifyShaderEditor.DynamicAppendNode, AmplifyShaderEditor, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null;3;-192,-112;Inherit;False;FLOAT4;4;0;FLOAT2;0,0;False;1;FLOAT;0;False;2;FLOAT;0;False;3;FLOAT;1;False;1;FLOAT4;0
Node;AmplifyShaderEditor.TemplateMultiPassMasterNode, AmplifyShaderEditor, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null;0;0,0;Float;False;True;-1;3;AmplifyShaderEditor.MaterialInspector;0;3;UILineRender;5056123faa0c79b47ab6ad7e8bf059a4;True;Default;0;0;Default;2;False;True;3;1;False;;10;False;;0;1;False;;0;False;;False;False;False;False;False;False;False;False;False;False;False;False;True;2;False;;False;True;True;True;True;True;0;True;_ColorMask;False;False;False;False;False;False;False;True;True;0;True;_Stencil;255;True;_StencilReadMask;255;True;_StencilWriteMask;0;True;_StencilComp;0;True;_StencilOp;0;False;;0;False;;0;False;;0;False;;0;False;;0;False;;False;True;2;False;;True;0;True;unity_GUIZTestMode;False;True;5;Queue=Transparent=Queue=0;IgnoreProjector=True;RenderType=Transparent=RenderType;PreviewType=Plane;CanUseSpriteAtlas=True;False;False;0;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;True;3;False;0;;0;0;Standard;0;0;1;True;False;;False;0
Version=19908
Node;AmplifyShaderEditor.TextureCoordinatesNode, AmplifyShaderEditor, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null;1;-640,-128;Inherit;False;0;-1;2;3;2;SAMPLER2D;;False;0;FLOAT2;1,1;False;1;FLOAT2;0,0;False;5;FLOAT2;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4
Node;AmplifyShaderEditor.DynamicAppendNode, AmplifyShaderEditor, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null;3;-384,-128;Inherit;False;FLOAT4;4;0;FLOAT2;0,0;False;1;FLOAT;0;False;2;FLOAT;0;False;3;FLOAT;1;False;1;FLOAT4;0
Node;AmplifyShaderEditor.TemplateMultiPassMasterNode, AmplifyShaderEditor, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null;0;-128,-128;Float;False;True;-1;3;AmplifyShaderEditor.MaterialInspector;0;12;XericLibrary/UILine/UILineRender;5056123faa0c79b47ab6ad7e8bf059a4;True;Default;0;0;Default;2;False;True;3;1;False;;10;False;;0;1;False;;0;False;;False;False;False;False;False;False;False;False;False;False;False;False;True;2;False;;False;True;True;True;True;True;0;True;_ColorMask;False;False;False;False;False;False;False;True;True;0;True;_Stencil;255;True;_StencilReadMask;255;True;_StencilWriteMask;0;True;_StencilComp;0;True;_StencilOp;0;False;;0;False;;0;False;;0;False;;0;False;;0;False;;False;True;2;False;;True;0;True;unity_GUIZTestMode;False;False;True;5;Queue=Transparent=Queue=0;IgnoreProjector=True;RenderType=Transparent=RenderType;PreviewType=Plane;CanUseSpriteAtlas=True;False;False;0;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;True;3;False;0;;0;0;Standard;0;0;1;True;False;;False;0
WireConnection;3;0;1;0
WireConnection;0;0;3;0
ASEEND*/
//CHKSM=7125D87DAE9E1D51798A36D24871C6DA03114C88
//CHKSM=DE8DD19A3E7EFA6148EC2C70DC047F03DC773C59
Runtime/UILineRender.shader.meta → Runtime/Material/UILineRender.shader.meta
View File
Runtime/Material/UIPattern.mat
+43
View File
@@ -0,0 +1,43 @@
%YAML 1.1
%TAG !u! tag:unity3d.com,2011:
--- !u!21 &2100000
Material:
serializedVersion: 8
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
m_Name: UIPattern
m_Shader: {fileID: 4800000, guid: 93c66aea56a128b49926a44aca851008, type: 3}
m_Parent: {fileID: 0}
m_ModifiedSerializedProperties: 0
m_ValidKeywords: []
m_InvalidKeywords: []
m_LightmapFlags: 4
m_EnableInstancingVariants: 0
m_DoubleSidedGI: 0
m_CustomRenderQueue: -1
stringTagMap: {}
disabledShaderPasses: []
m_LockedProperties:
m_SavedProperties:
serializedVersion: 3
m_TexEnvs:
- _MainTex:
m_Texture: {fileID: 0}
m_Scale: {x: 1, y: 1}
m_Offset: {x: 0, y: 0}
m_Ints: []
m_Floats:
- _ColorMask: 15
- _Fill: -0.51
- _Stencil: 0
- _StencilComp: 8
- _StencilOp: 0
- _StencilReadMask: 255
- _StencilWriteMask: 255
- _Thinkness: 0.13
- _UseUIAlphaClip: 0
m_Colors:
- _Color: {r: 1, g: 1, b: 1, a: 1}
m_BuildTextureStacks: []
Runtime/Material/UIPattern.mat.meta
+8
View File
@@ -0,0 +1,8 @@
fileFormatVersion: 2
guid: e8d311832d5ece64193b5735e219f3aa
NativeFormatImporter:
externalObjects: {}
mainObjectFileID: 2100000
userData:
assetBundleName:
assetBundleVariant:
Runtime/Material/UIPattern.shader
+198
View File
@@ -0,0 +1,198 @@
// Made with Amplify Shader Editor v1.9.9.8
// Available at the Unity Asset Store - http://u3d.as/y3X
Shader "XericLibrary/UILine/UIPattern"
{
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
_Thinkness( "Thinkness", Range( 0, 1 ) ) = 0.1
_BorderColor( "Border Color", Color ) = ( 1, 1, 1, 1 )
_FillColor( "Fill Color", Color ) = ( 0.6698113, 0.6698113, 0.6698113, 0.7803922 )
}
SubShader
{
LOD 0
Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" "PreviewType"="Plane" "CanUseSpriteAtlas"="True" }
Stencil
{
Ref [_Stencil]
ReadMask [_StencilReadMask]
WriteMask [_StencilWriteMask]
Comp [_StencilComp]
Pass [_StencilOp]
}
Cull Off
Lighting Off
ZWrite Off
ZTest [unity_GUIZTestMode]
Blend One OneMinusSrcAlpha
ColorMask [_ColorMask]
Pass
{
Name "Default"
CGPROGRAM
#define ASE_VERSION 19908
#pragma vertex vert
#pragma fragment frag
#pragma target 3.5
#include "UnityCG.cginc"
#include "UnityUI.cginc"
#pragma multi_compile_local _ UNITY_UI_CLIP_RECT
#pragma multi_compile_local _ UNITY_UI_ALPHACLIP
#define ASE_NEEDS_TEXTURE_COORDINATES2
struct appdata_t
{
float4 vertex : POSITION;
float4 color : COLOR;
float2 texcoord : TEXCOORD0;
UNITY_VERTEX_INPUT_INSTANCE_ID
float4 ase_texcoord2 : TEXCOORD2;
};
struct v2f
{
float4 vertex : SV_POSITION;
fixed4 color : COLOR;
float2 texcoord : TEXCOORD0;
float4 worldPosition : TEXCOORD1;
float4 mask : TEXCOORD2;
UNITY_VERTEX_OUTPUT_STEREO
float4 ase_texcoord3 : TEXCOORD3;
};
sampler2D _MainTex;
fixed4 _Color;
fixed4 _TextureSampleAdd;
float4 _ClipRect;
float4 _MainTex_ST;
float _UIMaskSoftnessX;
float _UIMaskSoftnessY;
uniform float4 _FillColor;
uniform float4 _BorderColor;
uniform float _Thinkness;
v2f vert(appdata_t v )
{
v2f OUT;
UNITY_SETUP_INSTANCE_ID(v);
UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
OUT.ase_texcoord3 = v.ase_texcoord2;
v.vertex.xyz += float3( 0, 0, 0 ) ;
float4 vPosition = UnityObjectToClipPos(v.vertex);
OUT.worldPosition = v.vertex;
OUT.vertex = vPosition;
float2 pixelSize = vPosition.w;
pixelSize /= float2(1, 1) * abs(mul((float2x2)UNITY_MATRIX_P, _ScreenParams.xy));
float4 clampedRect = clamp(_ClipRect, -2e10, 2e10);
float2 maskUV = (v.vertex.xy - clampedRect.xy) / (clampedRect.zw - clampedRect.xy);
OUT.texcoord = v.texcoord;
OUT.mask = float4(v.vertex.xy * 2 - clampedRect.xy - clampedRect.zw, 0.25 / (0.25 * half2(_UIMaskSoftnessX, _UIMaskSoftnessY) + abs(pixelSize.xy)));
OUT.color = v.color * _Color;
return OUT;
}
fixed4 frag(v2f IN ) : SV_Target
{
//Round up the alpha color coming from the interpolator (to 1.0/256.0 steps)
//The incoming alpha could have numerical instability, which makes it very sensible to
//HDR color transparency blend, when it blends with the world's texture.
const half alphaPrecision = half(0xff);
const half invAlphaPrecision = half(1.0/alphaPrecision);
IN.color.a = round(IN.color.a * alphaPrecision)*invAlphaPrecision;
float4 texCoord4 = IN.ase_texcoord3;
texCoord4.xy = IN.ase_texcoord3.xy * float2( 1,1 ) + float2( 0,0 );
float temp_output_18_0 = saturate( ( ( ( _Thinkness - ( 1.0 - texCoord4.z ) ) / _Thinkness ) * 100.0 ) );
float4 lerpResult19 = lerp( _FillColor , _BorderColor , temp_output_18_0);
half4 color = lerpResult19;
#ifdef UNITY_UI_CLIP_RECT
half2 m = saturate((_ClipRect.zw - _ClipRect.xy - abs(IN.mask.xy)) * IN.mask.zw);
color.a *= m.x * m.y;
#endif
#ifdef UNITY_UI_ALPHACLIP
clip (color.a - 0.001);
#endif
color.rgb *= color.a;
return color;
}
ENDCG
}
}
CustomEditor "AmplifyShaderEditor.MaterialInspector"
Fallback Off
}
/*ASEBEGIN
Version=19908
Node;AmplifyShaderEditor.TextureCoordinatesNode, AmplifyShaderEditor, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null;4;-640,-384;Inherit;False;2;-1;4;3;2;SAMPLER2D;;False;0;FLOAT2;1,1;False;1;FLOAT2;0,0;False;5;FLOAT4;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4
Node;AmplifyShaderEditor.RangedFloatNode, AmplifyShaderEditor, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null;2;-288,-176;Inherit;False;Property;_Thinkness;Thinkness;0;0;Create;True;0;0;0;False;0;False;0.1;0;0;1;0;1;FLOAT;0
Node;AmplifyShaderEditor.OneMinusNode, AmplifyShaderEditor, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null;13;-256,-368;Inherit;False;1;0;FLOAT;0;False;1;FLOAT;0
Node;AmplifyShaderEditor.SimpleSubtractOpNode, AmplifyShaderEditor, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null;14;-96,-384;Inherit;False;2;0;FLOAT;0;False;1;FLOAT;0;False;1;FLOAT;0
Node;AmplifyShaderEditor.SimpleDivideOpNode, AmplifyShaderEditor, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null;15;113.2046,-377.9782;Inherit;False;2;0;FLOAT;0;False;1;FLOAT;0;False;1;FLOAT;0
Node;AmplifyShaderEditor.RangedFloatNode, AmplifyShaderEditor, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null;17;256,-240;Inherit;False;Constant;_Float0;Float 0;2;0;Create;True;0;0;0;False;0;False;100;0;0;0;0;1;FLOAT;0
Node;AmplifyShaderEditor.SimpleMultiplyOpNode, AmplifyShaderEditor, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null;16;256,-384;Inherit;False;2;2;0;FLOAT;0;False;1;FLOAT;0;False;1;FLOAT;0
Node;AmplifyShaderEditor.SaturateNode, AmplifyShaderEditor, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null;18;416,-384;Inherit;False;1;0;FLOAT;0;False;1;FLOAT;0
Node;AmplifyShaderEditor.ColorNode, AmplifyShaderEditor, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null;21;480,-592;Inherit;False;Property;_FillColor;Fill Color;2;0;Create;True;0;0;0;False;0;False;0.6698113,0.6698113,0.6698113,0.7803922;0,0,0,0;True;True;0;6;COLOR;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4;FLOAT3;5
Node;AmplifyShaderEditor.ColorNode, AmplifyShaderEditor, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null;20;480,-96;Inherit;False;Property;_BorderColor;Border Color;1;0;Create;True;0;0;0;False;0;False;1,1,1,1;1,1,1,1;True;True;0;6;COLOR;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4;FLOAT3;5
Node;AmplifyShaderEditor.LerpOp, AmplifyShaderEditor, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null;19;784,-384;Inherit;False;3;0;COLOR;0,0,0,0;False;1;COLOR;0,0,0,0;False;2;FLOAT;0;False;1;COLOR;0
Node;AmplifyShaderEditor.DynamicAppendNode, AmplifyShaderEditor, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null;6;864,-160;Inherit;False;FLOAT4;4;0;FLOAT;0;False;1;FLOAT;0;False;2;FLOAT;0;False;3;FLOAT;1;False;1;FLOAT4;0
Node;AmplifyShaderEditor.DynamicAppendNode, AmplifyShaderEditor, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null;22;176,-592;Inherit;False;FLOAT4;4;0;FLOAT;0;False;1;FLOAT;0;False;2;FLOAT;0;False;3;FLOAT;1;False;1;FLOAT4;0
Node;AmplifyShaderEditor.TemplateMultiPassMasterNode, AmplifyShaderEditor, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null;0;1008,-368;Float;False;True;-1;3;AmplifyShaderEditor.MaterialInspector;0;12;XericLibrary/UILine/UIPattern;5056123faa0c79b47ab6ad7e8bf059a4;True;Default;0;0;Default;2;False;True;3;1;False;;10;False;;0;1;False;;0;False;;False;False;False;False;False;False;False;False;False;False;False;False;True;2;False;;False;True;True;True;True;True;0;True;_ColorMask;False;False;False;False;False;False;False;True;True;0;True;_Stencil;255;True;_StencilReadMask;255;True;_StencilWriteMask;0;True;_StencilComp;0;True;_StencilOp;0;False;;0;False;;0;False;;0;False;;0;False;;0;False;;False;True;2;False;;True;0;True;unity_GUIZTestMode;False;False;True;5;Queue=Transparent=Queue=0;IgnoreProjector=True;RenderType=Transparent=RenderType;PreviewType=Plane;CanUseSpriteAtlas=True;False;False;0;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;True;3;False;0;;0;0;Standard;0;0;1;True;False;;False;0
WireConnection;13;0;4;3
WireConnection;14;0;2;0
WireConnection;14;1;13;0
WireConnection;15;0;14;0
WireConnection;15;1;2;0
WireConnection;16;0;15;0
WireConnection;16;1;17;0
WireConnection;18;0;16;0
WireConnection;19;0;21;0
WireConnection;19;1;20;0
WireConnection;19;2;18;0
WireConnection;6;0;18;0
WireConnection;22;0;4;1
WireConnection;22;1;4;2
WireConnection;22;2;4;3
WireConnection;0;0;19;0
ASEEND*/
//CHKSM=0563E16505FEE01A149F7DEE4B80FAB154BB7859
Runtime/Material/UIPattern.shader.meta
+9
View File
@@ -0,0 +1,9 @@
fileFormatVersion: 2
guid: 93c66aea56a128b49926a44aca851008
ShaderImporter:
externalObjects: {}
defaultTextures: []
nonModifiableTextures: []
userData:
assetBundleName:
assetBundleVariant:
Runtime/Renderer.meta
+3
View File
@@ -0,0 +1,3 @@
fileFormatVersion: 2
guid: 390deb51dbe74b08a56ca5ab71691ad5
timeCreated: 1774340386
Runtime/Renderer/UILineRenderer.cs
+140
View File
@@ -0,0 +1,140 @@
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Serialization;
using UnityEngine.UI;
namespace XericLibrary
{
/// <summary>
/// UI上线条绘制组件
/// 支持设置线条厚度、居中显示，并为线段之间添加斜角边缘
/// 继承自 MaskableGraphic，可与 UI 遮罩系统配合使用
/// </summary>
public class UILineRenderer : XericRendererComponent
{
#region 字段属性
/// <summary>
/// 线条的顶点数组，至少需要 2 个点才能绘制线条
/// 点的坐标基于本地空间，中心点由 center 属性控制
/// </summary>
public List<Vector2> points = new List<Vector2>();
private Vector2[] _points;
public float thickness = 10f;
public bool center = true;
public bool cycleLoop = false;
/// <summary>
/// 是否启用倒角功能
/// </summary>
public bool useChamfer = false;
/// <summary>
/// 倒角细分数量，控制圆弧的平滑度
/// </summary>
public int chamferSegments = 4;
/// <summary>
/// 内圆弧半径，当大于0时启用内圆弧
/// </summary>
public float innerRadius = 0f;
#endregion
/// <summary>
/// 添加顶点
/// </summary>
/// <param name="point"></param>
/// <param name="mergingRadius">合并弧度，指定一个弧度，在添加顶点时，自动合并之前的顶点为直线</param>
public void AddPoint(Vector2 point, float mergingRadius = -1)
{
if (mergingRadius > 0 && points.Count >= 2)
{
var a = points[^1];
var b = Vector3.Dot((a - points[^2]).normalized, (a - point).normalized);
if (b < mergingRadius)
points[^1] = point;
return;
}
points.Add(point);
Refresh();
}
public void RemovePoint(int index)
{
points.RemoveAt(index);
Refresh();
}
public void CleanPoint(Vector2 point)
{
points.Clear();
Refresh();
}
/// <summary>
/// 生成线条网格
/// </summary>
/// <param name="vh">用于构建网格的 VertexHelper 对象</param>
protected override void OnPopulateMesh(VertexHelper vh)
{
// 清空现有的网格数据
vh.Clear();
var offset = XericRendererUtils.SwitchCenterOffset(center, rectTransform.sizeDelta);
_points = points.ToArray();
if (useChamfer)
{
vh.PopulateLineByPointsArray_CFAL(_points, thickness, cycleLoop, color, offset, chamferSegments, innerRadius);
}
else
{
vh.PopulateLineByPointsArray_DSL5(_points, thickness, cycleLoop, color, offset);
}
return;
// 至少需要 2 个点才能绘制线条
if (_points.Length < 2)
return;
// 计算线路总长度
float totalLength = _points.CalculateTotalLength();
float currentLength = 0f;
// 遍历所有点，创建线段并添加到网格中
for (int i = 0; i < _points.Length-1; i++)
{
// 使用静态工具方法创建当前点与下一个点之间的线段
// 传递当前累积长度和总长度用于UV坐标计算
vh.CreateLineSegment_CFAL(_points[i], _points[i+1],
i > 0 ? Mathf.Acos(Vector2.Dot((_points[i] - _points[i -1]).normalized, (_points[i + 1] - _points[i]).normalized)) * Mathf.Rad2Deg : 0,
i < _points.Length-2 ? Mathf.Acos(Vector2.Dot((_points[i] - _points[i + 1]).normalized, (_points[i + 1] - _points[i +2]).normalized)) * Mathf.Rad2Deg : 0,
thickness, center, rectTransform.sizeDelta, color, currentLength, totalLength);
// 更新累积长度
currentLength += Vector2.Distance(_points[i], _points[i+1]);
// 计算当前线段的顶点索引（每个线段包含 5 个顶点）
int index = i * 5;
// 添加线段的两个三角形（构成矩形线段）
vh.AddTriangle(index, index+1, index+3);
vh.AddTriangle(index+3, index+2, index);
// 为线段之间添加斜角边缘
// 使用上一个线段的终点和当前线段的起点创建过渡三角形
if (i != 0)
{
vh.AddTriangle(index, index-1, index-3);
vh.AddTriangle(index+1, index-1, index-2);
}
}
}
}
}
Runtime/UILineRenderer.cs.meta → Runtime/Renderer/UILineRenderer.cs.meta
View File
Runtime/Renderer/UIPatternRenderer.cs
+296
View File
@@ -0,0 +1,296 @@
using System;
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using UnityEngine.Pool;
using UnityEngine.Serialization;
using UnityEngine.UI;
using XericLibrary.Runtime.Debuger;
using XericLibrary.Runtime.MacroLibrary;
#if ODIN_INSPECTOR
using Sirenix.OdinInspector;
#endif
namespace XericLibrary
{
/// <summary>
/// UI多边形图形图案渲染组件（三角形，菱形，五边形...三十二边形）
/// 支持倒角
/// </summary>
public class UIPatternRenderer : XericRendererComponent
{
public override string ShaderName => "XericLibrary/UILine/UIPattern";
[Header("多边形设置"), Range(3, 32)] public int sides = 6;
[SerializeField, Tooltip("多边形的大小 (相对于矩形区域的比例 0-1)")]
#if ODIN_INSPECTOR
[ProgressBar("Scalemin", "GetMaxScale")]
#else
[Range(0f, 1f)]
#endif
private float scale = 1f;
[Tooltip("倒角尺寸")][Range(0f, 1f)] public float roundingSize = 0;
[Tooltip("倒角细分")][Range(2f, 32f)] public int roundingTime = 3;
[Tooltip("倒角形状")][Range(0f, 1f)] public float roundingPower = 1;
public AngleSelectMode angleMode;
[ShowIf("angleMode", optionalValue: AngleSelectMode.Angle)]
[Tooltip("起始角度")] public float startAngle = 90f;
[ShowIf("angleMode", optionalValue: AngleSelectMode.Multiples)]
[Tooltip("起始角度(倍数对齐)")] public float startAngleTime = 1;
[SerializeField, Tooltip("边框厚度")] [Range(0f, 1f)]
private float borderThickness = .1f;
[SerializeField, Tooltip("边框颜色")] private Color borderColor = Color.white;
[SerializeField, Tooltip("填充颜色")] private Color fillColor = Color.gray;
/// <summary>
/// 获取最大缩放（一个参考值）
/// </summary>
public float GetMaxScale => 1 / Mathf.Cos(GetSideRadius);
private float Scalemin => 0.01f;
/// <summary>
/// 获取多边形的旋转弧度
/// </summary>
public float GetSideRadius => Mathf.PI / sides;
private float sideAngle =>
angleMode switch
{
AngleSelectMode.Angle => startAngle,
AngleSelectMode.Multiples => Mathf.Rad2Deg * 2 * GetSideRadius * (startAngleTime - (sides % 2 == 0 ? 0 : 0.25f)),
_ => 1f
};
private static readonly int BorderColor1 = Shader.PropertyToID("_BorderColor");
private static readonly int FillColor1 = Shader.PropertyToID("_FillColor");
private static readonly int Thinkness = Shader.PropertyToID("_Thinkness");
/// <summary>
/// 边框厚度
/// </summary>
public float BorderThickness
{
get => borderThickness;
set
{
borderThickness = value;
m_Material.SetFloat(Thinkness, borderThickness);
}
}
/// <summary>
/// 边框颜色
/// </summary>
public Color BorderColor
{
get => borderColor;
set
{
borderColor = value;
m_Material.SetColor(BorderColor1, borderColor);
}
}
/// <summary>
/// 填充颜色
/// </summary>
public Color FillColor
{
get => fillColor;
set
{
fillColor = value;
m_Material.SetColor(FillColor1, fillColor);
}
}
/// <summary>
/// 设置缩放
/// </summary>
/// <param name="scale"></param>
public void SetScale(float scale) => this.scale = scale;
// 缓存顶点列表以避免每帧分配内存
private readonly List<Vector3> verticesCache = new List<Vector3>();
public enum AngleSelectMode
{
Angle,
Multiples,
}
protected override void OnPopulateMesh(VertexHelper vh)
{
if (vh == null) return;
vh.Clear();
// 获取绘图区域的中心点和尺寸
Rect rect = GetPixelAdjustedRect();
Vector2 center = rect.center;
// 取宽高较小值的一半作为基准半径，确保图形不超出边界
float minSize = Mathf.Min(rect.width, rect.height);
float radius = (minSize / 2f) * scale;
// 计算多边形的顶点
verticesCache.Clear();
// ReSharper disable once ConditionIsAlwaysTrueOrFalse
if (sides < 3)
{
sides = 3;
Debug.LogError("图元必须由至少3个顶点构成！");
}
// 半角 (弧度)
var halfAngleRad = Mathf.PI / sides;
// 限制最大倒角半径，防止图形自相交或消失
// 最大理论半径是内切圆半径，但为了安全，限制在边长的一半对应的切距内
// 边长 L = 2 * R * sin(pi/n)
// 最大切距 d_max = L / 2 = R * sin(pi/n)
// 对应最大圆角半径 r_max = d_max * tan(pi/n) = R * sin^2/cos ?
// 简单限制：r < radius * 0.4 (经验值) 或者精确计算
var maxRounding = radius * 0.4f;
var currentRounding = Mathf.Clamp(roundingSize, 0f, maxRounding);
// 此渲染组件的颜色和中心uv
Color32 color32 = this.color;
Vector2 uvCenter = new Vector4(0.5f, 0.5f, 0, 0);
// 没有倒角，使用常规流程
if (currentRounding <= 0f)
{
verticesCache.AddRange(OriginPatternVectorPoints(sides, radius, sideAngle, center));
// 添加中心点
vh.AddVert(center, color32, uvCenter, uvCenter, uvCenter, Vector4.zero);
float angleStep = 360f / sides;
// 添加外围点
for (int i = 0; i < verticesCache.Count; i++)
{
// 简单的映射UV，将世界坐标映射到 0-1 范围，或者根据需求自定义
// 这里简单地将多边形映射到整个纹理空间
XericRendererUtils.GetUVAtRect(verticesCache[i], rect, out var u, out var v);
GetNormalizedAngleByPos(angleStep, i, out var normalizedAngle);
var uv = new Vector4(u, v, 1, normalizedAngle);
vh.AddVert(verticesCache[i], color32, uv, uv, uv, Vector4.zero);
}
// 三角形顺序：中心点, 当前外点, 下一个外点
for (int i = 1; i < sides; i++)
vh.AddTriangle(0, i, i + 1);
// 连接最后一个点和第一个点以闭合形状
vh.AddTriangle(0, sides, 1);
}
// 启用倒角
else
{
verticesCache.AddRange(OriginPatternVectorPoints(sides, radius, sideAngle, center));
// 添加中心点
vh.AddVert(center, color32, uvCenter, uvCenter, uvCenter, Vector4.zero);
var maxVpCount = sides * roundingTime + 1;
var l = 2 * radius * Mathf.Sin(Mathf.PI / sides);
var lastPos = center;
for (var i = 0; i < sides; i++)
{
Vector2 pCurr = verticesCache[i];
Vector2 pPrev = verticesCache[(i - 1 + sides) % sides];
Vector2 pNext = verticesCache[(i + 1) % sides];
Vector2 dirIn = (pPrev - pCurr).normalized;
Vector2 dirOut = (pNext - pCurr).normalized;
// 计算圆弧圆心
// 角平分线方向 (指向内部)
// dirIn 的反向是 -dirIn. dirOut 是 dirOut.
// 平分线 = normalize(-dirIn + dirOut)
Vector2 bisector = (-dirIn + dirOut).normalized;
// 圆心距离 pCurr 的距离: h = r / sin(alpha)
float distToCenter = currentRounding / Mathf.Sin(halfAngleRad);
Vector2 arcCenter = pCurr + bisector * distToCenter;
var halfL = l * 0.5f;
var power = halfL * roundingPower * roundingSize;
// 添加圆弧中心点
// GetUVByPos(arcCenter, rect, out var ac_u, out var ac_v);
// vh.AddVert(arcCenter, this.color, new Vector4(ac_u, ac_v, ));
// // 中心区域
// if (i > 0)
// vh.AddTriangle(0, 2 + (i - 1) * roundingTime, 2 + i * roundingTime);
var p0 = pCurr + dirIn * halfL * roundingSize;
var p1 = pCurr + dirIn * power;
var p2 = pCurr + dirOut * power;
var p3 = pCurr + dirOut * halfL * roundingSize;
for (var j = 0; j < roundingTime; j++)
{
var jTime = (float)j / (roundingTime - 1);
MacroCurve.BezierCurve3(p0, p1, p2, p3, jTime, out var pos);
pos.GetUVAtRect(rect, out var u, out var v);
var uv = new Vector4(u, v, 1, 1);
vh.AddVert(pos, this.color, uv, uv, uv, Vector4.zero);
var index = roundingTime * i + j + 1;
var next = index + 1;
if (next >= maxVpCount)
next = (next % maxVpCount) + 1;
vh.AddTriangle(0, index, next);
Debug.Log($"{jTime}|{pos}");
lastPos = pos;
}
}
}
}
/// <summary>
/// 图元基础外围图形顶点
/// </summary>
/// <param name="sideCount">边数（或者顶点数）</param>
/// <param name="radius">半径</param>
/// <param name="startAngle">图形起始角度</param>
/// <param name="center">中心偏移</param>
/// <returns></returns>
private static IEnumerable<Vector3> OriginPatternVectorPoints(int sideCount, float radius, float startAngle,
Vector2 center)
{
float angleStep = 360f / sideCount;
for (int i = 0; i < sideCount; i++)
{
float angleDeg = startAngle + i * angleStep;
float angle = angleDeg * Mathf.Deg2Rad;
float x = center.x + Mathf.Cos(angle) * radius;
float y = center.y + Mathf.Sin(angle) * radius;
yield return new Vector2(x, y);
// uv的y是角度，不过看起来不太需要这一步
// float normalizedDist = 1.0f;
// float normalizedAngle = (angleDeg + 90f) / 360f;
// if (normalizedAngle < 0) normalizedAngle += 1f;
// if (normalizedAngle > 1) normalizedAngle -= 1f;
//
// uvCache.Add(new Vector2(normalizedDist, normalizedAngle));
}
}
private void GetNormalizedAngleByPos(float angleStep, int count, out float normalizedAngle)
{
float angleDeg = startAngle + count * angleStep;
normalizedAngle = (angleDeg + 90f) / 360f;
if (normalizedAngle < 0) normalizedAngle += 1f;
if (normalizedAngle > 1) normalizedAngle -= 1f;
}
#if UNITY_EDITOR
protected override void OnValidate()
{
base.OnValidate();
if (sides < 3) sides = 3;
if (scale <= float.Epsilon) scale = float.Epsilon;
SetVerticesDirty();
BorderThickness = borderThickness;
BorderColor = borderColor;
FillColor = fillColor;
}
#endif
}
}
Runtime/Renderer/UIPatternRenderer.cs.meta
+3
View File
@@ -0,0 +1,3 @@
fileFormatVersion: 2
guid: eada6ed68c1a4d4f80a267cc56ee40d9
timeCreated: 1774341380
Runtime/Renderer/XericRendererComponent.cs
+149
View File
@@ -0,0 +1,149 @@
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using UnityEngine.Pool;
using UnityEngine.UI;
namespace XericLibrary
{
/// <summary>
/// 自定义渲染组件
/// </summary>
[RequireComponent(typeof(CanvasRenderer))]
public class XericRendererComponent : MaskableGraphic
{
public virtual string ShaderName => "Hidden/Texture2D";
#region 字段属性
// 原始数据
private readonly List<UIVertex> _vertexList = new List<UIVertex>();
private readonly List<int> _indexList = new List<int>();
// 阵列原点
private readonly List<Vector4> _arrayTransformList = new List<Vector4>();
// 中间数据
private List<UIVertex> _temp_vertexList = new List<UIVertex>();
private List<int> _temp_indexList = new List<int>();
private bool _dirty;
#endregion
#if UNITY_EDITOR
protected override void OnValidate()
{
base.OnValidate();
if (m_Material == null)
material = new Material(Shader.Find(ShaderName));
}
#endif
#region 绘制
/// <summary>
/// 刷新
/// </summary>
public virtual void Refresh()
{
SetVerticesDirty();
}
/// <summary>
/// ui模型填充流程
/// </summary>
/// <param name="vh"></param>
protected override void OnPopulateMesh(VertexHelper vh)
{
ClearCache();
// 填充图元
OnPopulatePrefabricateVertex(_vertexList, _indexList);
// 阵列
ArrayVertexList(_arrayTransformList);
// 将顶点填充到mesh
vh.AddUIVertexStream(_temp_vertexList, _temp_indexList);
}
/// <summary>
/// 填充预制顶点
/// </summary>
/// <param name="vertexList">顶点列表</param>
/// <param name="indexList">三角面索引</param>
protected virtual void OnPopulatePrefabricateVertex(List<UIVertex> vertexList, List<int> indexList)
{
}
/// <summary>
/// 清除所有缓存
/// </summary>
protected void ClearCache()
{
_vertexList.Clear();
_indexList.Clear();
_arrayTransformList.Clear();
}
/// <summary>
/// 添加一个阵列节点
/// </summary>
/// <param name="offset">偏移</param>
/// <param name="angle">角度</param>
protected void AddArrayModifier(Vector3 offset, float angle)
{
_arrayTransformList.Add(new Vector4(offset.x, offset.y, offset.z, angle));
}
#endregion
#region 阵列
/// <summary>
/// 根据原点阵列
/// </summary>
/// <param name="vh"></param>
/// <param name="trans"></param>
protected void ArrayVertexList(List<Vector4> trans)
{
if (trans == null || trans.Count == 0)
{
Copy();
return;
}
foreach (var t in trans)
Copy2(t);
void Copy()
{
_temp_vertexList = _vertexList.GetRange(0, _vertexList.Count);
_temp_indexList = _indexList.GetRange(0, _indexList.Count);
}
void Copy2(Vector4 transform)
{
_temp_vertexList = _vertexList.Select(a =>
{
var newPos = new Vector3(a.position.x, a.position.y, a.position.z);
if (a.position.z != 0)
{
var rot = Quaternion.Euler(0, 0, a.position.z);
newPos = rot * newPos;
}
newPos += (Vector3)transform;
return new UIVertex()
{
position = newPos,
normal = a.normal,
tangent = a.tangent,
color = a.color,
uv0 = a.uv0,
uv1 = a.uv1,
uv2 = a.uv2,
uv3 = a.uv3,
};
}).ToList();
_temp_indexList = _indexList.GetRange(0, _indexList.Count);
}
}
#endregion
}
}
Runtime/Renderer/XericRendererComponent.cs.meta
+3
View File
@@ -0,0 +1,3 @@
fileFormatVersion: 2
guid: 69b796bc59d34993b4b618c67db9c388
timeCreated: 1774340572
Runtime/Renderer/XericRendererUtils.cs
+518
View File
@@ -0,0 +1,518 @@
using System;
using System.Collections.Generic;
using System.Linq;
using MathNet.Numerics.Distributions;
using UnityEngine;
using UnityEngine.Pool;
using UnityEngine.UI;
using XericLibrary.Runtime.MacroLibrary;
namespace XericLibrary
{
/// <summary>
/// UILineRenderer 的工具类，提供静态方法用于线条渲染相关的操作
/// </summary>
internal static class XericRendererUtils
{
/// <summary>
/// 计算线路的总长度
/// </summary>
/// <param name="points">线路的顶点数组</param>
/// <param name="cycleLoop">线路是循环</param>
/// <returns>线路的总长度</returns>
public static float CalculateTotalLength(this Vector2[] points, bool cycleLoop = false)
{
if (points.Length < 2)
return 0f;
var totalLength = 0f;
for (int i = 0; i < points.Length - 1; i++)
totalLength += Vector2.Distance(points[i], points[i + 1]);
if (cycleLoop)
totalLength += Vector2.Distance(points[0], points[^1]);
return totalLength;
}
/// <summary>
/// 计算一个点指向另一个点的角度（以度为单位）
/// </summary>
/// <param name="vertex">起始点</param>
/// <param name="target">目标点</param>
/// <returns>旋转角度，范围为 -180 到 180 度</returns>
public static float RotatePointTowards(Vector2 vertex, Vector2 target)
{
// 使用反正切函数计算两点之间的角度
// 将弧度转换为角度返回
return (Mathf.Atan2(target.y - vertex.y, target.x - vertex.x) * Mathf.Rad2Deg);
}
/// <summary>
/// 如果需要居中显示，则偏移到组件中心
/// </summary>
/// <param name="center">是否要居中显示</param>
/// <param name="rectSize">整个绘制矩形范围的尺寸</param>
/// <returns></returns>
public static Vector2 SwitchCenterOffset(bool center, Vector2 rectSize) => center ? Vector2.zero : -(rectSize / 2);
/// <summary>
/// 获取两个点之间的法线，副法线
/// </summary>
/// <param name="startPoint">起点</param>
/// <param name="endPoint">终点</param>
/// <param name="vector">起点到终点的矢量</param>
/// <param name="distance">两点间距离</param>
/// <param name="normal">起点到终点的法线</param>
/// <param name="subTangent">垂直与起点到终点的法线（法线左转90）</param>
/// <returns></returns>
private static bool GetNormalizedVector(Vector2 startPoint, Vector2 endPoint,
out Vector2 vector, out float distance, out Vector2 normal, out Vector2 subTangent)
{
vector = endPoint - startPoint;
distance = vector.magnitude;
normal = Vector2.zero;
subTangent = Vector2.zero;
// 距离过小时不绘制
if (distance <= float.Epsilon)
return false;
// 线段的法线和副法线
normal = vector / distance;
subTangent = Vector2.Perpendicular(normal);
return true;
}
/// <summary>
/// 计算起点和终点的UV坐标Y值
/// </summary>
/// <param name="startLength">这段线段的起始线路长度</param>
/// <param name="currentLength">这段线段的长度</param>
/// <param name="totalLength">总线路的长度</param>
/// <param name="startUVY">起点处的uv y</param>
/// <param name="endUVY">终点处的uv y</param>
private static void GetCurrentLengthUVY(float startLength, float currentLength, float totalLength, out float startUVY, out float endUVY)
{
startUVY = totalLength > 0 ? startLength / totalLength : 0f;
endUVY = totalLength > 0 ? (startLength + currentLength) / totalLength : 0f;
}
#region 简易线路绘制
// 在点与点之间绘制给定宽度（thickness）的方片，转角处用两个三角形链接
// 这样会造成一根线会出现5个顶点，所以叫做 DSL5 (直接简单的5点直线 directly simple line 5)
/// <summary>
/// 创建线段的顶点数据
/// 每个线段由 5 个顶点组成：
/// - 起点的左右两个顶点
/// - 终点的左右两个顶点
/// - 终点的中心点（用于线段连接）
/// </summary>
/// <param name="vertices">顶点容器</param>
/// <param name="startPoint">线段的起点</param>
/// <param name="distance">线段的距离</param>
/// <param name="endPoint">线段的终点</param>
/// <param name="thickness">线条的厚度</param>
/// <param name="color">线条的颜色</param>
/// <param name="startLength">当前线段起点在线路中的累积长度</param>
/// <param name="totalLength">线路的总长度</param>
public static List<UIVertex> GetSingleLineSegmentVerts_DSL5(List<UIVertex> vertices, Vector2 startPoint, Vector2 endPoint,
float thickness, Color color, float startLength, out float distance, float totalLength, Vector3 offset)
{
if (vertices == null)
throw new Exception("没有指定线段片段顶点容器列表");
vertices.Clear();
// 创建顶点模板，设置颜色为组件的当前颜色
UIVertex vertex = UIVertex.simpleVert;
vertex.color = color;
if (!GetNormalizedVector(startPoint, endPoint,
out var vector, out distance, out var normal, out var subTangent))
return vertices;
// 线段单侧宽度
var width = thickness / 2;
GetCurrentLengthUVY(startLength, distance, totalLength, out var startUVY, out var endUVY);
vertex.position = (startPoint +
subTangent * width);
vertex.position += offset;
vertex.uv0 = new Vector2(0f, startUVY); // 左侧顶点的UV
vertices.Add(vertex);
vertex.position = (startPoint +
subTangent * -width);
vertex.position += offset;
vertex.uv0 = new Vector2(1f, startUVY); // 右侧顶点的UV
vertices.Add(vertex);
vertex.position = (endPoint +
subTangent * width);
vertex.position += offset;
vertex.uv0 = new Vector2(0f, endUVY); // 左侧顶点的UV
vertices.Add(vertex);
vertex.position = (endPoint +
subTangent * -width);
vertex.position += offset;
vertex.uv0 = new Vector2(1f, endUVY); // 右侧顶点的UV
vertices.Add(vertex);
// 添加终点的中心点，用于连接后续线段
vertex.position = endPoint;
vertex.position += offset;
vertex.uv0 = new Vector2(0.5f, endUVY); // 中心点的UV
vertices.Add(vertex);
return vertices;
}
/// <summary>
/// 在网格构建对象上添加这个直线片段
/// </summary>
/// <param name="vh">构建网格对象</param>
/// <param name="segmentPartIndex">该线路片段索引（比如第一段线应该是0）</param>
/// <param name="verts">该片段顶点</param>
public static void AddSingleLineSegmentVertsAndTriangle_DSL5(this VertexHelper vh, int segmentPartIndex, IEnumerable<UIVertex> verts)
{
foreach (var vert in verts)
vh.AddVert(vert);
int index = segmentPartIndex * 5;
// 添加线段的两个三角形（构成矩形线段）
vh.AddTriangle(index, index+1, index+3);
vh.AddTriangle(index+3, index+2, index);
// 为线段之间添加斜角边缘
// 使用上一个线段的终点和当前线段的起点创建过渡三角形
if (segmentPartIndex != 0)
{
vh.AddTriangle(index, index-1, index-3);
vh.AddTriangle(index+1, index-1, index-2);
}
}
/// <summary>
/// 推送顶点绘制线路
/// </summary>
/// <param name="vh"></param>
/// <param name="points"></param>
/// <param name="thickness"></param>
/// <param name="cycleLoop"></param>
/// <param name="color"></param>
/// <param name="offset"></param>
public static void PopulateLineByPointsArray_DSL5(this VertexHelper vh, Vector2[] points, float thickness, bool cycleLoop, Color color, Vector3 offset)
{
// 至少需要 2 个点才能绘制线条
if (points.Length < 2)
return;
// 计算线路总长度
var totalLength = points.CalculateTotalLength(cycleLoop);
var currentLength = 0f;
var vertices = ListPool<UIVertex>.Get();
for (int i = 0; i < points.Length - (cycleLoop ? 0 : 1); i++)
{
vh.AddSingleLineSegmentVertsAndTriangle_DSL5(i,
GetSingleLineSegmentVerts_DSL5(vertices, points[i], points[(i + 1) % points.Length], thickness, color, currentLength, out var distance, totalLength, offset));
currentLength += distance;
}
ListPool<UIVertex>.Release(vertices);
}
#endregion
#region 圆弧过度的线路绘制
// 在简易线路绘制的基础上，修改了转角处的处理
// 线的顶点还是5，但是转角圆弧处理会更细节，叫它 CFAL (中心对齐的圆弧转角直线，center fanshaped arc Line)
/// <summary>
/// 在网格构建对象上添加这个直线片段
/// </summary>
/// <param name="vh">构建网格对象</param>
/// <param name="segmentPartIndex">该线路片段索引（比如第一段线应该是0）</param>
/// <param name="verts">该片段顶点</param>
public static void AddSingleLineSegmentVertsAndTriangle_CFAL(this VertexHelper vh, int segmentPartIndex, IEnumerable<UIVertex> verts)
{
foreach (var vert in verts)
vh.AddVert(vert);
int index = segmentPartIndex * 5;
// 添加线段的两个三角形（构成矩形线段）
vh.AddTriangle(index, index+1, index+3);
vh.AddTriangle(index+3, index+2, index);
// 为线段之间添加斜角边缘
// 使用上一个线段的终点和当前线段的起点创建过渡三角形
if (segmentPartIndex != 0)
{
vh.AddTriangle(index, index-1, index-3);
vh.AddTriangle(index+1, index-1, index-2);
}
}
/// <summary>
/// 创建带有倒角的线段顶点数据
/// 支持设置圆弧细分数量和内圆弧半径
/// </summary>
/// <param name="vertices">顶点容器</param>
/// <param name="startPoint">线段的起点</param>
/// <param name="endPoint">线段的终点</param>
/// <param name="nextPoint">下一个线段的终点（用于计算夹角）</param>
/// <param name="prevPoint">上一个线段的起点（用于计算夹角）</param>
/// <param name="thickness">线条的厚度</param>
/// <param name="color">线条的颜色</param>
/// <param name="startLength">当前线段起点在线路中的累积长度</param>
/// <param name="totalLength">线路的总长度</param>
/// <param name="offset">偏移量</param>
/// <param name="chamferSegments">倒角细分数量</param>
/// <param name="innerRadius">内圆弧半径</param>
/// <param name="distance">返回线段的距离</param>
/// <returns>包含线段顶点的列表</returns>
public static List<UIVertex> GetSingleLineSegmentVerts_CFAL(List<UIVertex> vertices, Vector2 startPoint, Vector2 endPoint, Vector2 nextPoint, Vector2 prevPoint,
float thickness, Color color, float startLength, out float distance, float totalLength, Vector3 offset,
int chamferSegments = 0, float innerRadius = 0f)
{
if (vertices == null)
throw new Exception("没有指定线段片段顶点容器列表");
vertices.Clear();
// 创建顶点模板，设置颜色为组件的当前颜色
UIVertex vertex = UIVertex.simpleVert;
vertex.color = color;
if (!GetNormalizedVector(startPoint, endPoint,
out var vector, out distance, out var normal, out var subTangent))
return vertices;
// 线段单侧宽度
var width = thickness / 2;
GetCurrentLengthUVY(startLength, distance, totalLength, out var startUVY, out var endUVY);
// 计算起点和终点的夹角
float startAngle = 0f;
float endAngle = 0f;
if (prevPoint != startPoint)
{
var prevVector = startPoint - prevPoint;
var prevNormal = prevVector.normalized;
startAngle = Vector2.Angle(normal, -prevNormal);
}
if (nextPoint != endPoint)
{
var nextVector = nextPoint - endPoint;
var nextNormal = nextVector.normalized;
endAngle = Vector2.Angle(-normal, nextNormal);
}
// 计算顶点偏移量
float startOffset = 0f;
float endOffset = 0f;
if (Mathf.Abs(startAngle) > 0.1f)
{
if (innerRadius > 0f)
{
startOffset = (width + innerRadius) / Mathf.Sin(startAngle * Mathf.Deg2Rad / 2) - innerRadius;
}
else
{
startOffset = width / Mathf.Sin(startAngle * Mathf.Deg2Rad / 2);
}
}
if (Mathf.Abs(endAngle) > 0.1f)
{
if (innerRadius > 0f)
{
endOffset = (width + innerRadius) / Mathf.Sin(endAngle * Mathf.Deg2Rad / 2) - innerRadius;
}
else
{
endOffset = width / Mathf.Sin(endAngle * Mathf.Deg2Rad / 2);
}
}
// 添加起点的左侧顶点
vertex.position = (startPoint +
subTangent * width +
normal * startOffset);
vertex.position += offset;
vertex.uv0 = new Vector2(0f, startUVY);
vertices.Add(vertex);
// 添加起点的右侧顶点
vertex.position = (startPoint +
subTangent * -width +
normal * startOffset);
vertex.position += offset;
vertex.uv0 = new Vector2(1f, startUVY);
vertices.Add(vertex);
// 添加终点的左侧顶点
vertex.position = (endPoint +
subTangent * width +
normal * -endOffset);
vertex.position += offset;
vertex.uv0 = new Vector2(0f, endUVY);
vertices.Add(vertex);
// 添加终点的右侧顶点
vertex.position = (endPoint +
subTangent * -width +
normal * -endOffset);
vertex.position += offset;
vertex.uv0 = new Vector2(1f, endUVY);
vertices.Add(vertex);
// 添加终点的中心点
vertex.position = (endPoint +
normal * -endOffset);
vertex.position += offset;
vertex.uv0 = new Vector2(0.5f, endUVY);
vertices.Add(vertex);
return vertices;
}
/// <summary>
/// 推送顶点绘制带有倒角的线路
/// </summary>
/// <param name="vh">网格构建对象</param>
/// <param name="points">线路顶点数组</param>
/// <param name="thickness">线条厚度</param>
/// <param name="cycleLoop">是否循环</param>
/// <param name="color">线条颜色</param>
/// <param name="offset">偏移量</param>
/// <param name="chamferSegments">倒角细分数量</param>
/// <param name="innerRadius">内圆弧半径</param>
public static void PopulateLineByPointsArray_CFAL(this VertexHelper vh, Vector2[] points, float thickness, bool cycleLoop, Color color, Vector3 offset,
int chamferSegments = 0, float innerRadius = 0f)
{
// 至少需要 2 个点才能绘制线条
if (points.Length < 2)
return;
// 计算线路总长度
var totalLength = points.CalculateTotalLength(cycleLoop);
var currentLength = 0f;
var vertices = ListPool<UIVertex>.Get();
for (int i = 0; i < points.Length - (cycleLoop ? 0 : 1); i++)
{
var startPoint = points[i];
var endPoint = points[(i + 1) % points.Length];
var prevPoint = i > 0 ? points[i - 1] : cycleLoop ? points[^1] : startPoint;
var nextPoint = points[(i + 2) % points.Length];
vh.AddSingleLineSegmentVertsAndTriangle_CFAL(i,
GetSingleLineSegmentVerts_CFAL(vertices, startPoint, endPoint, nextPoint, prevPoint,
thickness, color, currentLength, out var distance, totalLength, offset,
chamferSegments, innerRadius));
currentLength += distance;
}
ListPool<UIVertex>.Release(vertices);
}
#endregion
#region 带有顶合并的线路绘制方法
/// <summary>
/// 创建线段的顶点数据
/// 每个线段由 5 个顶点组成：
/// - 起点的左右两个顶点
/// - 终点的左右两个顶点
/// - 终点的中心点（用于线段连接）
/// </summary>
/// <param name="startPoint">线段的起点</param>
/// <param name="endPoint">线段的终点</param>
/// <param name="angle0">起点到终点与终点到下一点</param>
/// <param name="angle3">起点到终点与终点到下一点</param>
/// <param name="thickness">线条的厚度</param>
/// <param name="center">是否居中显示</param>
/// <param name="rectSize">矩形变换的尺寸</param>
/// <param name="color">线条的颜色</param>
/// <param name="vh">用于添加顶点的 VertexHelper 对象</param>
/// <param name="startLength">当前线段起点在线路中的累积长度</param>
/// <param name="totalLength">线路的总长度</param>
public static void CreateLineSegment_CFAL(this VertexHelper vh, Vector2 startPoint, Vector2 endPoint, float angle0, float angle3, float thickness, bool center, Vector2 rectSize, Color color, float startLength, float totalLength)
{
// 计算偏移量：如果需要居中显示，则偏移到组件中心
Vector2 offset = center ? (rectSize / 2) : Vector2.zero;
// 创建顶点模板，设置颜色为组件的当前颜色
UIVertex vertex = UIVertex.simpleVert;
vertex.color = color;
if (!GetNormalizedVector(startPoint, endPoint,
out var vector, out var distance, out var normal, out var subTangent))
return;
// 线段单侧宽度
var width = thickness / 2;
//顶点偏移量，根据夹角计算内侧交点相对坐标点应该退后的距离
var pointOffset1 = Mathf.Abs(angle0) <= 0.1f ? 0 : width / Mathf.Sin(angle0 * Mathf.Deg2Rad) + (angle0 > 90 ? width : 0);
var pointOffset2 = Mathf.Abs(angle3) <= 0.1f ? 0 : width / Mathf.Sin(angle3 * Mathf.Deg2Rad) + (angle3 > 90 ? width : 0);
Debug.Log($"{angle0} = {Mathf.Sin(angle0 * Mathf.Deg2Rad)} , {angle3} = {Mathf.Sin(angle3 * Mathf.Deg2Rad)}");
// 计算起点和终点的UV坐标Y值
float startUVY = totalLength > 0 ? startLength / totalLength : 0f;
float endUVY = totalLength > 0 ? (startLength + distance) / totalLength : 0f;
vertex.position = (Vector3)(startPoint +
subTangent * width +
normal * pointOffset1) - (Vector3)offset;
vertex.uv0 = new Vector2(0f, startUVY); // 左侧顶点的UV
vh.AddVert(vertex);
vertex.position = (Vector3)(startPoint +
subTangent * -width +
normal * pointOffset1) - (Vector3)offset;
vertex.uv0 = new Vector2(1f, startUVY); // 右侧顶点的UV
vh.AddVert(vertex);
vertex.position = (Vector3)(endPoint +
subTangent * width +
normal * -pointOffset2) - (Vector3)offset;
vertex.uv0 = new Vector2(0f, endUVY); // 左侧顶点的UV
vh.AddVert(vertex);
vertex.position = (Vector3)(endPoint +
subTangent * -width +
normal * -pointOffset2) - (Vector3)offset;
vertex.uv0 = new Vector2(1f, endUVY); // 右侧顶点的UV
vh.AddVert(vertex);
// 添加终点的中心点，用于连接后续线段
vertex.position = (Vector3)(endPoint +
normal * -pointOffset2) - (Vector3)offset;
vertex.uv0 = new Vector2(0.5f, endUVY); // 中心点的UV
vh.AddVert(vertex);
}
#endregion
#region 顶点工具集
public static void GetUVAtRect(this Vector2 pos, Rect rect, out float u, out float v)
{
u = (pos.x - rect.xMin) / rect.width;
v = (pos.y - rect.yMin) / rect.height;
}
public static void Get(this IList<UIVertex> vertexList, Vector4 uv2)
{
}
#endregion
}
}
Runtime/UILineRendererUtils.cs.meta → Runtime/Renderer/XericRendererUtils.cs.meta
View File
Runtime/Sample.unity
+40 -1
View File
@@ -192,7 +192,12 @@ MonoBehaviour:
- {x: 938.8, y: 3.85}
- {x: 1000, y: 133}
thickness: 20
center: 1
center: 0
cycleLoop: 0
a: 1
useChamfer: 0
chamferSegments: 4
innerRadius: 0
--- !u!222 &246206084
CanvasRenderer:
m_ObjectHideFlags: 0
@@ -430,6 +435,7 @@ GameObject:
- component: {fileID: 963194228}
- component: {fileID: 963194227}
- component: {fileID: 963194226}
- component: {fileID: 963194229}
m_Layer: 0
m_Name: Main Camera
m_TagString: MainCamera
@@ -503,6 +509,39 @@ Transform:
m_Father: {fileID: 0}
m_RootOrder: 3
m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
--- !u!114 &963194229
MonoBehaviour:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
m_GameObject: {fileID: 963194225}
m_Enabled: 1
m_EditorHideFlags: 0
m_Script: {fileID: 11500000, guid: a79441f348de89743a2939f4d699eac1, type: 3}
m_Name:
m_EditorClassIdentifier:
m_RenderShadows: 1
m_RequiresDepthTextureOption: 2
m_RequiresOpaqueTextureOption: 2
m_CameraType: 0
m_Cameras: []
m_RendererIndex: -1
m_VolumeLayerMask:
serializedVersion: 2
m_Bits: 1
m_VolumeTrigger: {fileID: 0}
m_VolumeFrameworkUpdateModeOption: 2
m_RenderPostProcessing: 0
m_Antialiasing: 0
m_AntialiasingQuality: 2
m_StopNaN: 0
m_Dithering: 0
m_ClearDepth: 1
m_AllowXRRendering: 1
m_RequiresDepthTexture: 0
m_RequiresColorTexture: 0
m_Version: 2
--- !u!1 &1231462425
GameObject:
m_ObjectHideFlags: 0
Runtime/UILineRenderer.cs
-82
View File
@@ -1,82 +0,0 @@
using UnityEngine;
using UnityEngine.UI;
namespace XericLibrary
{
/// <summary>
/// UILineRenderer 是一个用于在 UI 上绘制连续线条的组件
/// 支持设置线条厚度、居中显示，并为线段之间添加斜角边缘
/// 继承自 MaskableGraphic，可与 UI 遮罩系统配合使用
/// </summary>
[RequireComponent(typeof(CanvasRenderer))]
public class UILineRenderer : MaskableGraphic
{
/// <summary>
/// 线条的顶点数组，至少需要 2 个点才能绘制线条
/// 点的坐标基于本地空间，中心点由 center 属性控制
/// </summary>
public Vector2[] points;
/// <summary>
/// 线条的厚度，单位为像素
/// </summary>
public float thickness = 10f;
/// <summary>
/// 是否将线条居中显示
/// true: 线条将以组件中心为原点
/// false: 线条将以组件左下角为原点
/// </summary>
public bool center = true;
public float a = 1;
/// <summary>
/// 重写 MaskableGraphic 的方法，用于生成线条的网格
/// 当 UI 需要重建时会自动调用此方法
/// </summary>
/// <param name="vh">用于构建网格的 VertexHelper 对象</param>
protected override void OnPopulateMesh(VertexHelper vh)
{
// 清空现有的网格数据
vh.Clear();
// 至少需要 2 个点才能绘制线条
if (points.Length < 2)
return;
// 计算线路总长度
float totalLength = UILineRendererUtils.CalculateTotalLength(points);
float currentLength = 0f;
// 遍历所有点，创建线段并添加到网格中
for (int i = 0; i < points.Length-1; i++)
{
// 使用静态工具方法创建当前点与下一个点之间的线段
// 传递当前累积长度和总长度用于UV坐标计算
UILineRendererUtils.CreateLineSegment(points[i], points[i+1],
i > 0 ? Mathf.Acos(Vector2.Dot((points[i -1] - points[i]).normalized, (points[i + 1] - points[i]).normalized)) : 0,
i < points.Length-2 ? Mathf.Acos(Vector2.Dot((points[i + 1] - points[i]).normalized, (points[i + 1] - points[i +2]).normalized)) : 0,
thickness, center, rectTransform.sizeDelta, color, vh, currentLength, totalLength);
// 更新累积长度
currentLength += Vector2.Distance(points[i], points[i+1]);
// 计算当前线段的顶点索引（每个线段包含 5 个顶点）
int index = i * 5;
// 添加线段的两个三角形（构成矩形线段）
vh.AddTriangle(index, index+1, index+3);
vh.AddTriangle(index+3, index+2, index);
// 为线段之间添加斜角边缘
// 使用上一个线段的终点和当前线段的起点创建过渡三角形
if (i != 0)
{
vh.AddTriangle(index, index-1, index-3);
vh.AddTriangle(index+1, index-1, index-2);
}
}
}
}
}
Runtime/UILineRendererUtils.cs
-135
View File
@@ -1,135 +0,0 @@
using UnityEngine;
using UnityEngine.UI;
using XericLibrary.Runtime.MacroLibrary;
namespace XericLibrary
{
/// <summary>
/// UILineRenderer 的工具类，提供静态方法用于线条渲染相关的操作
/// </summary>
public static class UILineRendererUtils
{
/// <summary>
/// 计算线路的总长度
/// </summary>
/// <param name="points">线路的顶点数组</param>
/// <returns>线路的总长度</returns>
public static float CalculateTotalLength(Vector2[] points)
{
if (points.Length < 2)
return 0f;
float totalLength = 0f;
for (int i = 0; i < points.Length - 1; i++)
{
totalLength += Vector2.Distance(points[i], points[i + 1]);
}
return totalLength;
}
/// <summary>
/// 创建线段的顶点数据
/// 每个线段由 5 个顶点组成：
/// - 起点的左右两个顶点
/// - 终点的左右两个顶点
/// - 终点的中心点（用于线段连接）
/// </summary>
/// <param name="point1">线段的起点</param>
/// <param name="point2">线段的终点</param>
/// <param name="angle0">起点到终点与终点到下一点</param>
/// <param name="angle3">起点到终点与终点到下一点</param>
/// <param name="thickness">线条的厚度</param>
/// <param name="center">是否居中显示</param>
/// <param name="rectSize">矩形变换的尺寸</param>
/// <param name="color">线条的颜色</param>
/// <param name="vh">用于添加顶点的 VertexHelper 对象</param>
/// <param name="currentLength">当前线段起点在线路中的累积长度</param>
/// <param name="totalLength">线路的总长度</param>
public static void CreateLineSegment(Vector2 point1, Vector2 point2, float angle0, float angle3, float thickness, bool center, Vector2 rectSize, Color color, VertexHelper vh, float currentLength, float totalLength)
{
// 计算偏移量：如果需要居中显示，则偏移到组件中心
Vector2 offset = center ? (rectSize / 2) : Vector2.zero;
// 创建顶点模板，设置颜色为组件的当前颜色
UIVertex vertex = UIVertex.simpleVert;
vertex.color = color;
var vector = point2 - point1;
var vectorDistance = vector.magnitude;
// 距离过小时不绘制
if (vectorDistance <= float.Epsilon)
return;
// 线段的法线和副法线
var vectorNormal = vector / vectorDistance;
var vectorSubtangent = Vector2.Perpendicular(vectorNormal);
// 计算线段长度
float segmentLength = Vector2.Distance(point1, point2);
// 线段单侧宽度
var width = thickness / 2;
//顶点偏移量
var pointOffset1 = angle0 == 0 ? 0 : width / Mathf.Sin(angle0 / 2);
var pointOffset2 = angle3 == 0 ? 0 : width / Mathf.Sin(angle3 / 2);
Debug.Log($"{pointOffset1} , {pointOffset2}");
// 计算起点和终点的UV坐标Y值
float startUVY = totalLength > 0 ? currentLength / totalLength : 0f;
float endUVY = totalLength > 0 ? (currentLength + segmentLength) / totalLength : 0f;
// 计算起点的旋转角度，使线条垂直于线段方向
// Quaternion point1Rotation = Quaternion.Euler(0, 0, RotatePointTowards(point1, point2) + 90);
// 添加起点的左侧顶点
// vertex.position = point1Rotation * new Vector3(-thickness / 2, 0);
vertex.position = (Vector3)(point1 +
vectorSubtangent * -width +
vectorNormal * pointOffset1) - (Vector3)offset;
vertex.uv0 = new Vector2(0f, startUVY); // 左侧顶点的UV
vh.AddVert(vertex);
// 添加起点的右侧顶点
// vertex.position = point1Rotation * new Vector3(thickness / 2, 0);
vertex.position = (Vector3)(point1 +
vectorSubtangent * width +
vectorNormal * pointOffset1) - (Vector3)offset;
vertex.uv0 = new Vector2(1f, startUVY); // 右侧顶点的UV
vh.AddVert(vertex);
// 计算终点的旋转角度，使线条垂直于线段方向
//Quaternion point2Rotation = Quaternion.Euler(0, 0, RotatePointTowards(point2, point1) - 90);
// 添加终点的左侧顶点
//vertex.position = point2Rotation * new Vector3(-thickness / 2, 0);
vertex.position = (Vector3)(point2 +
vectorSubtangent * -width +
vectorNormal * pointOffset2) - (Vector3)offset;
vertex.uv0 = new Vector2(0f, endUVY); // 左侧顶点的UV
vh.AddVert(vertex);
// 添加终点的右侧顶点
//vertex.position = point2Rotation * new Vector3(thickness / 2, 0);
vertex.position = (Vector3)(point2 +
vectorSubtangent * width +
vectorNormal * pointOffset2) - (Vector3)offset;
vertex.uv0 = new Vector2(1f, endUVY); // 右侧顶点的UV
vh.AddVert(vertex);
// 添加终点的中心点，用于连接后续线段
vertex.position = point2 - offset;
vertex.uv0 = new Vector2(0.5f, endUVY); // 中心点的UV
vh.AddVert(vertex);
}
/// <summary>
/// 计算一个点指向另一个点的角度（以度为单位）
/// </summary>
/// <param name="vertex">起始点</param>
/// <param name="target">目标点</param>
/// <returns>旋转角度，范围为 -180 到 180 度</returns>
public static float RotatePointTowards(Vector2 vertex, Vector2 target)
{
// 使用反正切函数计算两点之间的角度
// 将弧度转换为角度返回
return (float)(Mathf.Atan2(target.y - vertex.y, target.x - vertex.x) * (180 / Mathf.PI));
}
}
}