[MAUI]用纯C#代码写两个漂亮的时钟

已于 2023-07-01 19:40:35 修改
阅读量1.1k 收藏 10
点赞数
分类专栏： .NET MAUI 产品设计 文章标签： c# xamarin maui
于 2023-07-01 19:32:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jevonsflash/article/details/131335776
版权

文章目录


谷歌在2021年5月份推出的Android 12给我们带来了新的UI设计规范Material You，你是否已经体验到了Material You设计的魅力了呢？

在原生主屏幕启动器中，有一个时钟小部件。这个小部件可以选择表盘风格。

在这里插入图片描述

图：Android 12的时钟小部件

今天挑战在.NET MAU中实现这个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方法绘制沿路径的文本，详情请查看官方文档

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

林晓lx
关注
专栏目录
c#时钟
luo的专栏
03-13 997
<br />    自己做的时钟可能不好请大家见谅<br />    我是用timer语句做的因为执行程序是有时间延迟所以timer的周期不是1秒<br /> <br />using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms;
用c#做一个时钟
12-27
简单实用的文本，用c#做一个简单的小时钟
基于 C# 和 MAUI 跨平台开发, 完全开源的记事 App
最新发布
dotNET跨平台
07-27 83
欢迎来到 Dotnet 工具箱！在这里，你可以发现各种令人惊喜的开源项目！记事 & 待办推荐一个使用 C# 和 MAUI 开发一个记事和待办的 App, 完全免费开源，颜值很高，并且已经成功上架到应用商店。这个项目也记录了作者，实践了 MAUI 技术的跨平台的完整项目流程，从开发到打包，以及最后的上线到应用商店。软件截图主要功能笔记管理：新增笔记，编辑笔记标题，增加笔记片段，修改笔记片段内...
配置方法_STM32时钟配置方法详解
weixin_39790168的博客
12-11 795
一、在STM32中，有五个时钟源，为HSI、HSE、LSI、LSE、PLL。①HSI是高速内部时钟，RC振荡器，频率为8MHz。②HSE是高速外部时钟，可接石英/陶瓷谐振器，或者接外部时钟源，频率范围为4MHz~16MHz。③LSI是低速内部时钟，RC振荡器，频率为40kHz。④LSE是低速外部时钟，接频率为32.768kHz的石英晶体。⑤PLL为锁相环倍频输出，其时钟输入源可选择为HS...
C#学习笔记（一）使用C#绘制一个时钟
williammuu的博客
03-18 5131
使用C#获取当前时间绘画出一个钟表时钟。
c#时钟代码
Marlonwang的专栏
10-23 1491
using System;  using System.Collections.Generic;  using System.ComponentModel;  using System.Data;  using System.Drawing;    using System.Text;  using System.Windows.Forms;    namespace Simpc
C# 编写一个动态模拟时钟
qq_42729858的博客
06-04 2944
1.首先先给大家看一下最终效果图。 2.动态时钟首先我们就需要一个时间线程来对齐进行动态管理。在窗体的加载事件中添加时间线程，时间间隔设置为1秒执行一次，并且将触发事件添加给Elapsed，线程的声明放在事件之外。 System.Timers.Timer Time = new System.Timers.Timer(); private void Form1_Load(object sender, EventArgs e) {
.NET MAUI for C# Developers 英文书翻译版
10-07
* 简洁的代码：.NET MAUI使用C#和XAML语言，代码简洁易读。 本书的内容涵盖了.NET MAUI的基础知识，包括： * .NET MAUI的安装和设置 * XAML和C#的基础知识 * MVVM模式的应用 * 高级控件的使用 本书还包括了许多...
基于C#和NET MAUI开发的音乐播放器+源代码+文档说明+sln
01-10
该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ <项目介绍> 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ ...
基于C#和NET MAUI开发的音乐播放器+源代码+文档说明+sln.zip
06-14
基于C#和NET MAUI开发的音乐播放器+源代码+文档说明+sln.zip本资源中的源码都是经过本地编译过可运行的，评审分达到95分以上。资源项目的难度比较适中，内容都是经过助教老师审定过的能够满足学习、使用需求，如果有...
.NET MAUI for C# Developers 英文书
09-22
.NET MAUI是在Xamarin.Forms的基础上发展起来的，它允许开发者用一种语言（C#）和一个代码库来创建原生应用，支持iOS、Android、macOS和Windows等多个平台。通过.NET MAUI，开发者可以利用一套统一的API来处理不同...
一个用C#写的时钟源代码
03-03
C#时钟源代码 C#时钟 C#漂亮时钟 C#闹钟源代码 c#定时开关机程序
c#开发的非常形象的时钟程序
11-07
这是由c#窗体应用程序开发的可爱的迷你时钟程序，涉及到c#的多个方面的技术，感兴趣的朋友可以下载学习哦
cSharp_clock_ C#写的时钟 程序 源码包
11-18
cSharp_clock_ C#写的时钟 程序 源码包
C# 时钟设计
11-24
基于C#开发的窗体应用程序，时钟。有数字显示以及指针式时钟显示，可以调用系统的时间，也可以自己设置时间。皮肤可以自己更换，设置了三种风格的时钟。这个项目是我为一个C#课程的小作业所设计。
C#闹钟&&时钟小程序（源代码）
11-18
用C#写的闹钟应用程序。到处都是注释，一看就懂！ 核心代码和效果展示见我的博客：http://blog.csdn.net/luochao5862426/article/details/78570141 个人特色： 1、可以这么所说，别人有的，我有！别人没有的，我也有。集百家之长，选我就对了，嘿嘿。 2、代码详细，基本上每一条稍微重要点的代码都有注释这行代码是干嘛的，所以你可以看到好多好多注释，详细的不能再详细！ 3、里面包含，可直接导入的项目文件、该程序的PPT展示以及录制的视频展示。 4、模块清晰，注释详细，低耦合，高内聚。 主页面介绍：分三个部分 一、动态时钟部分，像石英钟一样时、分、秒针不停转动。 二、定点闹钟部分，简单点就是可以定闹钟。 三、闹钟备忘录部分，显而易见，为了添加提示功能。 本人设计了两种可选模式： 1、懒人模式（可多次延时响铃，下面主要讲述这个模式） 2、生存模式（本次考验失败后则下次的闹钟提前几分钟响铃。由于时间有限本人没去实现这个功能） 主要功能介绍： 一、时钟（石英钟） 1、使用C#的GDI+画出石英钟时、分、秒针不停转动的效果并加上了指针的尾巴。 二、闹钟 1、定闹钟时添加备注。 2、自选（默认铃声或本地铃声）试听铃声。所以机智的你可以当一个MP3用了。 3、设定多个闹钟。重点是，你可以设置不同类型（今天、每天、自定义星期、指定日期）的闹钟。 4、设定不同的响铃方式。包括：只响一次、不断响铃、静音响铃。 5、定时关机。定闹钟的时候选择了定时关机这个选项，那么，在闹钟到点后的一定时间内（我设置的3秒）会自动关机。 6、开机自启动。这个可以自己设定，很多人不需要。 7、响铃抖屏。闹钟到点后会抖动一小段时间（我设置的3秒）的屏幕，并同步跳到你打开的所有窗口的最顶层窗体。 8、系统托盘。可以隐藏到系统托盘。 三、备忘录 {备忘录组成：时段+时间+备注+尾巴（可删除，知识为了查看有哪些操作）} 1、移除所定的闹钟。 2、把闹钟备忘录保存至本地。 3、从本地导入至闹钟备忘录。所以你可以在本地修改备忘录咯，包括时间和内容。 4、修改闹钟备忘录内容。在程序界面修改备忘录。 5、查找备忘录内容。在程序界面查找备忘录内容。 6、显示倒计时。你在定闹钟的时候要是选了倒计时这个选项，则你可以在备忘录里面选中，显示倒计时。
C#语言入门、xamarin基础、.NET MAUI全栈开发技术综合笔记
ffqyt0809的博客
10-10 2860
自学c#笔记
C# 绘制时钟
kingzhexian的专栏
09-25 1230
using System; using System.Drawing; using System.Drawing.Drawing2D; using System.Windows.Forms; namespace WinFormClock {     public pa
C#自绘时钟 (附源码)
weixin_30908941的博客
07-30 871
C#自绘时钟 代码下载 前一段写了两篇如何用C++来结合WPF进行开发的文章，今天抽时间写个指针时钟程序，代码不多，给大家做个参考，主要使用GDI+来实现，大家可以根据这些代码，加几张图片就可以画出一个漂亮的时钟，也可以领会一下GDI+中的坐标转换的方...
maui C#写一个定时页面跳转
05-18
你可以使用JavaScript来实现这个功能，而不是C#。以下是一个简单的示例代码： ```javascript <script type="text/javascript"> function redirect() { window.location.href = "http://example.com"; //将链接替换为你想要跳转的页面 } setTimeout(redirect, 5000); //5000毫秒后跳转 </script> ``` 将上述代码添加到你要跳转的页面的HTML文件中，并将其中的链接替换为你要跳转的页面。这里的代码将在5秒钟后自动跳转到指定页面。你可以根据自己的需求调整定时器的时间。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

林晓lx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值