在数位影像上执行简单的绘图

1、第七章 在數位影像上執行簡單的繪圖本章的主要目的是討論如何在數位影像上繪出簡單的幾何圖形如直線、方塊及橢圓形等，以及改變這些圖形線條的粗細及顏色。由於幾何圖形的繪製需要方便的人機介面，相關人機介面如工具列及對話盒的設立及功能的延升，也是本章研究的重點。與前一節類似的地方是Canvas元件仍是我們主要的使用元件。此元件將被使用來描繪幾何圖形，及設定這些圖形線條的粗細及顏色。本章共分三節：第一節說明繪圖相關工具列的設立，第二節討論繪圖相關對話盒的設立，最後在第三節則進行繪圖相關的事件處理程式的撰寫。7.1 繪圖相關工具列的設立圖 7.1如圖7.1所示，本章所討論的程式在工具列上增加了五個按鈕，其功

2、能分別為畫線、畫方塊、畫橢圓、設定線條粗細以及設定線條顏色。圖7.2顯示這五個按鈕個別代表的功能。值得注意的是這五個按鈕上的圖案是我們利用軟體Image Editor所產生的，而此軟體是隨C+Builder所附贈，其主要目的之一即為設計可以顯示在工作列按鈕上的小圖案的內容。此軟體執行後的情況如圖7.3所示，我們可以產生一個空白的小圖案，並在此圖案上畫線、畫幾何圖形以及設定任何像素之顏色。畫線 畫方塊 畫橢圓 設定線條粗細 設定線條顏色圖7.2圖 7.3在產生這些圖案後，將之載入元件ImageList(請參考第三章)，如圖7.4所示，如此則在Image Editor上所設計完成的圖案便自動的顯示

