[UGUI]圓形Image

參考鏈接：

http://www.cnblogs.com/leoin2012/p/6425089.html

?

前面說過Mask組件會影響性能：https://www.cnblogs.com/lyh916/p/10587632.html

因此，盡量少使用Mask，對于類似技能圖標那樣的圓形圖片，可以考慮用本文的方式去實現。

?

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; //填充個數 10 private List<Vector2> outerVertexs; //圓上頂點列表 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 //計算準備 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 //添加第一個點 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 //添加圓上的點 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 //連接點 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 //連接點擊區域 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.頂點數據

這里以pivot為(0.5,0.5)為例。在這種情況下，圖片的位置中心和uv中心重合，即都在圖片的中點處。因此這時位置和uv是成比例的，即uv.z - uv.x對應width，uv.w - uv.y對應height，這樣就可以根據當前點的位置計算出對應的uv坐標。

關于圓上的頂點個數，當填充比例小于1時，頂點個數=三角形個數+1；當填充比例等于1時，頂點個數=三角形個數(因為點重合)

?

b.頂點連接

要按順時針連接(順時針表示正對屏幕，逆時針表示背對屏幕)。這里使用(0, i + 1, i)的順序。

?

c.點擊區域

使用這個算法：https://www.cnblogs.com/lyh916/p/10633132.html

要注意的是，當填充比例小于1時，要把原點也加上去，可以考慮一下下面的情況：

?

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("填充個數", fillNum.intValue, 1, 100); 25 26 serializedObject.ApplyModifiedProperties(); 27 } 28 }

?

posted on 2019-03-27 22:51?艱苦奮斗中 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/lyh916/p/10611787.html

總結

以上是生活随笔為你收集整理的[UGUI]圆形Image的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。