[feature][polar] support circular polar

CHANGELOG.md

@@ -58,6 +58,7 @@
 
 ## master
 
+* (2022.09.14) 增加`PolarCoord`可通过`radius`设置环形极坐标的支持
 * (2022.09.09) 修复`Editor`下编辑参数部分组件可能不会实时刷新的问题
 * (2022.09.08) 增加`RingChart`可设置`LabelLine`引导线的支持
 * (2022.09.06) 增加`SerieSymbol`的`minSize`和`maxSize`参数设置最大最小尺寸的支持

Editor/MainComponents/PolarCoordEditor.cs

@@ -10,7 +10,7 @@ namespace XCharts.Editor
         {
             ++EditorGUI.indentLevel;
             PropertyTwoFiled("m_Center");
-            PropertyField("m_Radius");
+            PropertyTwoFiled("m_Radius");
             PropertyField("m_BackgroundColor");
             --EditorGUI.indentLevel;
         }

Runtime/Component/Axis/AngleAxis/AngleAxisHandler.cs

@@ -61,7 +61,7 @@ namespace XCharts.Runtime
             var polar = chart.GetChartComponent<PolarCoord>(axis.polarIndex);
             if (polar == null) return;
             PolarHelper.UpdatePolarCenter(polar, chart.chartPosition, chart.chartWidth, chart.chartHeight);
-            var radius = polar.context.radius;
+            var radius = polar.context.outsideRadius;
             axis.context.labelObjectList.Clear();
             axis.context.startAngle = 90 - axis.startAngle;
 
@@ -103,7 +103,7 @@ namespace XCharts.Runtime
         private void DrawAngleAxis(VertexHelper vh, AngleAxis angleAxis)
         {
             var polar = chart.GetChartComponent<PolarCoord>(angleAxis.polarIndex);
-            var radius = polar.context.radius;
+            var radius = polar.context.outsideRadius;
             var cenPos = polar.context.center;
             var total = 360;
             var size = AxisHelper.GetScaleNumber(angleAxis, total, null);
@@ -158,7 +158,7 @@ namespace XCharts.Runtime
             var dir = (chart.pointerPos - new Vector2(polar.context.center.x, polar.context.center.y)).normalized;
             var angle = ChartHelper.GetAngle360(Vector2.up, dir);
             axis.context.pointerValue = (angle - component.context.startAngle + 360) % 360;
-            axis.context.pointerLabelPosition = polar.context.center + new Vector3(dir.x, dir.y) * (polar.context.radius + 25);
+            axis.context.pointerLabelPosition = polar.context.center + new Vector3(dir.x, dir.y) * (polar.context.outsideRadius + 25);
         }
     }
 }

Runtime/Component/Axis/RadiusAxis/RadiusAxisHandler.cs

@@ -74,7 +74,9 @@ namespace XCharts.Runtime
             if (axis.context.labelObjectList.Count <= 0)
                 InitRadiusAxis(axis);
             else
+            {
                 axis.UpdateLabelText(polar.context.radius, null, false);
+            }
         }
 
         private void InitRadiusAxis(RadiusAxis axis)
@@ -89,7 +91,7 @@ namespace XCharts.Runtime
 
             PolarHelper.UpdatePolarCenter(polar, chart.chartPosition, chart.chartWidth, chart.chartHeight);
             axis.context.labelObjectList.Clear();
-            var radius = polar.context.radius;
+            var radius = polar.context.outsideRadius - polar.context.insideRadius;
             var objName = component.GetType().Name + axis.index;
             var axisObj = ChartHelper.AddObject(objName, chart.transform, chart.chartMinAnchor,
                 chart.chartMaxAnchor, chart.chartPivot, chart.chartSizeDelta);
@@ -99,7 +101,7 @@ namespace XCharts.Runtime
             ChartHelper.HideAllObject(axisObj);
             var textStyle = axis.axisLabel.textStyle;
             var splitNumber = AxisHelper.GetScaleNumber(axis, radius, null);
