欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-28 20:07:04
今天接着制作数字时钟 数字时钟主要用到Path控件,主要用于定义数字笔划的形状。 (1)添加一个DigitLine类 数字时钟的数字8由7笔组成,看如下定义的字段字符串数组PathDatas,每个string代表其中一笔。最后一个string是数字表的冒号。 除了数字8需要画出所有7笔外,其他数字都 ......

今天接着制作数字时钟

数字时钟主要用到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中显示出来了。