1052 Quiz#1 筆劃類別 (Stroke)

在這個測試裡, 我們要製作一個「筆劃」的類別, 目的是支援一個「1052Quiz1 隨意筆」的繪圖程式來運作, 這個程式執行起來的畫面如下:

你可以點上面的連結 (或是上面這張圖) 在你的機器上執行 (如果沒有安裝 vc2010, 需要有 vc10 redistributable DLLs， 請下載、解壓縮、拷貝 32bit\*.dll 或是 64bit\*.dll 到 c:\windows\system32)

你可以運用滑鼠在視窗裡隨意繪圖, 例如:

這個程式和 Windows 的小畫家不一樣, 小畫家是一個點陣圖的繪圖程式, 整個視窗是一個畫布, 畫出來的都是獨立的點, 每一筆並不是一個物件, 你不能再用滑鼠去點一個筆劃, 去修改原先的東西; 我們這個程式希望是一個向量化的繪圖程式, 所以我們希望用筆劃為單位來存放資料, 像上圖裡面就只有兩個筆劃。這個程式還沒有完整的功能, 目前可以開多個視窗、分割視窗、畫粗線條、畫細線條、清除畫布、存檔、讀檔、列印、預覽列印等等，複製/貼上、選取筆劃、選取區域中所有筆劃、刪除所選取筆劃、修改所選的筆劃的粗細、修改顏色、移動某一筆劃、放大/縮小、移到最上層、下移一層、上移一層，...都還沒有寫, 別擔心, 不是請你現在寫這些, 只是希望你設計一個筆劃的類別來儲存一筆所畫出來的資料, 以便支援這個程式。

這個程式的存檔功能在設計的時候, 存出去的 *.qz1 檔案是二進位模式的檔案, 在其它文字編輯器裡面讀出來會是亂碼, 不過再由這個程式讀進來的話還是可以顯示的。為了這次考試, 我們額外設計了一個功能是用文字模式來儲存 *.txt 的文字檔案如下圖:

選取上面的選單以後可以看到 Windows 標準的檔案選取對話盒:

填入檔案名稱 (例如 CS)、按下存檔可以把筆劃的資料存在 CS.txt 中

這個檔案中有上圖中筆劃的資料 (你可以自己產生資料檔案, 也可以下載下面的文字檔案)

CS.txt

以這個檔案來說, 裡面主要依序包含兩個筆劃的資料，格式說明如括號中文字:

2 (本檔案裡筆劃總數)
64 -45 140 -128 (「含括第一筆的最小長方形邊框」, 左上右下, 請見下圖說明)
5 (第一筆的粗細)
205 (第一筆的點數)
134 -60 (第一筆的第一點的 x 座標與 y 座標)
133 -60 (第一筆的第二點的 x 座標與 y 座標)
131 -57  。。。
。
。
。
126 -103
126 -103
97 -50 197 -142 (「含括第二筆的最小長方形邊框」, 左上右下, 請見下圖說明)
2 (第二筆的粗細)
344 (第二筆的點數)
180 -52 (第二筆的第一點的 x 座標與 y 座標)
180 -52 (第二筆的第二點的 x 座標與 y 座標)
180 -53 。。。
。
。
。
99 -138
99 -138

「含括某一筆劃的最小長方形邊框」所代表的意思如下圖:

是含括那一筆劃圖形的最小長方形 - (left, top, right, bottom), 也就是所有這個筆劃的圖形的 x 座標的範圍是 left+width ≤ x_i < right-width, y 座標的範圍是 bottom+width ≤ y_i < top-width, 這裡因為筆劃有寬度 width, 所以我們直接加上筆劃的寬度來簡單近似這個最小長方形, 也就是最小的長方形是覆蓋那些點座標的長方形四周再放大 width 格的那個長方形, 請注意所有的點的 x 座標都小於 right-width, 所有的點的 y 座標都大於 bottom+width。

下面是運用 stdio.h 函式庫來開啟這個檔案並且讀取資料的 C 程式, 程式直接把資料讀到一個自己定義的結構 struct Point 的陣列中

#include <stdio.h>
#include <assert.h>

struct Point
{
    int x;
    int y;
};

struct BoundingRect
{
    int left;
    int top;
    int right;
    int bottom;
};

int isEqual(BoundingRect br1, BoundingRect br2);
void calcBoundingRect(int length, int width, Point stroke[], BoundingRect *br);