-            var totalWidth = 0f;
+            var totalWidth = polar.context.insideRadius;
             var txtHig = textStyle.GetFontSize(chart.theme.axis) + 2;
             for (int i = 0; i < splitNumber; i++)
             {
@@ -150,7 +152,7 @@ namespace XCharts.Runtime
             var radius = polar.context.radius;
             var cenPos = polar.context.center;
             var size = AxisHelper.GetScaleNumber(radiusAxis, radius, null);
-            var totalWidth = 0f;
+            var totalWidth = polar.context.insideRadius;
             var dire = ChartHelper.GetDire(startAngle, true).normalized;
             var tickWidth = radiusAxis.axisTick.GetWidth(chart.theme.axis.tickWidth);
             var tickLength = radiusAxis.axisTick.GetLength(chart.theme.axis.tickLength);
@@ -178,8 +180,8 @@ namespace XCharts.Runtime
             }
             if (radiusAxis.show && radiusAxis.axisLine.show)
             {
-                var lineStartPos = polar.context.center - dire * tickWidth;
-                var lineEndPos = polar.context.center + dire * (radius + tickWidth);
+                var lineStartPos = polar.context.center + dire * polar.context.insideRadius;
+                var lineEndPos = polar.context.center + dire * (polar.context.outsideRadius + 2 * tickWidth);
                 var lineWidth = radiusAxis.axisLine.GetWidth(chart.theme.axis.lineWidth);
                 UGL.DrawLine(vh, lineStartPos, lineEndPos, lineWidth, chart.theme.axis.lineColor);
             }

Runtime/Component/Radar/RadarCoordHandler.cs

@@ -17,6 +17,7 @@ namespace XCharts.Runtime
 
         public override void Update()
         {
+            base.Update();
             if (!chart.isPointerInChart)
             {
                 component.context.isPointerEnter = false;

Runtime/Component/Tooltip/TooltipHandler.cs

@@ -646,7 +646,7 @@ namespace XCharts.Runtime
             var lineType = tooltip.lineStyle.GetType(theme.tooltip.lineType);
             var lineWidth = tooltip.lineStyle.GetWidth(theme.tooltip.lineWidth);
             var cenPos = m_Polar.context.center;
-            var radius = m_Polar.context.radius;
+            var radius = m_Polar.context.outsideRadius;
             var sp = m_Polar.context.center;
             var tooltipAngle = m_AngleAxis.GetValueAngle(tooltip.context.angle);
 

Runtime/Coord/Polar/PolarCoord.cs

@@ -14,7 +14,7 @@ namespace XCharts.Runtime
     {
         [SerializeField] private bool m_Show = true;
         [SerializeField] private float[] m_Center = new float[2] { 0.5f, 0.45f };
-        [SerializeField] private float m_Radius = 0.35f;
+        [SerializeField] private float[] m_Radius = new float[2] { 0, 0.35f };
         [SerializeField] private Color m_BackgroundColor;
 
         public PolarCoordContext context = new PolarCoordContext();
@@ -41,12 +41,12 @@ namespace XCharts.Runtime
         }
         /// <summary>
         /// the radius of polar.
-        /// |极坐标的半径。
+        /// |半径。radius[0]表示内径，radius[1]表示外径。
         /// </summary>
-        public float radius
+        public float[] radius
         {
             get { return m_Radius; }
-            set { if (PropertyUtil.SetStruct(ref m_Radius, value)) SetAllDirty(); }
+            set { if (value != null && value.Length == 2) { m_Radius = value; SetAllDirty(); } }
         }
         /// <summary>
         /// Background color of polar, which is transparent by default.
@@ -65,7 +65,8 @@ namespace XCharts.Runtime
 
         public bool Contains(Vector3 pos)
         {
-            return Vector3.Distance(pos, context.center) < context.radius;
+            var dist = Vector3.Distance(pos, context.center);
+            return dist >= context.insideRadius && dist <= context.outsideRadius;
         }
     }
 }

