練手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中顯示出來了。