3、於工具列的空白按鈕上。圖 7.47.2 繪圖相關對話盒的設立在本節中我們要設計及使用兩種對話盒：第一種是設定線條顏色的對話盒，第二種是設定線條樣式及寬細的對話盒。以下分別討論這兩種對話盒的設計及使用。由於C+Builder有提供設定顏色的對話盒，我們不需要另外進行設計。此對話盒名稱為ColorDialog，其位於元件盤頁籤Dialog之下，如圖7.5所示。此對話盒的使用方式很簡單，首先利用物件檢視器，產生在工具列上設定線條顏色的按鈕的OnClick事件處理程式，如圖7.6所示。些下來在此事件處理程式上加入下面的敘述句： if(ColorDialog1->Execute() Pen_Col

4、or=ColorDialog1->Color; 在上述的敘述句中，ColorDialog1->Execute()會顯示設定顏色對話盒，如圖7.7所示。若對話盒中Ok的按鈕被按下，則ColorDialog1->Execute()會回傳true，此時我們將ColorDialog1->Color所代表之顏色傳給Pen_Color，其中ColorDialog1->Color所代表之顏色為使用者在對話盒上所選擇的顏色，而Pen_Color則為我們所定義的變數，其為線條之顏色，我們將之宣告於Unit.h使得該變數承為主視窗的一個屬性，如圖7.8所示。圖 7.5圖 7.6圖 7

5、.7圖 7.8由於C+Builder並沒有提供設定線條樣式及寬細的對話盒，因此我們必須自行設計。在產生空白對話盒後，我們加入元件Label、Image及RadioButton，如圖7.8所示。圖7.8其中Image元件之主要目的是顯示線條的樣式及粗細，而RadioButton則是用來讓使用者選擇要用哪一個線條。元件RadioButton可在元件盤頁籤Standard之下找到，如圖7.9所示。此元件與我們在第四章所使用的元件RadioGroup功能類似，但卻更有彈性。圖 7.9一個在Image元件上顯示線條的方式是使用元件Canvas將線條畫出來。由於我們僅需要在顯示此對話盒時才畫出這些線條，因

6、此相關的程式可放置於此對話盒的建構程式中(亦即在程式Unit5.cpp之建構程式中)，如下所示_fastcall TLineWidthDlg:TLineWidthDlg(TComponent* AOwner): TForm(AOwner)Image1->Canvas->Pen->Style=psDash;Image1->Canvas->MoveTo(0,20);Image1->Canvas->LineTo(100,20);Image1->Canvas->Pen->Style=psDot;Image1->Canvas->Mo

7、veTo(0,40);Image1->Canvas->LineTo(100,40);Image1->Canvas->Pen->Style=psDashDot;Image1->Canvas->MoveTo(0,60);Image1->Canvas->LineTo(100,60);Image1->Canvas->Pen->Style=psSolid;Image1->Canvas->MoveTo(0,80);Image1->Canvas->LineTo(100,80);Image1->Canvas-

8、>Pen->Width=2;Image1->Canvas->MoveTo(0,100);Image1->Canvas->LineTo(100,100);Image1->Canvas->Pen->Width=4;Image1->Canvas->MoveTo(0,120);Image1->Canvas->LineTo(100,120);Image1->Canvas->Pen->Width=6;Image1->Canvas->MoveTo(0,140);Image1->Canvas-&g

9、t;LineTo(100,140);Image1->Canvas->Pen->Width=8;Image1->Canvas->MoveTo(0,160);Image1->Canvas->LineTo(100,160);在上述程式中我們用MoveTo來設定線條的起始位置，而LineTo則是用來設定終止位置並畫出線條。Pen->Width及Pen->Style則是分別使用來設定線條的寬度及型式，圖7.10顯示此對話盒在執行後的外觀。圖7.10在此對話盒設計完成後，接下來我們討論使用此對話盒的事件處理程式。如圖7.11所示，此事件處理程式是在工具

10、列上設定線條樣式及粗細的按鈕的OnClick事件處理程式。圖7.11以下為此事件處理程式的完整內容。void _fastcall TForm1:ToolButton9Click(TObject *Sender) LineWidthDlg->ShowModal(); if (LineWidthDlg->ModalResult=mrOk) if(LineWidthDlg->RadioButton1->Checked) Pen_Style=psDash; Pen_Width=1; else if(LineWidthDlg->RadioButton2->Checke

11、d) Pen_Style=psDot; Pen_Width=1; else if(LineWidthDlg->RadioButton3->Checked) Pen_Style=psDashDot; Pen_Width=1; else if(LineWidthDlg->RadioButton4->Checked) Pen_Style=psSolid; Pen_Width=1; else if(LineWidthDlg->RadioButton5->Checked) Pen_Style=psSolid; Pen_Width=2; else if(LineWidt

12、hDlg->RadioButton6->Checked) Pen_Style=psSolid; Pen_Width=4; else if(LineWidthDlg->RadioButton7->Checked) Pen_Style=psSolid; Pen_Width=6; else if(LineWidthDlg->RadioButton8->Checked) Pen_Style=psSolid; Pen_Width=8; 在上述的程式中，LineWidthDlg是此對話盒的名稱，而RadioButton1至RadioButton8則分別代表了此對話盒上的

13、八個按鈕，且每一個按鈕代表一種線條的樣式及粗細。若當中任一個按鈕被選中，比如說RadioButton3被選中，則LineWidthDlg->RadioButton3->Checked為true，反之則為false。值得注意的是在此八個按鈕中，永遠只會有一個按鈕被選中，因此此程式根據哪一個按鈕的屬性Checked成為true來判斷線條的樣式及粗細。7.3 繪圖相關的事件處理程式由於在繪圖時主要仍使用滑鼠，因此繪圖相關的事件處理程式為OnMouseDown、OnMouseUp以及OnMouseMove。由於這些事件處理程式同時又被使用來完成影像之剪貼，因此我們必須額外的宣告三個旗標Li

14、ne_Enable、Rect_Enable及Ellipse_Enable，其分別代表使用者擬執行畫線、畫方塊以及畫橢圓。這些旗標都在Unit1.h中宣告成為主視窗的屬性，如圖7.8所示。這些旗標之設定與否都由工具列上的畫線、畫方塊以及畫橢圓按鈕來決定。我們在物件檢視器上將這三個按鈕之型態由tbsButton改成為tbsCheck，如圖7.12所示。圖7.12一般型態圍tbsButton的按鈕在被按下後會自動彈起，然而型態為tbsCheck之按鈕在被按下後會停留在Down的位置，直到第二次此按鈕又被按下才會回到原來的位置。因此在工具列上的畫線、畫方塊以及畫橢圓按鈕若任何一個被按下，則我們執行相關

15、的OnClick事件處理程式。在此事件處理程式中檢查相關按鈕的Down屬性是否為true，若為true則依照按鈕被指定的功能設定Line_Enable、Rect_Enable或Ellipse_Enable為true，否則設為false。以下為這三個按鈕的OnClick事件處理程式完整內容。void _fastcall TForm1:ToolButton6Click(TObject *Sender)if (ToolButton6->Down) Line_Enable=true;else Line_Enable=false;/-void _fastcall TForm1:ToolButton

16、7Click(TObject *Sender)if (ToolButton7->Down) Rect_Enable=true;else Rect_Enable=false;/-void _fastcall TForm1:ToolButton8Click(TObject *Sender)if (ToolButton8->Down) Ellipse_Enable=true;else Ellipse_Enable=false;在旗標Line_Enable、Rect_Enable及Ellipse_Enable設定的方式確定之後，我們便可以在OnMouseDown、OnMouseUp以及On

17、MouseMove等事件處理程式上增加繪圖的功能，以下為這些程式的完整內容。void _fastcall TForm1:Image1MouseDown(TObject *Sender, TMouseButton Button, TShiftState Shift, int X, int Y) Graphics:TBitmap *TheBitmap; StartX=(int)X*ScaleFactor; StartY=(int)Y*ScaleFactor; if(Pasting_Enable) Pasting=true; Masking=false; Drawing=false; Pasting

18、_Enable=false; else if(Line_Enable | Rect_Enable | Ellipse_Enable) Pasting=false; Masking=false; Drawing=true; else Masking=true; Pasting=false; Drawing=false; TheBitmap=Image1->Picture->Bitmap; TheBitmap->Canvas->Draw(0,0,OrgBitmap); /-void _fastcall TForm1:Image1MouseUp(TObject *Sender

19、, TMouseButton Button, TShiftState Shift, int X, int Y) Graphics:TBitmap *TheBitmap; EndX=(int)X*ScaleFactor; EndY=(int)Y*ScaleFactor; if (Pasting) TheBitmap=Image1->Picture->Bitmap; TheBitmap->Canvas->Draw(0,0,OrgBitmap); TheBitmap->Canvas->Draw(EndX-StartX,EndY-StartY,PasteBitmap

20、); OrgBitmap->Assign(TheBitmap); if (Drawing) TheBitmap=Image1->Picture->Bitmap; TheBitmap->Canvas->Draw(0,0,OrgBitmap); TheBitmap->Canvas->Pen->Style=Pen_Style; TheBitmap->Canvas->Pen->Width=Pen_Width; TheBitmap->Canvas->Pen->Color=Pen_Color; if(Line_Enable

21、) TheBitmap->Canvas->MoveTo(StartX,StartY); TheBitmap->Canvas->LineTo(EndX,EndY); else if(Rect_Enable) TheBitmap->Canvas->Brush->Style=bsClear; TheBitmap->Canvas->Rectangle(StartX,StartY,EndX,EndY); else if(Ellipse_Enable) TheBitmap->Canvas->Brush->Style=bsClear;

22、TheBitmap->Canvas->Ellipse(StartX,StartY,EndX,EndY); OrgBitmap->Assign(TheBitmap); Masking=false; Pasting=false; Drawing=false;void _fastcall TForm1:Image1MouseMove(TObject *Sender, TShiftState Shift, int X, int Y) Graphics:TBitmap *TheBitmap; TheBitmap=Image1->Picture->Bitmap; if(The

23、Bitmap->ScanLine0) StatusBar1->Panels->Items0->Text= "X="+IntToStr(X); StatusBar1->Panels->Items1->Text= "Y="+IntToStr(Y); /- if(Masking) TheBitmap->Canvas->Pen->Mode=pmBlack; TheBitmap->Canvas->Pen->Width=2; TheBitmap->Canvas->Brush-&

24、gt;Style=bsClear; TheBitmap->Canvas->Draw(0,0,OrgBitmap); X=(int)X*ScaleFactor; Y=(int)Y*ScaleFactor; TheBitmap->Canvas->Rectangle(StartX,StartY,X,Y); if (Pasting) TheBitmap->Canvas->Draw(0,0,OrgBitmap); X=(int)X*ScaleFactor; Y=(int)Y*ScaleFactor; TheBitmap->Canvas->Draw(X-StartX,Y-StartY,PasteBitmap); TheBitmap->Canvas->Pen->Mode=pmBlack; TheBitmap