增加Background的borderStyle，给图表默认设置圆角

Documentation~/en/api.md

@@ -1121,6 +1121,7 @@ The style of border.
 |--|--|--|
 |ChartText()||public ChartText()|
 |ChartText()||public ChartText(GameObject textParent)|
+|GetColor()||public Color GetColor()|
 |GetPreferredHeight()||public float GetPreferredHeight()|
 |GetPreferredText()||public string GetPreferredText(string content, string suffix, float maxWidth)|
 |GetPreferredWidth()||public float GetPreferredWidth()|

Documentation~/en/configuration.md

@@ -658,6 +658,7 @@ Background component.
 |imageType|||the fill type of background image.
 |imageColor|||背景图颜色。
 |autoColor|true||Whether to use theme background color for component color when the background component is on.
+|borderStyle||v3.10.0|the border style of background. [BorderStyle](#borderstyle)|
 
 ```mdx-code-block
 </APITable>
@@ -1006,10 +1007,10 @@ Grid component.
 |--|--|--|--|
 |show|true||Whether to show the grid in rectangular coordinate.
 |layoutIndex|-1|v3.8.0|The index of the grid layout component to which the grid belongs. The default is -1, which means that it does not belong to any grid layout component. When this value is set, the left, right, top, and bottom properties will be invalid.
-|left|0.1f||Distance between grid component and the left side of the container.
+|left|0.11f||Distance between grid component and the left side of the container.
 |right|0.08f||Distance between grid component and the right side of the container.
 |top|0.22f||Distance between grid component and the top side of the container.
-|bottom|0.12f||Distance between grid component and the bottom side of the container.
+|bottom|0.14f||Distance between grid component and the bottom side of the container.
 |backgroundColor|||Background color of grid, which is transparent by default.
 |showBorder|false||Whether to show the grid border.
 |borderWidth|0f||Border width of grid.

Documentation~/zh/api.md

@@ -1121,6 +1121,7 @@ slug: /api
 |--|--|--|
 |ChartText()||public ChartText()|
 |ChartText()||public ChartText(GameObject textParent)|
+|GetColor()||public Color GetColor()|
 |GetPreferredHeight()||public float GetPreferredHeight()|
 |GetPreferredText()||public string GetPreferredText(string content, string suffix, float maxWidth)|
 |GetPreferredWidth()||public float GetPreferredWidth()|

Documentation~/zh/changelog.md

@@ -70,6 +70,7 @@ slug: /changelog
 
 ## master
 
+* (2024.01.09) 增加`Background`的`borderStyle`，给图表默认设置圆角
 * (2024.01.07) 修复`Tooltop`的第一个`ContentLabelStyle`设置`color`无效的问题
 * (2024.01.01) 增加`BorderStyle`边框样式
 * (2023.12.26) 增加`Heatmap`的`maxCache`参数支持

Documentation~/zh/configuration.md

@@ -641,6 +641,7 @@ import APITable from '@site/src/components/APITable';
 |imageType|||背景图填充类型。
 |imageColor|||背景图颜色。
 |autoColor|true||当background组件开启时，是否自动使用主题背景色作为backgrounnd组件的颜色。当设置为false时，用imageColor作为颜色。
+|borderStyle||v3.10.0|背景边框样式。 [BorderStyle](#borderstyle)|
 
 ```mdx-code-block
 </APITable>
@@ -977,10 +978,10 @@ Drawing grid in rectangular coordinate. Line chart, bar chart, and scatter chart
 |--|--|--|--|
 |show|true||是否显示直角坐标系网格。
 |layoutIndex|-1|v3.8.0|网格所属的网格布局组件的索引。默认为-1，表示不属于任何网格布局组件。当设置了该值时，left、right、top、bottom属性将失效。
-|left|0.1f||grid 组件离容器左侧的距离。
+|left|0.11f||grid 组件离容器左侧的距离。
 |right|0.08f||grid 组件离容器右侧的距离。
 |top|0.22f||grid 组件离容器上侧的距离。
-|bottom|0.12f||grid 组件离容器下侧的距离。
+|bottom|0.14f||grid 组件离容器下侧的距离。
 |backgroundColor|||网格背景色，默认透明。
 |showBorder|false||是否显示网格边框。
 |borderWidth|0f||网格边框宽。

Editor/MainComponents/BackgroundEditor.cs

@@ -14,6 +14,7 @@ namespace XCharts.Editor
             PropertyField("m_ImageType");
             PropertyField("m_ImageColor");
             PropertyField("m_AutoColor");
+            PropertyField("m_BorderStyle");
             --EditorGUI.indentLevel;
         }
     }