int main()
{
    FILE *fp;
    int i, j, nStrokes;
    int widths[2];
    int lengths[2];
    BoundingRect brs[2], mybrs[2];
    Point strokes[2][500];

    fp = fopen("CS.txt", "r");
    if (fp==0)
    {
        printf("無法開啟 CS.txt\n");
        return 1;
    }
    fscanf(fp, "%d", &nStrokes);
    for (i=0; i<nStrokes; i++)
    {
        fscanf(fp, "%d%d%d%d", &brs[i].left, &brs[i].top,
                               &brs[i].right, &brs[i].bottom);
        fscanf(fp, "%d", &widths[i]);
        fscanf(fp, "%d", &lengths[i]);
        for (j=0; j<lengths[i]; j++)
            fscanf(fp, "%d%d", &strokes[i][j].x, &strokes[i][j].y);
        calcBoundingRect(lengths[i], widths[i], strokes[i], &mybrs[i]);
        printf("%d %d %d %d\n", brs[i].left, brs[i].top,
                                brs[i].right, brs[i].bottom);
        printf("%d %d %d %d\n", mybrs[i].left, mybrs[i].top,
                                mybrs[i].right, mybrs[i].bottom);
        assert(isEqual(brs[i], mybrs[i]));
    }
    fclose(fp);
    return 0;
}

int isEqual(BoundingRect br1, BoundingRect br2)
{
。。。
}

void calcBoundingRect(int length, int width, Point stroke[], BoundingRect *br)
{
    // 含括該筆劃圖形所有點的最小長方形, 也就是所有這個筆劃圖形的 x 
    // 座標的範圍是 left+width ≤ xi < right-width, y 座標的範圍是 
    // bottom+width ≤ yi < top-width, 這裡因為筆劃有寬度 width, 
    // 所以我們直接加上筆劃的寬度來簡單近似這個最小長方形
}

請撰寫一個 C++ 程式, 運用 iostream 開啟檔案並且讀取資料, 同時設計一個 Stroke 類別, 這個類別需要管理一筆劃裡面所有的點, 這個類別以及程式的要求如下：

1. 在私有資料區請用一個 C++ 標準函式庫中的 vector 型態的資料成員來存放這些點, 每一個點還是用上面的 struct Point 來表示; 請再運用上面的 struct BoundingRect 定義一個 BoundingRect 型態的資料成員記錄「含括某一筆劃的最小長方形邊框」
   
   
2. 請設計一個 Stroke::addPoint(Point point) 的介面來把點依序加入這個 Stroke 類別的物件中, 由於在上面的視窗應用程式中, 滑鼠是由系統控制的物件, 滑鼠物件在左鍵按下時會傳送一個訊息給你的程式, 此時你的程式就可以去產生一個 Stroke 的物件, 其後只要滑鼠左鍵是按下的情況下, 滑鼠每次移動一點點，系統就會傳送一個目前所在位置 point 的訊息給你的應用程式, 你的程式在處理這個訊息的時候就可以呼叫 addPoint(point) 來把這個點加入筆劃中, 這個 Stroke 物件應該要有一個存放輸入狀態的布林變數 inputMode, 如果是 true 代表可以輸入, 直到滑鼠左鍵放開時你才去把這個變數設為 false (等一下我們會設計一個介面來完成這件事), 在這種狀態下 addPoint(point) 會沒有作用, 目前我們還不是寫視窗的程式, 請在 main 中由檔案中讀取筆劃裡面所有的點, 動態配置 (new) 一個 Stroke 物件, 把輸入狀態設為 true, 運用這個 addPoint 介面把讀到的點一筆一筆加入 Stroke 物件中
   
   
3. 因為我們的應用程式需要處理好多筆劃, 個別都是筆劃類別的物件, 所以 main 裡面請再運用一個 vector 來存放所有的筆劃物件
   
   
4. 請替 Stroke 類別設計一個 Stroke::calcBoundingRect() 的輔助函式, 這個函式應該能夠計算出「含括此筆劃的最小長方形邊框」, 並且請設計資料成員來存放邊框的左、上、右、下座標值 (這個邊框在最後應用軟體中有兩個用途: 第一是繪圖系統重繪時可以只繪出需要的部份, 第二是我們以後用滑鼠來選取筆劃時, 可以快速測試是否選取了某一個筆劃)
   
   
5. 請設計一個 void Stroke::finish() 的介面, 想像一下上面的視窗應用程式中, 使用者放開滑鼠左鍵時, 視窗系統會傳送一個訊息給你的程式, 這個時候就需要呼叫這個 finish() 介面來結束輸入狀態, 把輸入模式設為 false, 順便呼叫 calcBoundingRect() 來計算最小長方形邊框
   
   
6. 請替 Stroke 類別設計一個 int Stroke::select1(Point pt, double r) 的介面, 這個介面很快地去比對參數 pt 是不是和筆劃中某一個點的距離小於 r (也就是在以 pt 為圓心, 半徑 r 的圓的範圍內), 請回傳 「pt 最接近筆劃中第幾個點」, 沒有比對到請回傳 -1, 這個介面其實是為了以後我們用滑鼠點選某一筆劃時, 判斷到底哪一筆劃的哪一點被點到了的功能寫的 (vector 類別的物件可以用陣列的方式來使用, 或是用 iterator 來使用)
   
   
7. 如果你時間夠的話, 請替 Stroke 類別再設計一個 int Stroke::select2(Point pt, double r) 的介面, 由於我們用最簡單的方式繪製這個筆劃, 也就是直接把相鄰的點連接起來, 如果滑鼠點到兩個點的連接線段, 應該也要算是選到這一個筆劃, 這個介面就是要很快地去比對參數 pt 是不是和筆劃中某兩個點的連線段距離小於 r, 這個功能你需要算一下點到直線的距離, 如果直線方程式表示成 f(x,y) = a x + b y + c = 0 的話, 任意點 (x₀, y₀) 到直線的距離是 | f(x₀, y₀) | / sqrt(a²+b²), 請回傳 「pt 最接近的那個線段的兩個端點中的第一個點是筆劃中第幾個點」, 沒有比對成功請回傳 -1
   
   
8. 請替 Stroke 類別設計一個平移筆劃 void Stroke::shift(Point offset) 的介面, 未來在視窗版的應用程式中, 如果某一筆劃被選到了, 我們希望能夠平移這一筆劃
   
   
9. 請替 Stroke 類別設計一個刪除點 void Stroke::deletePoint(int i) 的介面, 未來在視窗版的應用程式中, 如果某一筆劃中第 i 個點被選到了, 我們希望能夠刪掉那一個點 (請查詢一下 vector 類別有一個 erase 的成員可以使用)
   
   
10. main 函式裡主要的動作如下
    
    a. 定義一個 Stroke 指標的 vector 來存放所有由檔案中讀到的筆劃
    
    b. 開啟檔案串流 (請固定檔案名稱為 CS.txt)
    
    c. 由檔案中依序讀出所有筆劃、所有點、動態配置出每一個 Stroke 物件, 每一筆劃讀完以後記得呼叫 finish()
    
    d. 運用 assert 確認計算出來的最小長方形邊框和檔案裡讀出來的是不是一致
    
    e. 請根據上面 CS.txt 設計資料運用 assert 來測試 select1, select2, shift, deletePoint 是否正確運作
    
    f. 解構所有的筆劃 (串流會在自己的解構元中關閉, 所以可以不用特別去關閉它)

