Avalonia跨平台入门第二十八篇之仪表盘

WPF程序员

发布于 2024-02-01 12:38:51

1760

发布于 2024-02-01 12:38:51

在前面Avalonia跨平台入门第二十六篇之移动端中分享了仪表盘的效果，今天咱就来分享一下具体实现的过程,再来看一下效果:

1、先把SweepAngle绑定到Slider的Value上:

<Arc StartAngle="-180" SweepAngle="{Binding Value, ElementName=Slder}"
   StrokeThickness="10"  Width="162" Height="162">
    <Arc.Stroke>
        <LinearGradientBrush StartPoint="100%,0%" EndPoint="0%,0%">
            <GradientStop Color="#DB3529" Offset="0.0" />
            <GradientStop Color="#E66400" Offset="0.33" />
            <GradientStop Color="#4CB34C" Offset="0.7" />
            <GradientStop Color="#30BF7F" Offset="1.0" />
        </LinearGradientBrush>
    </Arc.Stroke>
</Arc>

2、自定义一个环形刻度集合:

<Cores:RadialTicks Margin="0,80,0,0" TicksCount="10"/>

3、重写Render:

double startAngle = Math.PI;
for (int i = 0; i < ticksCount; i++)
{
  double angle = startAngle - step * i; // Calculate angle from the left side
  double cosAngle = Math.Cos(angle);
  double sinAngle = Math.Sin(angle);
  double startX = centerX + radius * cosAngle;
  double startY = centerY - radius * sinAngle; // Y axis is positive downwards
  Point startPoint = new Point(startX, startY);
  double endX = centerX + innerRadius * cosAngle;
  double endY = centerY - innerRadius * sinAngle; // Y axis is positive downwards
  Point endPoint = new Point(endX, endY);
  context.DrawLine(pen, startPoint, endPoint);
}

4、先这么组合玩,回头可以封装一下:

<Grid Width="162" Height="162">
    <Cores:RadialTicks TicksCount="10" Radius="60"/>
    <Arc StartAngle="-180" SweepAngle="180" StrokeThickness="10" Stroke="#5D6B94" Width="162" Height="162"/>
    <Arc StartAngle="-180" SweepAngle="{Binding Value, ElementName=Slder2}" StrokeThickness="10"  Width="162" Height="162"
           Stroke="{Binding Value, ElementName=Slder2,Converter={StaticResource ValueToArcStrokeConverter}}"></Arc>
    <Grid   Width="162" Height="162" RenderTransformOrigin="50%,50%">
        <Grid.RenderTransform >
            <RotateTransform Angle="{Binding Value, ElementName=Slder2}"/>
        </Grid.RenderTransform>
        <Path Data="M0 512.13l417.03-63.92L512 512l-94.97 64.05z"
              Fill="#5D6B94" HorizontalAlignment="Center" VerticalAlignment="Center" Height="20" Width="80" Stretch="Uniform"
              RenderTransformOrigin="50%,50%"></Path>
    </Grid>
</Grid>

5、最后为了Stroke来了个转换器:

int dataValue = Convert.ToInt32(value);
if(dataValue <= 90)
{
    var color = Color.Parse("#4CB34C");
    SolidColorBrush brush = new SolidColorBrush(color);
    return brush;
}
else
{
    LinearGradientBrush brush = new LinearGradientBrush();
    brush.StartPoint = Avalonia.RelativePoint.BottomRight;
    brush.EndPoint = Avalonia.RelativePoint.TopLeft;
    brush.GradientStops.Add(new GradientStop()
    {
        Color = Color.Parse("#E66400"), Offset = 0.33
    });
    brush.GradientStops.Add(new GradientStop()
    {
        Color = Color.Parse("#4CB34C"), Offset = 0.7
    });
    brush.GradientStops.Add(new GradientStop()
    {
        Color = Color.Parse("#30BF7F"), Offset = 1.0
    });
    if(dataValue >= 150)
    {
        brush.GradientStops.Insert(0, new GradientStop()
        {
            Color = Color.Parse("#FF0000"), Offset = 0.0
        });
    }
    return brush;
}

最终简单的效果先这样吧

本文参与?腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2024-01-27，如有侵权请联系?cloudcommunity@tencent.com 删除

集合