前言

谷歌在2021年5月份推出的Android 12給我們帶來了新的UI設計規範Material You，你是否已經體驗到了Material You設計的魅力了呢？

在原生主螢幕啟動器中，有一個時鐘小部件。這個小部件可以選擇表盤風格。

挑戰在.NET MAU(https://dotnet.microsoft.com/en-us/apps/maui)中實作這個Material You風格時鐘。

最終效果如下：

時鐘1

繪制鋸齒表盤

鋸齒表盤是正玄波曲線閉合成一個圓形。建立Clock1，打開Xaml檔案

在頁面布局中建立一個Path對象，設定Stroke和Fill屬性。

<Path Grid.Row="0"
        Grid.Column="1"
        Stroke="white"
        Fill="#FFEED9"
        IsVisible="true"
        x:Name="ModulatedPath">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure IsClosed="True" x:Name="MainPathFigure">
                        <PathFigure.Segments>
                            <PathSegmentCollection x:Name="MainPathSegmentCollection">

                            </PathSegmentCollection>
                        </PathFigure.Segments>
                    </PathFigure>

                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

在codebehind中，訂閱SizeChanged事件，當控件大小發生變化時，重新繪制表盤。

public Clock1()
{
    InitializeComponent();
    this.SizeChanged+=ContentView_SizeChanged;
}

正弦曲線繪制原理

機關圓中的正弦函數在平面直角坐标系中可以映射為一個波形曲線，下圖所示在0-2π範圍中y=sin(x)的圖像。

其中最低點和最高點決定了波形的振幅，他們與平衡點的距離即機關圓的半徑

設定變量 r為平衡點，r2為最高點，r3為最低點。

centerX和centerY為圓心坐标。 segemts為繪制的線段數，越大鋸齒越密集。

private void ContentView_SizeChanged(object sender, EventArgs e)
{

    var length = (float)Math.Min(this.Width, this.Height) * 0.95;
    var centerX = (float)this.Width / 2;
    var centerY = (float)this.Height / 2;
    var points = new List<Point>();
    var r = length / 2;
    var r2 = r * 1.1;
    var r3 = r * 0.9;
    var index = 0;
    var segments = 40;
}

首先計算各平衡點在圓周上的離散分布坐标（x,y）

根據index的奇偶性，給與目前點最高點或最低點的半徑。

根據各配置設定的半徑計算調整後的離散點坐标

代碼如下：

...
for (var i = 0; i < segments; i += 2)
{
    var x = r * Math.Cos(i * 2 * Math.PI / segments) + centerX;
    var y = r * Math.Sin(i * 2 * Math.PI / segments) + centerY;

    points.Add(new Point((float)x, (float)y));
    var currentR = index++ % 2 == 0 ? r2 : r3;
    x = currentR * Math.Cos((i + 1) * 2 * Math.PI / segments) + centerX;
    y = currentR * Math.Sin((i + 1) * 2 * Math.PI / segments) + centerY;

    points.Add(new Point((float)x, (float)y));
}

如此，我們得到一個閉合的鋸齒圓形表盤

繪制指針

在表盤上繪制時鐘指針，需要計算時針、分針、秒針的角度，然後根據角度旋轉畫布，繪制指針。

秒針每秒鐘轉動6度，

分針每分鐘轉動6度，并疊加每秒0.1度。

時針每小時轉動30度。并疊加每分鐘0.5度。

其中時針和分針由寬度為15的實心填充圓角線條構成

DateTime dateTime = DateTime.Now;

// Hour hand
strokePaint.Color = SKColor.Parse("#5E4000");
strokePaint.StrokeWidth = 15;
canvas.Save();
canvas.RotateDegrees(30 * dateTime.Hour + dateTime.Minute / 2f);
canvas.DrawLine(0, 0, 0, -r*(float)0.4, strokePaint);
canvas.Restore();

// Minute hand
strokePaint.Color = SKColor.Parse("#9C6D00");
canvas.Save();
canvas.RotateDegrees(6 * dateTime.Minute + dateTime.Second / 10f);
canvas.DrawLine(0, 0, 0, -r*(float)0.8, strokePaint);
canvas.Restore();

// Second hand
strokePaint.Color = SKColor.Parse("#657E3F");
canvas.Save();
canvas.RotateDegrees(6 * dateTime.Second);
strokePaint.StrokeWidth *=(float)0.5;
strokePaint.Style=SKPaintStyle.Fill;
canvas.DrawCircle(0, -r*(float)0.8, strokePaint.StrokeWidth, strokePaint);
canvas.Restore();

指針效果如下：

其中秒針需要繪制一個點，在其以圓心為中心的對側繪制一個帶有日期的文本

繪制沿路徑文本

首先繪制文本路徑，它是一個圓弧，在初始狀态圓弧的角度為20度，圓弧的起始角度為70度，終止角度為110度。

var pathAngle = 20;
var startAngle = 90-pathAngle;
var sweepAngle = pathAngle*2;
var rect = new SKRect(-r*(float)0.8, -r*(float)0.8, r*(float)0.8, r*(float)0.8);

使用SkiaSharp的DrawTextOnPath方法繪制沿路徑的文本，詳情請檢視官方文檔：https://learn.microsoft.com/zh-cn/xamarin/xamarin-forms/user-interface/graphics/skiasharp/curves/text-paths

using (SKPath path = new SKPath())
{
    path.AddArc(rect, startAngle, sweepAngle);
    canvas.DrawTextOnPath(dateStr, path, new SKPoint(), strokePaint);
}

指針效果如下：

時鐘1的完整代碼如下：

void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
    SKImageInfo info = args.Info;
    SKSurface surface = args.Surface;
    SKCanvas canvas = surface.Canvas;

    canvas.Clear();

    using (SKPaint strokePaint = new SKPaint())
    using (SKPaint fillPaint = new SKPaint())
    {
        strokePaint.Style = SKPaintStyle.Stroke;
        strokePaint.StrokeCap = SKStrokeCap.Round;

        fillPaint.Style = SKPaintStyle.Fill;
        fillPaint.Color = SKColors.Transparent;

        // Transform for 100-radius circle centered at origin
        var r = 100f;
        canvas.Translate(info.Width / 2f, info.Height / 2f);
        canvas.Scale(Math.Min(info.Width / 200f, info.Height / 200f));


        DateTime dateTime = DateTime.Now;

        // Hour hand
        strokePaint.Color = SKColor.Parse("#5E4000");
        strokePaint.StrokeWidth = 15;
        canvas.Save();
        canvas.RotateDegrees(30 * dateTime.Hour + dateTime.Minute / 2f);
        canvas.DrawLine(0, 0, 0, -r*(float)0.4, strokePaint);
        canvas.Restore();

        // Minute hand
        strokePaint.Color = SKColor.Parse("#9C6D00");
        canvas.Save();
        canvas.RotateDegrees(6 * dateTime.Minute + dateTime.Second / 10f);
        canvas.DrawLine(0, 0, 0, -r*(float)0.62, strokePaint);
        canvas.Restore();

        // Second hand
        strokePaint.Color = SKColor.Parse("#657E3F");
        canvas.Save();
        canvas.RotateDegrees(6 * dateTime.Second);
        strokePaint.StrokeWidth *=(float)0.5;
        strokePaint.Style=SKPaintStyle.Fill;

        canvas.DrawCircle(0, -r*(float)0.8, strokePaint.StrokeWidth, strokePaint);

        strokePaint.Color = SKColors.Black;
        strokePaint.StrokeWidth = 1;
        var dateStr = dateTime.ToString("M");
        var pathAngle = 20;
        var startAngle = 90-pathAngle;
        var sweepAngle = pathAngle*2;
        var rect = new SKRect(-r*(float)0.8, -r*(float)0.8, r*(float)0.8, r*(float)0.8);

        using (SKPath path = new SKPath())
        {
            path.AddArc(rect, startAngle, sweepAngle);

            //canvas.DrawPath(path, strokePaint);

            canvas.DrawTextOnPath(dateStr, path, new SKPoint(), strokePaint);
        }


        canvas.Restore();
    }
}