Runtime/Component/Background/Background.cs

@@ -18,6 +18,7 @@ namespace XCharts.Runtime
         [SerializeField] private Image.Type m_ImageType;
         [SerializeField] private Color m_ImageColor = Color.white;
         [SerializeField] private bool m_AutoColor = true;
+        [SerializeField][Since("v3.10.0")] private BorderStyle m_BorderStyle = new BorderStyle();
 
         /// <summary>
         /// Whether to enable the background component.
@@ -67,6 +68,16 @@ namespace XCharts.Runtime
             set { if (PropertyUtil.SetStruct(ref m_AutoColor, value)) SetVerticesDirty(); }
         }
 
+        /// <summary>
+        /// the border style of background.        
+        /// ||背景边框样式。
+        /// </summary>
+        public BorderStyle borderStyle
+        {
+            get { return m_BorderStyle; }
+            set { if (PropertyUtil.SetClass(ref m_BorderStyle, value)) SetComponentDirty(); }
+        }
+
         public override void SetDefaultValue()
         {
             m_Show = true;

Runtime/Component/Background/BackgroundHandler.cs

@@ -12,7 +12,7 @@ namespace XCharts.Runtime
         public override void InitComponent()
         {
             component.painter = chart.painter;
-            component.refreshComponent = delegate()
+            component.refreshComponent = delegate ()
             {
                 var backgroundObj = ChartHelper.AddObject(s_BackgroundObjectName, chart.transform, chart.chartMinAnchor,
                     chart.chartMaxAnchor, chart.chartPivot, chart.chartSizeDelta);
@@ -27,7 +27,7 @@ namespace XCharts.Runtime
                 backgroundImage.color = chart.theme.GetBackgroundColor(component);
 
                 backgroundObj.transform.SetSiblingIndex(0);
-                backgroundObj.SetActive(component.show);
+                backgroundObj.SetActive(component.show && component.image != null);
             };
             component.refreshComponent();
         }
@@ -45,13 +45,13 @@ namespace XCharts.Runtime
             if (component.image != null)
                 return;
 
-            var p1 = new Vector3(chart.chartX, chart.chartY + chart.chartHeight);
-            var p2 = new Vector3(chart.chartX + chart.chartWidth, chart.chartY + chart.chartHeight);
-            var p3 = new Vector3(chart.chartX + chart.chartWidth, chart.chartY);
-            var p4 = new Vector3(chart.chartX, chart.chartY);
             var backgroundColor = chart.theme.GetBackgroundColor(component);
+            var borderWidth = component.borderStyle.GetRuntimeBorderWidth();
+            var borderColor = component.borderStyle.GetRuntimeBorderColor();
+            var cornerRadius = component.borderStyle.GetRuntimeCornerRadius();
 
-            UGL.DrawQuadrilateral(vh, p1, p2, p3, p4, backgroundColor);
+            UGL.DrawRoundRectangleWithBorder(vh, chart.chartRect, backgroundColor, backgroundColor, cornerRadius,
+                borderWidth, borderColor);
         }
     }
 }

Runtime/Internal/BaseChart.cs

@@ -146,10 +146,15 @@ namespace XCharts.Runtime
         {
             RemoveAllChartComponent();
             OnBeforeSerialize();
+
             EnsureChartComponent<Title>();
             EnsureChartComponent<Tooltip>();
             EnsureChartComponent<Title>().text = GetType().Name;
 
+            var background = EnsureChartComponent<Background>();
+            background.borderStyle.show = true;
+            background.borderStyle.cornerRadius = new float[] { 10, 10, 10, 10 };
+
             if (m_Theme.sharedTheme != null)
                 m_Theme.sharedTheme.CopyTheme(ThemeType.Default);
             else
@@ -158,7 +163,11 @@ namespace XCharts.Runtime
             var sizeDelta = rectTransform.sizeDelta;
             if (sizeDelta.x < 580 && sizeDelta.y < 300)
             {
-                rectTransform.sizeDelta = new Vector2(580, 300);
+                m_GraphWidth = 580;
+                m_GraphHeight = 300;
+                m_ChartWidth = m_GraphWidth;
+                m_ChartHeight = m_GraphHeight;
+                rectTransform.sizeDelta = new Vector2(m_ChartWidth, m_ChartHeight);
             }
             ChartHelper.HideAllObject(transform);
             if (m_OnInit != null)