增加BorderStyle边框样式

2026-05-14 20:00:09 +00:00 · 2024-01-01 22:57:50 +08:00
parent a3533dbc02
commit 91db00a173
9 changed files with 219 additions and 4 deletions
--- a/Documentation~/en/api.md
+++ b/Documentation~/en/api.md
@@ -45,6 +45,7 @@ slug: /api
 - [BaseScatter](#basescatter)
 - [BaseSerie](#baseserie)
 - [BlurStyle](#blurstyle)
+- [BorderStyle](#borderstyle)
 - [CalendarCoord](#calendarcoord)
 - [Candlestick](#candlestick)
 - [CandlestickChart](#candlestickchart)
@@ -939,6 +940,20 @@ Settings related to base line.

 Configurations of blur state.

+## BorderStyle
+
+> class in XCharts.Runtime / Inherits from: [ChildComponent](#childcomponent)
+
+> Since `v3.10.0`
+
+The style of border.
+
+|public method|since|description|
+|--|--|--|
+|GetRuntimeBorderColor()||public Color32 GetRuntimeBorderColor()|
+|GetRuntimeBorderWidth()||public float GetRuntimeBorderWidth()|
+|GetRuntimeCornerRadius()||public float[] GetRuntimeCornerRadius()|
+
 ## CalendarCoord

 > class in XCharts.Runtime / Inherits from: [CoordSystem](#coordsystem),[IUpdateRuntimeData](#iupdateruntimedata),[ISerieContainer](#iseriecontainer)
@@ -1138,7 +1153,7 @@ Configurations of blur state.

 ## ChildComponent

-> class in XCharts.Runtime / Subclasses: [AnimationStyle](#animationstyle),[AxisAnimation](#axisanimation),[AxisName](#axisname),[AxisSplitArea](#axissplitarea),[AreaStyle](#areastyle),[ArrowStyle](#arrowstyle),[BaseLine](#baseline),[IconStyle](#iconstyle),[ImageStyle](#imagestyle),[ItemStyle](#itemstyle),[Level](#level),[LevelStyle](#levelstyle),[LineArrow](#linearrow),[LineStyle](#linestyle),[Location](#location),[MLValue](#mlvalue),[MarqueeStyle](#marqueestyle),[Padding](#padding),[StageColor](#stagecolor),[SymbolStyle](#symbolstyle),[TextLimit](#textlimit),[TextStyle](#textstyle),[CommentItem](#commentitem),[CommentMarkStyle](#commentmarkstyle),[LabelLine](#labelline),[LabelStyle](#labelstyle),[MarkAreaData](#markareadata),[MarkLineData](#marklinedata),[StateStyle](#statestyle),[VisualMapRange](#visualmaprange),[UIComponentTheme](#uicomponenttheme),[SerieData](#seriedata),[SerieDataLink](#seriedatalink),[ComponentTheme](#componenttheme),[SerieTheme](#serietheme),[ThemeStyle](#themestyle) 
+> class in XCharts.Runtime / Subclasses: [AnimationStyle](#animationstyle),[AxisAnimation](#axisanimation),[AxisName](#axisname),[AxisSplitArea](#axissplitarea),[AreaStyle](#areastyle),[ArrowStyle](#arrowstyle),[BaseLine](#baseline),[BorderStyle](#borderstyle),[IconStyle](#iconstyle),[ImageStyle](#imagestyle),[ItemStyle](#itemstyle),[Level](#level),[LevelStyle](#levelstyle),[LineArrow](#linearrow),[LineStyle](#linestyle),[Location](#location),[MLValue](#mlvalue),[MarqueeStyle](#marqueestyle),[Padding](#padding),[StageColor](#stagecolor),[SymbolStyle](#symbolstyle),[TextLimit](#textlimit),[TextStyle](#textstyle),[CommentItem](#commentitem),[CommentMarkStyle](#commentmarkstyle),[LabelLine](#labelline),[LabelStyle](#labelstyle),[MarkAreaData](#markareadata),[MarkLineData](#marklinedata),[StateStyle](#statestyle),[VisualMapRange](#visualmaprange),[UIComponentTheme](#uicomponenttheme),[SerieData](#seriedata),[SerieDataLink](#seriedatalink),[ComponentTheme](#componenttheme),[SerieTheme](#serietheme),[ThemeStyle](#themestyle) 


 |public method|since|description|
--- a/Documentation~/en/configuration.md
+++ b/Documentation~/en/configuration.md
@@ -94,6 +94,7 @@ import APITable from '@site/src/components/APITable';
 - [BaseAxisTheme](#baseaxistheme)
 - [BaseLine](#baseline)
 - [BlurStyle](#blurstyle)
+- [BorderStyle](#borderstyle)
 - [CommentItem](#commentitem)
 - [CommentMarkStyle](#commentmarkstyle)
 - [ComponentTheme](#componenttheme)
@@ -731,6 +732,31 @@ Settings related to base line.

 Configurations of blur state.

+## BorderStyle
+
+> class in XCharts.Runtime / Inherits from: [ChildComponent](#childcomponent)
+
+> Since `v3.10.0`
+
+The style of border.
+
+```mdx-code-block
+<APITable name="BorderStyle">
+```
+
+
+|field|default|since|comment|
+|--|--|--|--|
+|show|false||whether the border is visible.
+|borderWidth|||the width of border.
+|borderColor|||the color of border.
+|roundedCorner|true||whether the border is rounded corner.
+|cornerRadius|||The radius of rounded corner. Its unit is px. Use array to respectively specify the 4 corner radiuses((clockwise upper left, upper right, bottom right and bottom left)). When is set to (1,1,1,1), all corners are rounded.
+
+```mdx-code-block
+</APITable>
+```
+
 ## CalendarCoord

 > class in XCharts.Runtime / Inherits from: [CoordSystem](#coordsystem), [IUpdateRuntimeData](#iupdateruntimedata), [ISerieContainer](#iseriecontainer)
@@ -745,7 +771,7 @@ Configurations of blur state.

 ## ChildComponent

-> class in XCharts.Runtime / Subclasses: [AnimationStyle](#animationstyle), [AxisAnimation](#axisanimation), [AxisName](#axisname), [AxisSplitArea](#axissplitarea), [AreaStyle](#areastyle), [ArrowStyle](#arrowstyle), [BaseLine](#baseline), [IconStyle](#iconstyle), [ImageStyle](#imagestyle), [ItemStyle](#itemstyle), [Level](#level), [LevelStyle](#levelstyle), [LineArrow](#linearrow), [LineStyle](#linestyle), [Location](#location), [MLValue](#mlvalue), [MarqueeStyle](#marqueestyle), [Padding](#padding), [StageColor](#stagecolor), [SymbolStyle](#symbolstyle), [TextLimit](#textlimit), [TextStyle](#textstyle), [CommentItem](#commentitem), [CommentMarkStyle](#commentmarkstyle), [LabelLine](#labelline), [LabelStyle](#labelstyle), [MarkAreaData](#markareadata), [MarkLineData](#marklinedata), [StateStyle](#statestyle), [VisualMapRange](#visualmaprange), [UIComponentTheme](#uicomponenttheme), [SerieData](#seriedata), [SerieDataLink](#seriedatalink), [ComponentTheme](#componenttheme), [SerieTheme](#serietheme), [ThemeStyle](#themestyle)
+> class in XCharts.Runtime / Subclasses: [AnimationStyle](#animationstyle), [AxisAnimation](#axisanimation), [AxisName](#axisname), [AxisSplitArea](#axissplitarea), [AreaStyle](#areastyle), [ArrowStyle](#arrowstyle), [BaseLine](#baseline), [BorderStyle](#borderstyle), [IconStyle](#iconstyle), [ImageStyle](#imagestyle), [ItemStyle](#itemstyle), [Level](#level), [LevelStyle](#levelstyle), [LineArrow](#linearrow), [LineStyle](#linestyle), [Location](#location), [MLValue](#mlvalue), [MarqueeStyle](#marqueestyle), [Padding](#padding), [StageColor](#stagecolor), [SymbolStyle](#symbolstyle), [TextLimit](#textlimit), [TextStyle](#textstyle), [CommentItem](#commentitem), [CommentMarkStyle](#commentmarkstyle), [LabelLine](#labelline), [LabelStyle](#labelstyle), [MarkAreaData](#markareadata), [MarkLineData](#marklinedata), [StateStyle](#statestyle), [VisualMapRange](#visualmaprange), [UIComponentTheme](#uicomponenttheme), [SerieData](#seriedata), [SerieDataLink](#seriedatalink), [ComponentTheme](#componenttheme), [SerieTheme](#serietheme), [ThemeStyle](#themestyle)

 ## Comment

--- a/Documentation~/zh/api.md
+++ b/Documentation~/zh/api.md
@@ -45,6 +45,7 @@ slug: /api
 - [BaseScatter](#basescatter)
 - [BaseSerie](#baseserie)
 - [BlurStyle](#blurstyle)
+- [BorderStyle](#borderstyle)
 - [CalendarCoord](#calendarcoord)
 - [Candlestick](#candlestick)
 - [CandlestickChart](#candlestickchart)
@@ -939,6 +940,20 @@ slug: /api

 淡出状态样式。

+## BorderStyle
+
+> class in XCharts.Runtime / 继承自: [ChildComponent](#childcomponent)
+
+> 从 `v3.10.0` 开始支持
+
+边框样式。
+
+|API|版本|描述|
+|--|--|--|
+|GetRuntimeBorderColor()||public Color32 GetRuntimeBorderColor()|
+|GetRuntimeBorderWidth()||public float GetRuntimeBorderWidth()|
+|GetRuntimeCornerRadius()||public float[] GetRuntimeCornerRadius()|
+
 ## CalendarCoord

 > class in XCharts.Runtime / 继承自: [CoordSystem](#coordsystem),[IUpdateRuntimeData](#iupdateruntimedata),[ISerieContainer](#iseriecontainer)
@@ -1138,7 +1153,7 @@ slug: /api

 ## ChildComponent

-> class in XCharts.Runtime / 子类: [AnimationStyle](#animationstyle),[AxisAnimation](#axisanimation),[AxisName](#axisname),[AxisSplitArea](#axissplitarea),[AreaStyle](#areastyle),[ArrowStyle](#arrowstyle),[BaseLine](#baseline),[IconStyle](#iconstyle),[ImageStyle](#imagestyle),[ItemStyle](#itemstyle),[Level](#level),[LevelStyle](#levelstyle),[LineArrow](#linearrow),[LineStyle](#linestyle),[Location](#location),[MLValue](#mlvalue),[MarqueeStyle](#marqueestyle),[Padding](#padding),[StageColor](#stagecolor),[SymbolStyle](#symbolstyle),[TextLimit](#textlimit),[TextStyle](#textstyle),[CommentItem](#commentitem),[CommentMarkStyle](#commentmarkstyle),[LabelLine](#labelline),[LabelStyle](#labelstyle),[MarkAreaData](#markareadata),[MarkLineData](#marklinedata),[StateStyle](#statestyle),[VisualMapRange](#visualmaprange),[UIComponentTheme](#uicomponenttheme),[SerieData](#seriedata),[SerieDataLink](#seriedatalink),[ComponentTheme](#componenttheme),[SerieTheme](#serietheme),[ThemeStyle](#themestyle) 
+> class in XCharts.Runtime / 子类: [AnimationStyle](#animationstyle),[AxisAnimation](#axisanimation),[AxisName](#axisname),[AxisSplitArea](#axissplitarea),[AreaStyle](#areastyle),[ArrowStyle](#arrowstyle),[BaseLine](#baseline),[BorderStyle](#borderstyle),[IconStyle](#iconstyle),[ImageStyle](#imagestyle),[ItemStyle](#itemstyle),[Level](#level),[LevelStyle](#levelstyle),[LineArrow](#linearrow),[LineStyle](#linestyle),[Location](#location),[MLValue](#mlvalue),[MarqueeStyle](#marqueestyle),[Padding](#padding),[StageColor](#stagecolor),[SymbolStyle](#symbolstyle),[TextLimit](#textlimit),[TextStyle](#textstyle),[CommentItem](#commentitem),[CommentMarkStyle](#commentmarkstyle),[LabelLine](#labelline),[LabelStyle](#labelstyle),[MarkAreaData](#markareadata),[MarkLineData](#marklinedata),[StateStyle](#statestyle),[VisualMapRange](#visualmaprange),[UIComponentTheme](#uicomponenttheme),[SerieData](#seriedata),[SerieDataLink](#seriedatalink),[ComponentTheme](#componenttheme),[SerieTheme](#serietheme),[ThemeStyle](#themestyle) 


 |API|版本|描述|
--- a/Documentation~/zh/changelog.md
+++ b/Documentation~/zh/changelog.md
@@ -70,6 +70,7 @@ slug: /changelog

 ## master

+* (2023.12.26) 增加`BorderStyle`边框样式
 * (2023.12.26) 增加`Heatmap`的`maxCache`参数支持
 * (2023.12.25) 优化`Line`开启`clip`时绘制的顶点数
 * (2023.12.22) 修复`Scatter`散点图部分边界数据不显示的问题
--- a/Documentation~/zh/configuration.md
+++ b/Documentation~/zh/configuration.md
@@ -94,6 +94,7 @@ import APITable from '@site/src/components/APITable';
 - [BaseAxisTheme](#baseaxistheme)
 - [BaseLine](#baseline)
 - [BlurStyle](#blurstyle)
+- [BorderStyle](#borderstyle)
 - [CommentItem](#commentitem)
 - [CommentMarkStyle](#commentmarkstyle)
 - [ComponentTheme](#componenttheme)
@@ -712,6 +713,30 @@ import APITable from '@site/src/components/APITable';

 淡出状态样式。

+## BorderStyle
+
+> class in XCharts.Runtime / 继承自: [ChildComponent](#childcomponent)
+
+> 从 `v3.10.0` 开始支持
+
+边框样式。
+
+```mdx-code-block
+<APITable name="BorderStyle">
+```
+
+|参数|默认|版本|描述|
+|--|--|--|--|
+|show|false||是否显示边框。
+|borderWidth|||边框宽度。
+|borderColor|||边框颜色。
+|roundedCorner|true||是否显示圆角。
+|cornerRadius|||圆角半径。用数组分别指定4个圆角半径（顺时针左上，右上，右下，左下）。当为(1,1,1,1)时为全圆角。
+
+```mdx-code-block
+</APITable>
+```
+
 ## CalendarCoord

 > class in XCharts.Runtime / 继承自: [CoordSystem](#coordsystem), [IUpdateRuntimeData](#iupdateruntimedata), [ISerieContainer](#iseriecontainer)
@@ -726,7 +751,7 @@ import APITable from '@site/src/components/APITable';

 ## ChildComponent

-> class in XCharts.Runtime / 子类: [AnimationStyle](#animationstyle), [AxisAnimation](#axisanimation), [AxisName](#axisname), [AxisSplitArea](#axissplitarea), [AreaStyle](#areastyle), [ArrowStyle](#arrowstyle), [BaseLine](#baseline), [IconStyle](#iconstyle), [ImageStyle](#imagestyle), [ItemStyle](#itemstyle), [Level](#level), [LevelStyle](#levelstyle), [LineArrow](#linearrow), [LineStyle](#linestyle), [Location](#location), [MLValue](#mlvalue), [MarqueeStyle](#marqueestyle), [Padding](#padding), [StageColor](#stagecolor), [SymbolStyle](#symbolstyle), [TextLimit](#textlimit), [TextStyle](#textstyle), [CommentItem](#commentitem), [CommentMarkStyle](#commentmarkstyle), [LabelLine](#labelline), [LabelStyle](#labelstyle), [MarkAreaData](#markareadata), [MarkLineData](#marklinedata), [StateStyle](#statestyle), [VisualMapRange](#visualmaprange), [UIComponentTheme](#uicomponenttheme), [SerieData](#seriedata), [SerieDataLink](#seriedatalink), [ComponentTheme](#componenttheme), [SerieTheme](#serietheme), [ThemeStyle](#themestyle)
+> class in XCharts.Runtime / 子类: [AnimationStyle](#animationstyle), [AxisAnimation](#axisanimation), [AxisName](#axisname), [AxisSplitArea](#axissplitarea), [AreaStyle](#areastyle), [ArrowStyle](#arrowstyle), [BaseLine](#baseline), [BorderStyle](#borderstyle), [IconStyle](#iconstyle), [ImageStyle](#imagestyle), [ItemStyle](#itemstyle), [Level](#level), [LevelStyle](#levelstyle), [LineArrow](#linearrow), [LineStyle](#linestyle), [Location](#location), [MLValue](#mlvalue), [MarqueeStyle](#marqueestyle), [Padding](#padding), [StageColor](#stagecolor), [SymbolStyle](#symbolstyle), [TextLimit](#textlimit), [TextStyle](#textstyle), [CommentItem](#commentitem), [CommentMarkStyle](#commentmarkstyle), [LabelLine](#labelline), [LabelStyle](#labelstyle), [MarkAreaData](#markareadata), [MarkLineData](#marklinedata), [StateStyle](#statestyle), [VisualMapRange](#visualmaprange), [UIComponentTheme](#uicomponenttheme), [SerieData](#seriedata), [SerieDataLink](#seriedatalink), [ComponentTheme](#componenttheme), [SerieTheme](#serietheme), [ThemeStyle](#themestyle)

 ## Comment

--- a/Editor/ChildComponents/BorderStyleDrawer.cs
+++ b/Editor/ChildComponents/BorderStyleDrawer.cs
@@ -0,0 +1,25 @@
+using UnityEditor;
+using UnityEngine;
+using XCharts.Runtime;
+
+namespace XCharts.Editor
+{
+    [CustomPropertyDrawer(typeof(BorderStyle), true)]
+    public class BorderStyleDrawer : BasePropertyDrawer
+    {
+        public override string ClassName { get { return "Border"; } }
+        public override void OnGUI(Rect pos, SerializedProperty prop, GUIContent label)
+        {
+            base.OnGUI(pos, prop, label);
+            if (MakeComponentFoldout(prop, "m_Show", true))
+            {
+                ++EditorGUI.indentLevel;
+                PropertyField(prop, "m_BorderWidth");
+                PropertyField(prop, "m_BorderColor");
+                PropertyField(prop, "m_RoundedCorner");
+                PropertyListField(prop, "m_CornerRadius", true);
+                --EditorGUI.indentLevel;
+            }
+        }
+    }
+}
--- a/Editor/ChildComponents/BorderStyleDrawer.cs.meta
+++ b/Editor/ChildComponents/BorderStyleDrawer.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: 47a460215ec5e4ec0bc7f8122a44302a
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
--- a/Runtime/Component/Child/BorderStyle.cs
+++ b/Runtime/Component/Child/BorderStyle.cs
@@ -0,0 +1,86 @@
+using UnityEngine;
+using UnityEngine.UI;
+
+namespace XCharts.Runtime
+{
+    /// <summary>
+    /// The style of border.
+    /// ||边框样式。
+    /// </summary>
+    [System.Serializable]
+    [Since("v3.10.0")]
+    public class BorderStyle : ChildComponent
+    {
+        [SerializeField] private bool m_Show = false;
+        [SerializeField] private float m_BorderWidth;
+        [SerializeField] private Color32 m_BorderColor;
+        [SerializeField] private bool m_RoundedCorner = true;
+        [SerializeField] private float[] m_CornerRadius = new float[] { 0, 0, 0, 0 };
+
+        /// <summary>
+        /// whether the border is visible.
+        /// ||是否显示边框。
+        /// </summary>
+        public bool show
+        {
+            get { return m_Show; }
+            set { if (PropertyUtil.SetStruct(ref m_Show, value)) SetAllDirty(); }
+        }
+
+        /// <summary>
+        /// the width of border.
+        /// ||边框宽度。
+        /// </summary>
+        public float borderWidth
+        {
+            get { return m_BorderWidth; }
+            set { if (PropertyUtil.SetStruct(ref m_BorderWidth, value)) SetAllDirty(); }
+        }
+
+        /// <summary>
+        /// the color of border.
+        /// ||边框颜色。
+        /// </summary>
+        public Color32 borderColor
+        {
+            get { return m_BorderColor; }
+            set { if (PropertyUtil.SetColor(ref m_BorderColor, value)) SetAllDirty(); }
+        }
+
+        /// <summary>
+        /// whether the border is rounded corner.
+        /// ||是否显示圆角。
+        /// </summary>
+        public bool roundedCorner
+        {
+            get { return m_RoundedCorner; }
+            set { if (PropertyUtil.SetStruct(ref m_RoundedCorner, value)) SetAllDirty(); }
+        }
+
+        /// <summary>
+        /// The radius of rounded corner. Its unit is px. Use array to respectively specify the 4 corner radiuses((clockwise upper left, 
+        /// upper right, bottom right and bottom left)). When is set to (1,1,1,1), all corners are rounded.
+        /// ||圆角半径。用数组分别指定4个圆角半径（顺时针左上，右上，右下，左下）。当为(1,1,1,1)时为全圆角。
+        /// </summary>
+        public float[] cornerRadius
+        {
+            get { return m_CornerRadius; }
+            set { if (PropertyUtil.SetClass(ref m_CornerRadius, value)) SetAllDirty(); }
+        }
+
+        public float GetRuntimeBorderWidth()
+        {
+            return m_Show ? m_BorderWidth : 0;
+        }
+
+        public Color32 GetRuntimeBorderColor()
+        {
+            return m_Show ? m_BorderColor : ColorUtil.clearColor32;
+        }
+
+        public float[] GetRuntimeCornerRadius()
+        {
+            return m_Show && roundedCorner ? m_CornerRadius : null;
+        }
+    }
+}
--- a/Runtime/Component/Child/BorderStyle.cs.meta
+++ b/Runtime/Component/Child/BorderStyle.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: 0a756cb373aab4292b93a0597fc4e82c
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: