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