练手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）大致如此，看看最后效果吧。

最后来一个合影 :)