今天接着制作数字时钟
数字时钟主要用到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中显示出来了。