Runtime/Coord/Polar/PolarCoordContext.cs

@@ -10,11 +10,17 @@ namespace XCharts.Runtime
         /// |极坐标在容器中的具体中心点。
         /// </summary>
         public Vector3 center;
+        public float radius;
         /// <summary>
         /// the true radius of polar.
-        /// |极坐标的运行时实际半径。
+        /// |极坐标的运行时实际内半径。
         /// </summary>
-        public float radius;
+        public float insideRadius;
+        /// <summary>
+        /// the true radius of polar.
+        /// |极坐标的运行时实际外半径。
+        /// </summary>
+        public float outsideRadius;
         public bool isPointerEnter;
     }
 }

Runtime/Coord/Polar/PolarCoordHandler.cs

@@ -10,6 +10,7 @@ namespace XCharts.Runtime
     {
         public override void Update()
         {
+            base.Update();
             PolarHelper.UpdatePolarCenter(component, chart.chartPosition, chart.chartWidth, chart.chartHeight);
 
             if (chart.isPointerInChart)
@@ -26,9 +27,22 @@ namespace XCharts.Runtime
         private void DrawPolar(VertexHelper vh, PolarCoord polar)
         {
             PolarHelper.UpdatePolarCenter(polar, chart.chartPosition, chart.chartWidth, chart.chartHeight);
-            if (!ChartHelper.IsClearColor(polar.backgroundColor))
+            if (polar.show && !ChartHelper.IsClearColor(polar.backgroundColor))
             {
-                UGL.DrawCricle(vh, polar.context.center, polar.context.radius, polar.backgroundColor);
+                if (polar.context.insideRadius > 0)
+                {
+                    UGL.DrawDoughnut(vh, polar.context.center,
+                        polar.context.insideRadius,
+                        polar.context.outsideRadius,
+                        polar.backgroundColor,
+                        ColorUtil.clearColor32);
+                }
+                else
+                {
+                    UGL.DrawCricle(vh, polar.context.center,
+                        polar.context.outsideRadius,
+                        polar.backgroundColor);
+                }
             }
         }
     }

Runtime/Coord/Polar/PolarHelper.cs

@@ -9,19 +9,12 @@ namespace XCharts.Runtime
             if (polar.center.Length < 2) return;
             var centerX = polar.center[0] <= 1 ? chartWidth * polar.center[0] : polar.center[0];
             var centerY = polar.center[1] <= 1 ? chartHeight * polar.center[1] : polar.center[1];
+            var minWidth = Mathf.Min(chartWidth, chartHeight);
+
             polar.context.center = chartPosition + new Vector3(centerX, centerY);
-            if (polar.radius <= 0)
-            {
-                polar.context.radius = 0;
-            }
-            else if (polar.radius <= 1)
-            {
-                polar.context.radius = Mathf.Min(chartWidth, chartHeight) * polar.radius;
-            }
-            else
-            {
-                polar.context.radius = polar.radius;
-            }
+            polar.context.insideRadius = polar.radius[0] <= 1 ? minWidth * polar.radius[0] : polar.radius[0];
+            polar.context.outsideRadius = polar.radius[1] <= 1 ? minWidth * polar.radius[1] : polar.radius[1];
+            polar.context.radius = polar.context.outsideRadius - polar.context.insideRadius;
         }
     }
 }

Runtime/Serie/Line/LineHandler.PolarCoord.cs

@@ -111,7 +111,7 @@ namespace XCharts.Runtime
                 return;
 
             var startAngle = m_AngleAxis.startAngle;
-            var radius = m_SeriePolar.context.radius;
+            var radius = m_SeriePolar.context.outsideRadius;
 
             var min = m_RadiusAxis.context.minValue;
             var max = m_RadiusAxis.context.maxValue;