1
0
mirror of https://github.com/ppy/osu.git synced 2025-03-23 16:27:20 +08:00

Finish up design implementation of timing distribution graph

This commit is contained in:
smoogipoo 2020-06-12 18:50:25 +09:00
parent 3b630eabd6
commit 6217fb26da

View File

@ -8,6 +8,8 @@ using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
using osu.Game.Rulesets.Osu.Scoring;
using osuTK;
@ -21,7 +23,7 @@ namespace osu.Game.Tests.Visual.Ranking
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Size = new Vector2(300, 100)
Size = new Vector2(400, 130)
});
}
@ -58,6 +60,17 @@ namespace osu.Game.Tests.Visual.Ranking
public class TimingDistributionGraph : CompositeDrawable
{
/// <summary>
/// The number of data points shown on the axis below the graph.
/// </summary>
private const float axis_points = 5;
/// <summary>
/// An amount to adjust the value of the axis points by, effectively insetting the axis in the graph.
/// Without an inset, the final data point will be placed halfway outside the graph.
/// </summary>
private const float axis_value_inset = 0.2f;
private readonly TimingDistribution distribution;
public TimingDistributionGraph(TimingDistribution distribution)
@ -74,11 +87,79 @@ namespace osu.Game.Tests.Visual.Ranking
for (int i = 0; i < bars.Length; i++)
bars[i] = new Bar { Height = (float)distribution.Bins[i] / maxCount };
Container axisFlow;
InternalChild = new GridContainer
{
RelativeSizeAxes = Axes.Both,
Content = new[] { bars }
Content = new[]
{
new Drawable[]
{
new GridContainer
{
RelativeSizeAxes = Axes.Both,
Content = new[] { bars }
}
},
new Drawable[]
{
axisFlow = new Container
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y
}
},
},
RowDimensions = new[]
{
new Dimension(),
new Dimension(GridSizeMode.AutoSize),
}
};
// We know the total number of bins on each side of the centre ((n - 1) / 2), and the size of each bin.
// So our axis will contain one centre element + 5 points on each side, each with a value depending on the number of bins * bin size.
int sideBins = (distribution.Bins.Length - 1) / 2;
double maxValue = sideBins * distribution.BinSize;
double axisValueStep = maxValue / axis_points * (1 - axis_value_inset);
axisFlow.Add(new OsuSpriteText
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Text = "0",
Font = OsuFont.GetFont(size: 12, weight: FontWeight.SemiBold)
});
for (int i = 1; i <= axis_points; i++)
{
double axisValue = i * axisValueStep;
float position = (float)(axisValue / maxValue);
float alpha = 1f - position * 0.8f;
axisFlow.Add(new OsuSpriteText
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
RelativePositionAxes = Axes.X,
X = -position / 2,
Alpha = alpha,
Text = axisValue.ToString("-0"),
Font = OsuFont.GetFont(size: 12, weight: FontWeight.SemiBold)
});
axisFlow.Add(new OsuSpriteText
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
RelativePositionAxes = Axes.X,
X = position / 2,
Alpha = alpha,
Text = axisValue.ToString("+0"),
Font = OsuFont.GetFont(size: 12, weight: FontWeight.SemiBold)
});
}
}
private class Bar : CompositeDrawable