考試時間: 80分鐘 (10:40 上傳時間截止)

1. 請製作一個新的方案, 讓 Visual Studio 替方案建立目錄 (請勾選「為方案建立目錄」), 方案名稱為 Stroke, 設定專案名稱為 C_Version, 將上面的 C 程式拷貝進 main.cpp
   
   
2. 完成上面的 calcBoundingRect() 以及 isEqual() 函式
   
   
3. 請替目前方案新增一個專案, 名稱是 CPP_Version, 請以右鍵在「方案總管」中點選這個專案, 選擇「設定為起始專案」這個專案設為啟始專案
   
   
4. 製作一個 C++ 版本的 Stroke 類別, 類別裡的資料成員和成員函式如上面所規定
   
   
• 請注意設計資料成員和成員函式的存取權限 private/public
  
  
• isEqual 和 calcBoundingRect 兩個 C 函式要改為 Stroke 類別的成員函式, 設計時請移除上面 C 函式範例中不需要的參數 (成員函式是一個 Stroke 的物件回應它收到的訊息所執行的函式, 不需要再傳遞我們設計成資料成員的那些東西了)
  
  
• 函式參數或是函式本身可以使用 const 的地方請儘量使用
  
  
• 如果使用 參考變數 可以簡化的地方請使用參考變數的語法 (特別注意如果能夠使用 const 參考也一定要使用)
  
  
5. 類別內請加入一個靜態 static 的 unitTest() 函式, 內容包含上述 main.cpp 裡面的所有測試, main() 函式中請呼叫 unitTest() 來測試你設計的 Stroke 類別界面 (測試時請在 「方案總管」或是 「類別檢視」 中選擇 CPP_Version 專案, 建置選單裡才會出現「建置 CPP_Version 」的選項)

後續:

接下去能做的事情還蠻明顯的, 就是把整個視窗版的程式完成, 不過我們這學期的課程已經塞進去太多東西了, 不太可能在課程或是實習裡面安排時間講這些東西 (期中考後有一次實習會讓你配合一個視窗界面來寫程式), 如果有同學有興趣知道更詳細的設計方法, 可以讓我知道, 需要另外安排時間介紹。