配置一個定時器，每秒重新整理各指針位置

IDispatcherTimer _timer;

public Clock1()
{
   
    ...
    this.SizeChanged+=ContentView_SizeChanged;
    _timer=  Dispatcher.CreateTimer();
    _timer.Interval=TimeSpan.FromSeconds(1);
    _timer.Tick+=_timer_Tick;
    _timer.Start();
}

private void _timer_Tick(object sender, EventArgs e)
{
    this.canvasView?.InvalidateSurface();
}

時鐘1 效果如下：

時鐘2

将URWGeometricBlack字型檔案放到Fonts目錄下

在MauiProgram.cs中注冊字型

.ConfigureFonts(fonts =>
{
    ...
    fonts.AddFont("URWGeometricBlack.otf", "URWGeometricBlack");

});

繪制表盤

時鐘2的表盤相對簡單，是一個簡單的圓配簡潔抽象的數字刻度組成建立Clock2，打開Xaml檔案，代碼如下：

<Grid>
    <Ellipse Grid.Row="0"
                Grid.Column="1"
                Stroke="white"
                Fill="#FFEED9"
                IsVisible="true"
                HeightRequest="200"
                WidthRequest="200"
                x:Name="ModulatedPath">
    </Ellipse>
    <Grid TranslationY="-15">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Label   Grid.Row="0"
                    Grid.ColumnSpan="2"
                    Text="12"
                    Style="{StaticResource ClockPlateNumberLabelStyle}"></Label>

        <Label   Grid.RowSpan="2"
                    Grid.Column="1"
                    Text="3"
                    Style="{StaticResource ClockPlateNumberLabelStyle}"></Label>

        <Label   Grid.Row="1"
                    Grid.ColumnSpan="2"
                    Text="6"
                    Style="{StaticResource ClockPlateNumberLabelStyle}"></Label>

        <Label   Grid.RowSpan="2"
                    Grid.Column="0"
                    Text="9"
                    Style="{StaticResource ClockPlateNumberLabelStyle}"></Label>

    </Grid>
    <forms:SKCanvasView x:Name="canvasView"
                        PaintSurface="OnCanvasViewPaintSurface" />
    <Label FontSize="28"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            x:Name="labelView"></Label>
