首页 > Windows开发 > 详细

练手WPF(一)——模拟时钟与数字时钟的制作(下)

时间:2019-05-27 00:56:37      阅读:177      评论:0      收藏:0      [点我收藏+]
原文:练手WPF(一)——模拟时钟与数字时钟的制作(下)

继续数字时钟。上一篇写好了数字笔划专用的DigitLine类。现在是时候使用它了。下面对一些主要代码进行说明。

打开MainWindow.xaml.cs文件:

(1)添加字段变量

// 数字时钟字段定义
DigitLine[] digitLine = new DigitLine[6];
DigitLine[] digitLineBack = new DigitLine[6];

DigitLine[] digitColon = new DigitLine[2];
DigitLine[] digitColonBack = new DigitLine[2];

第一对类数组变量用于6个数字及其背景字样,第二对是冒号用的。

(2)在构造方法中进行变量初始化

// 初始化数字
for (int i=0; i<6; i++)
{
    digitLine[i] = new DigitLine(Brushes.Black);
    digitLineBack[i] = new DigitLine(new SolidColorBrush(Color.FromArgb(255, 120, 120, 120)));
}

// 初始化冒号
for (int i=0; i<2; i++)
{
    digitColon[i] = new DigitLine(Brushes.Black);
    digitColonBack[i] = new DigitLine(new SolidColorBrush(Color.FromArgb(255, 120, 120, 120)));
}

(3)开始设置显示元素

这个方法用于显示数字表外边框:

/// <summary>
/// 显示数字表矩形外框
/// </summary>
/// <param name="pos"></param>
/// <param name="width"></param>
/// <param name="height"></param>
/// <param name="color"></param>
private void DrawDigitRect(Point pos, double width, double height, Brush color)
{
    Rectangle rect = new Rectangle();
    rect.Width = width;
    rect.Height = height;
    rect.Fill = color;
    Canvas.SetLeft(rect, pos.X);
    Canvas.SetTop(rect, pos.Y);
    digitCanvas.Children.Add(rect);

}

 

显示数字和冒号的背景,数字的话时只要画6个8就可以了,这个很容易理解,看一下真实的电子表就清楚了。

/// <summary>
/// 显示背景数字(底色)
/// </summary>
/// <param name="brush"></param>
private void DrawDigitTimeBack(Brush brush)
{
    // 第1、2位--小时
    Canvas.SetLeft(digitLineBack[0].Path0_9[8], 40);
    Canvas.SetTop(digitLineBack[0].Path0_9[8], 80);
    digitCanvas.Children.Add(digitLineBack[0].Path0_9[8]);

    Canvas.SetLeft(digitLineBack[1].Path0_9[8], 120);
    Canvas.SetTop(digitLineBack[1].Path0_9[8], 80);
    digitCanvas.Children.Add(digitLineBack[1].Path0_9[8]);

    // 冒号
    Canvas.SetLeft(digitColonBack[0].PathColon, 190);
    Canvas.SetTop(digitColonBack[0].PathColon, 100);
    digitCanvas.Children.Add(digitColonBack[0].PathColon);

    // 第二冒号
    Canvas.SetLeft(digitColonBack[1].PathColon, 370);
    Canvas.SetTop(digitColonBack[1].PathColon, 100);
    digitCanvas.Children.Add(digitColonBack[1].PathColon);

    // 3、4位--分钟
    Canvas.SetLeft(digitLineBack[2].Path0_9[8], 220);
    Canvas.SetTop(digitLineBack[2].Path0_9[8], 80);
    digitCanvas.Children.Add(digitLineBack[2].Path0_9[8]);

    Canvas.SetLeft(digitLineBack[3].Path0_9[8], 300);
    Canvas.SetTop(digitLineBack[3].Path0_9[8], 80);
    digitCanvas.Children.Add(digitLineBack[3].Path0_9[8]);

    // 5、6位--秒钟
    Canvas.SetLeft(digitLineBack[4].Path0_9[8], 400);
    Canvas.SetTop(digitLineBack[4].Path0_9[8], 80);
    digitCanvas.Children.Add(digitLineBack[4].Path0_9[8]);

    Canvas.SetLeft(digitLineBack[5].Path0_9[8], 480);
    Canvas.SetTop(digitLineBack[5].Path0_9[8], 80);
    digitCanvas.Children.Add(digitLineBack[5].Path0_9[8]);
}

 

