[UGUI]圆形Image
參考鏈接：
http://www.cnblogs.com/leoin2012/p/6425089.html
?
前面說(shuō)過(guò)Mask組件會(huì)影響性能：https://www.cnblogs.com/lyh916/p/10587632.html
因此，盡量少使用Mask，對(duì)于類似技能圖標(biāo)那樣的圓形圖片，可以考慮用本文的方式去實(shí)現(xiàn)。
?
1.CircleImage.cs
1 using UnityEngine; 2 using UnityEngine.UI; 3 using UnityEngine.Sprites; 4 using System.Collections.Generic; 5 6 public class CircleImage : Image { 7 8 public float fillPercent = 1f; //填充比例 9 public int fillNum = 100; //填充個(gè)數(shù) 10 private List<Vector2> outerVertexs; //圓上頂點(diǎn)列表 11 12 protected override void Awake() 13 { 14 base.Awake(); 15 outerVertexs = new List<Vector2>(); 16 } 17 18 protected override void OnPopulateMesh(VertexHelper toFill) 19 { 20 if (overrideSprite == null) 21 { 22 base.OnPopulateMesh(toFill); 23 return; 24 } 25 26 switch (type) 27 { 28 case Type.Simple: 29 GenerateSimpleSprite(toFill, preserveAspect); 30 break; 31 } 32 } 33 34 void GenerateSimpleSprite(VertexHelper vh, bool lPreserveAspect) 35 { 36 vh.Clear(); 37 outerVertexs.Clear(); 38 39 //計(jì)算準(zhǔn)備 40 Vector4 uv = (overrideSprite != null) ? DataUtility.GetOuterUV(overrideSprite) : Vector4.zero; 41 42 float degreeDelta = 2 * Mathf.PI / fillNum; 43 int curNum = (int)(fillNum * fillPercent); 44 float width = rectTransform.rect.width; 45 float height = rectTransform.rect.height; 46 float radius = width * 0.5f; 47 48 float uvCenterX = (uv.x + uv.z) * 0.5f; 49 float uvCenterY = (uv.y + uv.w) * 0.5f; 50 float uvScaleX = (uv.z - uv.x) / width; 51 float uvScaleY = (uv.w - uv.y) / height; 52 53 //添加第一個(gè)點(diǎn) 54 UIVertex uiVertex = new UIVertex(); 55 uiVertex.color = color; 56 uiVertex.position = Vector2.zero; 57 uiVertex.uv0 = new Vector2(uvCenterX, uvCenterY); 58 vh.AddVert(uiVertex); 59 60 //添加圓上的點(diǎn) 61 int vertNum = (fillPercent == 1) ? curNum : curNum + 1; 62 for (int i = 1; i <= vertNum; i++) 63 { 64 float curDegree = (i - 1) * degreeDelta; 65 float cosA = Mathf.Cos(curDegree); 66 float sinA = Mathf.Sin(curDegree); 67 Vector2 curVertice = new Vector2(cosA * radius, sinA * radius); 68 69 uiVertex = new UIVertex(); 70 uiVertex.color = color; 71 uiVertex.position = curVertice; 72 uiVertex.uv0 = new Vector2(uvCenterX + curVertice.x * uvScaleX, uvCenterY + curVertice.y * uvScaleY); 73 vh.AddVert(uiVertex); 74 75 outerVertexs.Add(curVertice); 76 } 77 78 //連接點(diǎn) 79 for (int i = 1; i < vertNum; i++) 80 { 81 vh.AddTriangle(0, i + 1, i); 82 } 83 if (fillPercent == 1) 84 { 85 vh.AddTriangle(0, 1, curNum); 86 } 87 88 //連接點(diǎn)擊區(qū)域 89 if (fillPercent < 1) 90 { 91 outerVertexs.Add(Vector2.zero); 92 } 93 } 94 95 public override bool IsRaycastLocationValid(Vector2 screenPoint, Camera eventCamera) 96 { 97 Sprite sprite = overrideSprite; 98 if (sprite == null) 99 return true; 100 101 Vector2 local; 102 RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform, screenPoint, eventCamera, out local); 103 104 return MathTool.IsPointInPolygon(local, outerVertexs); 105 } 106 }?
效果如下：
?
分析：
a.頂點(diǎn)數(shù)據(jù)
這里以pivot為(0.5,0.5)為例。在這種情況下，圖片的位置中心和uv中心重合，即都在圖片的中點(diǎn)處。因此這時(shí)位置和uv是成比例的，即uv.z - uv.x對(duì)應(yīng)width，uv.w - uv.y對(duì)應(yīng)height，這樣就可以根據(jù)當(dāng)前點(diǎn)的位置計(jì)算出對(duì)應(yīng)的uv坐標(biāo)。
關(guān)于圓上的頂點(diǎn)個(gè)數(shù)，當(dāng)填充比例小于1時(shí)，頂點(diǎn)個(gè)數(shù)=三角形個(gè)數(shù)+1；當(dāng)填充比例等于1時(shí)，頂點(diǎn)個(gè)數(shù)=三角形個(gè)數(shù)(因?yàn)辄c(diǎn)重合)
?
b.頂點(diǎn)連接
要按順時(shí)針連接(順時(shí)針表示正對(duì)屏幕，逆時(shí)針表示背對(duì)屏幕)。這里使用(0, i + 1, i)的順序。
?
c.點(diǎn)擊區(qū)域
使用這個(gè)算法：https://www.cnblogs.com/lyh916/p/10633132.html
要注意的是，當(dāng)填充比例小于1時(shí)，要把原點(diǎn)也加上去，可以考慮一下下面的情況：
?
2.CircleImageEditor.cs
1 using UnityEditor; 2 using UnityEditor.UI; 3 4 [CustomEditor(typeof(CircleImage))] 5 public class CircleImageEditor : ImageEditor { 6 7 SerializedProperty fillPercent; 8 SerializedProperty fillNum; 9 10 protected override void OnEnable() 11 { 12 base.OnEnable(); 13 fillPercent = serializedObject.FindProperty("fillPercent"); 14 fillNum = serializedObject.FindProperty("fillNum"); 15 } 16 17 public override void OnInspectorGUI() 18 { 19 base.OnInspectorGUI(); 20 21 serializedObject.Update(); 22 23 fillPercent.floatValue = EditorGUILayout.Slider("填充比例", fillPercent.floatValue, 0, 1); 24 fillNum.intValue = EditorGUILayout.IntSlider("填充個(gè)數(shù)", fillNum.intValue, 1, 100); 25 26 serializedObject.ApplyModifiedProperties(); 27 } 28 }?
posted on 2019-03-27 22:51?艱苦奮斗中 閱讀(...) 評(píng)論(...) 編輯 收藏轉(zhuǎn)載于:https://www.cnblogs.com/lyh916/p/10611787.html
總結(jié)
以上是生活随笔為你收集整理的[UGUI]圆形Image的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