</Grid>

同樣我們需要放置SKCanvasView對象用于繪制指針

其中ClockPlateNumberLabelStyle定義如下：

<Style TargetType="Label"
        x:Key="ClockPlateNumberLabelStyle">
    <Setter Property="HorizontalTextAlignment"
            Value="Center"></Setter>
    <Setter Property="VerticalTextAlignment"
            Value="Center"></Setter>
    <Setter Property="VerticalOptions"
            Value="Center"></Setter>
    <Setter Property="FontAttributes"
            Value="Bold"></Setter>
    <Setter Property="FontSize"
            Value="120"></Setter>
    <Setter Property="TextColor"
            Value="#F9BC49"></Setter>
    <Setter Property="FontFamily"
            Value="URWGeometricBlack"></Setter>
</Style>

效果如下：

繪制指針

時鐘2的指針繪制原理與時鐘1類似，此處将不贅述，完整代碼如下：

void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
    SKImageInfo info = args.Info;
    SKSurface surface = args.Surface;
    SKCanvas canvas = surface.Canvas;

    canvas.Clear();

    using (SKPaint strokePaint = new SKPaint())
    using (SKPaint fillPaint = new SKPaint())
    {
        strokePaint.Style = SKPaintStyle.Stroke;
        strokePaint.StrokeCap = SKStrokeCap.Round;

        fillPaint.Style = SKPaintStyle.Fill;
        fillPaint.Color = SKColors.Transparent;

        // Transform for 100-radius circle centered at origin
        var r = 100f;
        canvas.Translate(info.Width / 2f, info.Height / 2f);
        canvas.Scale(Math.Min(info.Width / 200f, info.Height / 200f));


        DateTime dateTime = DateTime.Now;

        // Hour hand
        strokePaint.Color = SKColor.Parse("#5E4000");
        strokePaint.StrokeWidth = 15;
        canvas.Save();
        canvas.RotateDegrees(30 * dateTime.Hour + dateTime.Minute / 2f);
        canvas.DrawLine(0, 0, 0, -r*(float)0.4, strokePaint);
        canvas.Restore();

        // Minute hand
        strokePaint.Color = SKColor.Parse("#9C6D00");
        strokePaint.StrokeWidth = 5;
        canvas.Save();
        canvas.RotateDegrees(6 * dateTime.Minute + dateTime.Second / 10f);
        canvas.DrawLine(0, 0, 0, -r*(float)0.8, strokePaint);
        canvas.Restore();

        // Second hand
        strokePaint.Color = SKColor.Parse("#657E3F");
        strokePaint.StrokeWidth = 2;
        canvas.Save();
        canvas.RotateDegrees(6 * dateTime.Second);
        canvas.DrawLine(0, r*(float)0.1, 0, -r*(float)0.8, strokePaint);
        strokePaint.Style=SKPaintStyle.Fill;
        canvas.DrawCircle(0, 0, 5, strokePaint);

        canvas.Restore();
    }
}

時鐘2 效果如下

項目位址

Github:maui-samples：https://github.com/jevonsflash/maui-samples

.NET MAUI 中實作兩個漂亮的時鐘

繪制指針

繪制表盤

繪制指針

繼續閱讀

剪貼闆大觀園（二）：剪貼闆間諜（ClipSpy）

學Silverlight 2系列(22)：在Silverlight中用JavaScript調用.NET代碼

面向對象與領域模組化

對自己發展的一些思考

Debug時檢測到Loaderlock的解決辦法

淺談MFC圖示

.NET程式員的技能分析參考V1.0(有附件)

asp.net AspNetpager的用法

在angularjs中通過ts編寫時，如何添加中英文轉換

msdn 訪談錄之C＃程式設計二

使用Windbg調試.Net應用程式

部署.net平台的應用程式

Robot Framework配置發送郵件功能

II6 IIS7 下 asp.net的生命周期 ASP.NET Application Life Cycle Overview for IIS 5.0 and 6.0

2010年終總結--技術篇

如何成為一名.net 工程師?