练手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中显示出来了。