练手WPF（一）——模拟时钟与数字时钟的制作（中）

今天接着制作数字时钟

数字时钟主要用到Path控件，主要用于定义数字笔划的形状。

（1）添加一个DigitLine类

数字时钟的数字8由7笔组成，看如下定义的字段字符串数组PathDatas，每个string代表其中一笔。最后一个string是数字表的冒号。

/// <summary>
/// 数字表数字类
/// </summary>
public class DigitLine
{
    // 数字7个笔划路径数据数组
    string[] PathDatas = new string[]
    {
        "M3,0 L53,0 L38,15 L18,15 Z",                               //  -
        "M0,3 L15,18 L15,38 L0,53 Z",                               // |
        "M41,18 L56,3 L56,53 L41,38 Z",                             //    |
        "M10,48.5 L18,41 L38,41 L46,48.5 L38,56 L18,56 Z",          //   -
        "M0,44 L15,60 L15,80 L0,94 Z",                              // |
        "M41,59 L56,44 L56,94 L41,79 Z",                            //    |
        "M18,82 L38,82 L53,97 L3,97 Z",                             //  _                    
        "M0,0 L15,0 L15,15 L0,15Z M0,40 L15,40 L15,55 L0,55 Z"      // :
    };

    // 路径数组（公共）
    public Path[] Path0_9 = new Path[10];
    public Path PathColon = new Path();
}

（2）设置0-9这10个数字的笔划，添加到上述类

/// <summary>
/// 根据digit设置（分配）数字路径数据
/// </summary>
/// <param name="digit">数字</param>
private void SetDigit(int digit)
{
    StringBuilder sbData = new StringBuilder();

    switch (digit)
    {
        case 0:
            for (int i = 0; i < 7; i++)
            {
                if (i == 3)
                    continue;
                sbData.Append(PathDatas[i]);
            }
            break;
        case 1:
            for (int i = 0; i < 7; i++)
            {
                if (i == 0 || i == 1 || i == 3 || i == 4 || i == 6)
                {
                    continue;
                }
                sbData.Append(PathDatas[i]);
            }
            break;

        case 2:
            for (int i = 0; i < 7; i++)
            {
                if (i == 1 || i == 5)
                {
                    continue;
                }
                sbData.Append(PathDatas[i]);
            }
            break;
        case 3:
            for (int i = 0; i < 7; i++)
            {
                if (i == 1 || i == 4)
                {
                    continue;
                }
                sbData.Append(PathDatas[i]);
            }
            break;
        case 4:
            for (int i = 0; i < 7; i++)
            {
                if (i == 0 || i == 4 || i == 6)
                {
                    continue;
                }
                sbData.Append(PathDatas[i]);
            }
            break;

        case 5:
            for (int i = 0; i < 7; i++)
            {
                if (i == 2 || i == 4)
                {
                    continue;
                }
                sbData.Append(PathDatas[i]);
            }
            break;

        case 6:
            for (int i = 0; i < 7; i++)
            {
                if (i == 2)
                {
                    continue;
                }
                sbData.Append(PathDatas[i]);
            }
            break;

        case 7:
            for (int i = 0; i < 7; i++)
            {
                if (i == 1 || i == 3 || i == 4 || i == 6)
                {
                    continue;
                }
                sbData.Append(PathDatas[i]);
            }
            break;

        case 8:
            for (int i = 0; i < 7; i++)
            {
                sbData.Append(PathDatas[i]);
            }
            break;
        case 9:
            for (int i = 0; i < 7; i++)
            {
                if (i == 4)
                {
                    continue;
                }
                sbData.Append(PathDatas[i]);
            }
            break;

    }

    Path0_9[digit].Data = Geometry.Parse(sbData.ToString());
}

除了数字8需要画出所有7笔外，其他数字都会少画相应的笔划，看一下for里的if就清楚了。

/// <summary>
/// 设置冒号
/// </summary>
/// <param name="color"></param>
private void SetColon(Brush color)
{
    PathColon.Fill = color;
    PathColon.Data = Geometry.Parse(PathDatas[7]);
}

还有这冒号要定义。

 

（3）该类的构造方法

/// <summary>
/// 构造
/// </summary>
/// <param name="brush"></param>
public DigitLine(Brush brush)
{
    // 初始化路径数组
    for (int i=0; i<10; i++)
    {
        Path0_9[i] = new Path();
        Path0_9[i].Fill = brush;

        SetDigit(i);
    }

    SetColon(brush);
}

将定义好的0-9数字的形状分别保存在Path型字段数组变量Path0_9的Data中，待后调用。

 

（4）如果要设置倾斜数字，可以使用下面方法进行设置。

public void SetDigitSkewTransform(double angleX)
{
    SkewTransform stf = new SkewTransform(angleX, 0);

    for (int i=0; i<10; i++)
    {
        Path0_9[i].RenderTransform = stf;
    }
}

public void SetColonSkewTransform(double angleX)
{
    SkewTransform stf = new SkewTransform(angleX, 0);
    PathColon.RenderTransform = stf;
}

要设置X方向的倾斜角度，然后进行变换操作。

这个类就这样了，下一步就可以使用该类将相关的数字和冒号放入Canvas中显示出来了。