将画外框和背景底色功能添加到构造方法的最后部分:

// 画数字表背景矩形
DrawDigitRect(new Point(-24, 36), 616, 196, Brushes.Black);
DrawDigitRect(new Point(-16, 44), 600, 180, Brushes.Gray);

// 画数字底色
DrawDigitTimeBack(new SolidColorBrush(Color.FromArgb(255, 120, 120, 120)));

 

(4)最重要的显示时间数字和冒号的方法:

/// <summary>
/// 显示数字时间
/// </summary>
private void DrawDigitTime()
{
    // 删除已在画图区的数字
    for (int i=0; i<6; i++)
    {
        for (int j=0; j<10; j++)
        {
            if (digitCanvas.Children.Contains(digitLine[i].Path0_9[j]))
            {
                digitCanvas.Children.Remove(digitLine[i].Path0_9[j]);
            }
        }
    }

    // 小时
    int hour = CurrTime.Hour;
    int hour1 = hour / 10;
    int hour2 = hour % 10;
    Canvas.SetLeft(digitLine[0].Path0_9[hour1], 40);
    Canvas.SetTop(digitLine[0].Path0_9[hour1], 80);
    digitCanvas.Children.Add(digitLine[0].Path0_9[hour1]);

    Canvas.SetLeft(digitLine[1].Path0_9[hour2], 120);
    Canvas.SetTop(digitLine[1].Path0_9[hour2], 80);
    digitCanvas.Children.Add(digitLine[1].Path0_9[hour2]);

    // 冒号闪烁
    if (CurrTime.Second % 2 == 0)
    {
        digitColon[0].PathColon.Visibility = Visibility.Visible;
        digitColon[1].PathColon.Visibility = Visibility.Visible;
    }
    else
    {
        digitColon[0].PathColon.Visibility = Visibility.Hidden;
        digitColon[1].PathColon.Visibility = Visibility.Hidden;
    }            

    // 分钟
    int minute = CurrTime.Minute;
    int minu1 = minute / 10;
    int minu2 = minute % 10;
    Canvas.SetLeft(digitLine[2].Path0_9[minu1], 220);
    Canvas.SetTop(digitLine[2].Path0_9[minu1], 80);
    digitCanvas.Children.Add(digitLine[2].Path0_9[minu1]);

    Canvas.SetLeft(digitLine[3].Path0_9[minu2], 300);
    Canvas.SetTop(digitLine[3].Path0_9[minu2], 80);
    digitCanvas.Children.Add(digitLine[3].Path0_9[minu2]);
    
    // 秒钟
    int second = CurrTime.Second;
    int sec1 = second / 10;
    int sec2 = second % 10;
    Canvas.SetLeft(digitLine[4].Path0_9[sec1], 400);
    Canvas.SetTop(digitLine[4].Path0_9[sec1], 80);
    digitCanvas.Children.Add(digitLine[4].Path0_9[sec1]);

    Canvas.SetLeft(digitLine[5].Path0_9[sec2], 480);
    Canvas.SetTop(digitLine[5].Path0_9[sec2], 80);
    digitCanvas.Children.Add(digitLine[5].Path0_9[sec2]);
}

根据当前时间,显示相应数字,很容易懂。

 

(5)更新时间

将上面的DrawDigitTime()方法调用添加到(上)篇的计时器事件方法中即可。现在该方法如下:

/// <summary>
/// 计时器事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Timer_Tick(object sender, EventArgs e)
{
    // 更新当前时间
    CurrTime = DateTime.Now;

    // 更新数字时钟数字
    DrawDigitTime();

    // 更新圆盘时针
    Update();
}

(6)大致如此,看看最后效果吧。

技术分享图片

技术分享图片

最后来一个合影 :)

技术分享图片

练手WPF(一)——模拟时钟与数字时钟的制作(下)

原文:https://www.cnblogs.com/lonelyxmas/p/10928364.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!