增加BackgroundborderStyle,给图表默认设置圆角

This commit is contained in:
monitor1394
2024-01-11 08:03:36 +08:00
parent c3489fbc1e
commit 318bdcb1f2
9 changed files with 39 additions and 13 deletions

View File

@@ -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()|

View File

@@ -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.

View File

@@ -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()|

View File

@@ -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`参数支持

View File

@@ -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||网格边框宽。

View File

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

View File

@@ -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;

View File

@@ -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);
}
}
}

View File

@@ -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)
@@ -198,7 +207,7 @@ namespace XCharts.Runtime
foreach (var handler in m_SerieHandlers) handler.Update();
foreach (var handler in m_ComponentHandlers) handler.Update();
foreach (var handler in m_SerieHandlers) handler.AfterUpdate();
m_DebugInfo.Update();
if (m_OnUpdate != null)
m_OnUpdate();