wxWidgets 中的設備上下文 · ZetCode 中文系列教程

# wxWidgets 中的設備上下文 > 原文： [http://zetcode.com/gui/wxwidgets/gdi/](http://zetcode.com/gui/wxwidgets/gdi/) GDI（圖形設備接口）是用于處理圖形的界面。它用于與圖形設備（例如監視器，打印機或文件）進行交互。 GDI 允許程序員在屏幕或打印機上顯示數據，而不必擔心特定設備的詳細信息。 GDI 使程序員與硬件隔離。 ![The GDI](https://img.kancloud.cn/b0/9d/b09db60c9f39a2cb75a1bade1bbffe75_434x238.jpg) 圖：GDI 結構從程序員的角度來看，GDI 是用于處理圖形的一組類和方法。 GDI 由 2D 向量圖形，字體和圖像組成。要開始繪制圖形，我們必須創建一個設備上下文（DC）對象。在 wxWidgets 中，設備上下文稱為`wxDC`。該文檔將`wxDC`定義為可以在其上繪制圖形和文本的設備上下文。它以通用方式表示設備數量。同一段代碼可以寫入不同類型的設備。無論是屏幕還是打印機。 `wxDC`不能直接使用。相反，程序員應選擇派生類之一。每個派生類都打算在特定條件下使用。以下類是派生的`wxDC`類： * `wxBufferedDC` * `wxBufferedPaintDC` * `wxPostScriptDC` * `wxMemoryDC` * `wxPrinterDC` * `wxScreenDC` * `wxClientDC` * `wxPaintDC` * `wxWindowDC` `wxScreenDC`用于在屏幕上的任何地方繪制。如果要在整個窗口上繪制（僅 Windows），則使用`wxWindowDC`。這包括窗口裝飾。 `wxClientDC`用于繪制窗口的客戶區域。客戶區域是沒有裝飾（標題和邊框）的窗口區域。 `wxPaintDC`也用于繪制客戶區。但是`wxPaintDC`和`wxClientDC`之間有一個區別。 `wxPaintDC`應該僅從`wxPaintEvent`使用。不應從`wxPaintEvent`中使用`wxClientDC`。 `wxMemoryDC`用于在位圖上繪制圖形。 `wxPostScriptDC`用于在任何平臺上寫入 PostScript 文件。 `wxPrinterDC`用于訪問打印機（僅 Windows）。 #### 簡單的線條我們從畫一條線開始。 `line.h` ```cpp #include <wx/wx.h> class Line : public wxFrame { public: Line(const wxString& title); void OnPaint(wxPaintEvent& event); }; ``` `line.cpp` ```cpp #include "line.h" Line::Line(const wxString& title) : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(280, 180)) { this->Connect(wxEVT_PAINT, wxPaintEventHandler(Line::OnPaint)); this->Centre(); } void Line::OnPaint(wxPaintEvent& event) { wxPaintDC dc(this); wxCoord x1 = 50, y1 = 60; wxCoord x2 = 190, y2 = 60; dc.DrawLine(x1, y1, x2, y2); } ``` `main.h` ```cpp #include <wx/wx.h> class MyApp : public wxApp { public: virtual bool OnInit(); }; ``` `main.cpp` ```cpp #include "main.h" #include "line.h" IMPLEMENT_APP(MyApp) bool MyApp::OnInit() { Line *line = new Line(wxT("Line")); line->Show(true); return true; } ``` 在我們的示例中，我們在窗口的客戶區域上畫一條簡單的線。如果我們調整窗口的大小，它將被重繪。生成`wxPaintEvent`。然后再次畫線。 ```cpp void OnPaint(wxPaintEvent& event); ``` 在這里，我們聲明一個`OnPaint()`事件處理函數。 ```cpp this->Connect(wxEVT_PAINT, wxPaintEventHandler(Line::OnPaint)); ``` 我們將繪圖事件連接到`OnPaint()`方法。所有繪圖都發生在`OnPaint()`事件處理器內。 ```cpp wxPaintDC dc(this); ``` 我們定義一個`wxPaintDC`設備上下文。它是設備上下文，用于在`wxPaintEvent`內部的窗口上繪制 ```cpp wxCoord x1 = 50, y1 = 60; wxCoord x2 = 190, y2 = 60; ``` 我們定義四個坐標。 ```cpp dc.DrawLine(x1, y1, x2, y2); ``` 我們畫一條簡單的線調用`DrawLine()`方法。 ![Line](https://img.kancloud.cn/a7/41/a74122cc0e3b04661c763abfff918ffd_282x212.jpg) 圖：一條簡單的線 ## 繪制文字在窗口上繪制一些文本很容易。 `text.h` ```cpp #include <wx/wx.h> class Text : public wxFrame { public: Text(const wxString & title); void OnPaint(wxPaintEvent & event); }; ``` `text.cpp` ```cpp #include "text.h" Text::Text(const wxString& title) : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(250, 150)) { Connect(wxEVT_PAINT, wxPaintEventHandler(Text::OnPaint)); Centre(); } void Text::OnPaint(wxPaintEvent& event) { wxPaintDC dc(this); dc.DrawText(wxT("Лев Николaевич Толстoй"), 40, 60); dc.DrawText(wxT("Анна Каренина"), 70, 80); } ``` `main.h` ```cpp #include <wx/wx.h> class MyApp : public wxApp { public: virtual bool OnInit(); }; ``` `main.cpp` ```cpp #include "main.h" #include "text.h" IMPLEMENT_APP(MyApp) bool MyApp::OnInit() { Text *text = new Text(wxT("Text")); text->Show(true); return true; } ``` 在我們的示例中，我們在窗口上繪制了俄羅斯阿茲布卡語的列夫·尼古拉耶維奇·托爾斯泰，安娜·卡列尼娜的文字。 ```cpp dc.DrawText(wxT("Лев Николaевич Толстoй"), 40, 60); dc.DrawText(wxT("Анна Каренина"), 70, 80); ``` `DrawText()`方法在窗口上繪制文本。它使用當前文本字體以及當前文本前景色和背景色在指定點繪制文本字符串。感謝`wxT()`宏，我們可以直接在代碼中使用西里爾字母。 `wxT()`宏與`_T()`宏相同。它包裝字符串字面值以使用或不使用 Unicode。未啟用 Unicode 時，`wxT()`是一個空宏。啟用 Unicode 時，它將為字符串字面值添加必要的`L`，以使其成為寬字符串常量。 ![Drawing text](https://img.kancloud.cn/76/16/76166e3e69efd737fa753891b1ecc4f5_290x209.jpg) 圖：繪制文本 #### 點最簡單的幾何對象是一個點。它是窗口上的一個普通點。 ```cpp DrawPoint(int x, int y) ``` 此方法在 x，y 坐標處繪制點。 `point.h` ```cpp #include <wx/wx.h> class Points : public wxFrame { public: Points(const wxString & title); void OnPaint(wxPaintEvent & event); }; ``` `points.cpp` ```cpp #include "points.h" #include <stdlib.h> #include <time.h> Points::Points(const wxString& title) : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(280, 180)) { this->Connect(wxEVT_PAINT, wxPaintEventHandler(Points::OnPaint)); srand(time(NULL)); this->Centre(); } void Points::OnPaint(wxPaintEvent & event) { wxPaintDC dc(this); wxCoord x = 0; wxCoord y = 0; wxSize size = this->GetSize(); for (int i = 0; i<1000; i++) { x = rand() % size.x + 1; y = rand() % size.y + 1; dc.DrawPoint(x, y); } } ``` `main.h` ```cpp #include <wx/wx.h> class MyApp : public wxApp { public: virtual bool OnInit(); }; ``` `main.cpp` ```cpp #include "main.h" #include "points.h" IMPLEMENT_APP(MyApp) bool MyApp::OnInit() { Points *points = new Points(wxT("Points")); points->Show(true); return true; } ``` 單點可能很難看清。因此，我們創建了 1000 點。每次調整窗口大小時，我們都會在窗口的客戶區域上繪制 1000 點。 ```cpp wxSize size = this->GetSize(); ``` 在這里，我們得到窗口的大小。 ```cpp x = rand() % size.x + 1; ``` 在這里，我們得到一個介于 1 到`size.x`范圍內的隨機數。 ![Points](https://img.kancloud.cn/c7/a7/c7a77b5886cb5873d6daae8bdda29ba1_282x212.jpg) 圖：點 ## 鋼筆筆是基本的圖形對象。它用于繪制矩形，橢圓形，多邊形或其他形狀的線，曲線和輪廓。 ```cpp wxPen(const wxColour& colour, int width = 1, int style = wxSOLID) ``` `wxPen`構造器具有三個參數：`colour`，`width`和`style`。以下是可能的筆樣式的列表： * `wxSOLID` * `wxDOT` * `wxLONG_DASH` * `wxSHORT_DASH` * `wxDOT_DASH` * `wxTRANSPARENT` `pen.h` ```cpp #include <wx/wx.h> class Pen : public wxFrame { public: Pen(const wxString& title); void OnPaint(wxPaintEvent& event); }; ``` `pen.cpp` ```cpp #include "pen.h" Pen::Pen(const wxString& title) : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(360, 180)) { this->Connect(wxEVT_PAINT, wxPaintEventHandler(Pen::OnPaint)); this->Centre(); } void Pen::OnPaint(wxPaintEvent& event) { wxPaintDC dc(this); wxColour col1, col2; col1.Set(wxT("#0c0c0c")); col2.Set(wxT("#000000")); wxBrush brush(wxColour(255, 255, 255), wxTRANSPARENT); dc.SetBrush(brush); dc.SetPen(wxPen(col1, 1, wxSOLID)); dc.DrawRectangle(10, 15, 90, 60); dc.SetPen(wxPen(col1, 1, wxDOT)); dc.DrawRectangle(130, 15, 90, 60); dc.SetPen(wxPen(col1, 1, wxLONG_DASH)); dc.DrawRectangle(250, 15, 90, 60); dc.SetPen(wxPen(col1, 1, wxSHORT_DASH)); dc.DrawRectangle(10, 105, 90, 60); dc.SetPen(wxPen(col1, 1, wxDOT_DASH)); dc.DrawRectangle(130, 105, 90, 60); dc.SetPen(wxPen(col1, 1, wxTRANSPARENT)); dc.DrawRectangle(250, 105, 90, 60); } ``` `main.h` ```cpp #include <wx/wx.h> class MyApp : public wxApp { public: virtual bool OnInit(); }; ``` `main.cpp` ```cpp #include "main.h" #include "pen.h" IMPLEMENT_APP(MyApp) bool MyApp::OnInit() { Pen *pen = new Pen(wxT("Pen")); pen->Show(true); return true; } ``` 在我們的示例中，我們繪制了 6 個具有不同筆樣式的矩形。最后一個是透明的，不可見。 ```cpp dc.SetPen(wxPen(col1, 1, wxSOLID)); dc.DrawRectangle(10, 15, 90, 60); ``` 在這里，我們為第一個矩形定義了一支筆。我們設置了一支顏色為`col1`（`#0c0c0c`），寬 1 像素的實心鋼筆。 `DrawRectangle()`方法繪制矩形。 ![Pen](https://img.kancloud.cn/54/d9/54d95ed1de2a45ddd9c0464078323783_362x212.jpg) 圖：筆 ## 區域可以組合區域以創建更復雜的形狀。我們可以使用四個設置操作：`Union()`，`Intersect()`，`Substract()`和`Xor()`。以下示例顯示了所有正在執行的四個操作。 `Regions.h` ```cpp #include <wx/wx.h> class Regions : public wxFrame { public: Regions(const wxString & title); void OnPaint(wxPaintEvent & event); }; ``` `Regions.cpp` ```cpp #include "Regions.h" Regions::Regions(const wxString& title) : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(270, 220)) { this->Connect(wxEVT_PAINT, wxPaintEventHandler(Regions::OnPaint)); this->Centre(); } void Regions::OnPaint(wxPaintEvent & event) { wxPaintDC dc(this); wxColour gray, white, red, blue; wxColour orange, green, brown; gray.Set(wxT("#d4d4d4")); white.Set(wxT("#ffffff")); red.Set(wxT("#ff0000")); orange.Set(wxT("#fa8e00")); green.Set(wxT("#619e1b")); brown.Set(wxT("#715b33")); blue.Set(wxT("#0d0060")); dc.SetPen(wxPen(gray)); dc.DrawRectangle(20, 20, 50, 50); dc.DrawRectangle(30, 40, 50, 50); dc.SetBrush(wxBrush(white)); dc.DrawRectangle(100, 20, 50, 50); dc.DrawRectangle(110, 40, 50, 50); wxRegion region1(100, 20, 50, 50); wxRegion region2(110, 40, 50, 50); region1.Intersect(region2); wxRect rect1 = region1.GetBox(); dc.SetClippingRegion(region1); dc.SetBrush(wxBrush(red)); dc.DrawRectangle(rect1); dc.DestroyClippingRegion(); dc.SetBrush(wxBrush(white)); dc.DrawRectangle(180, 20, 50, 50); dc.DrawRectangle(190, 40, 50, 50); wxRegion region3(180, 20, 50, 50); wxRegion region4(190, 40, 50, 50); region3.Union(region4); dc.SetClippingRegion(region3); wxRect rect2 = region3.GetBox(); dc.SetBrush(wxBrush(orange)); dc.DrawRectangle(rect2); dc.DestroyClippingRegion(); dc.SetBrush(wxBrush(white)); dc.DrawRectangle(20, 120, 50, 50); dc.DrawRectangle(30, 140, 50, 50); wxRegion region5(20, 120, 50, 50); wxRegion region6(30, 140, 50, 50); region5.Xor(region6); wxRect rect3 = region5.GetBox(); dc.SetClippingRegion(region5); dc.SetBrush(wxBrush(green)); dc.DrawRectangle(rect3); dc.DestroyClippingRegion(); dc.SetBrush(wxBrush(white)); dc.DrawRectangle(100, 120, 50, 50); dc.DrawRectangle(110, 140, 50, 50); wxRegion region7(100, 120, 50, 50); wxRegion region8(110, 140, 50, 50); region7.Subtract(region8); wxRect rect4 = region7.GetBox(); dc.SetClippingRegion(region7); dc.SetBrush(wxBrush(brown)); dc.DrawRectangle(rect4); dc.DestroyClippingRegion(); dc.SetBrush(white); dc.DrawRectangle(180, 120, 50, 50); dc.DrawRectangle(190, 140, 50, 50); wxRegion region9(180, 120, 50, 50); wxRegion region10(190, 140, 50, 50); region10.Subtract(region9); wxRect rect5 = region10.GetBox(); dc.SetClippingRegion(region10); dc.SetBrush(wxBrush(blue)); dc.DrawRectangle(rect5); dc.DestroyClippingRegion(); } ``` `main.h` ```cpp #include <wx/wx.h> class MyApp : public wxApp { public: virtual bool OnInit(); }; ``` `main.cpp` ```cpp #include "main.h" #include "Regions.h" IMPLEMENT_APP(MyApp) bool MyApp::OnInit() { Regions *regions = new Regions(wxT("Regions")); regions->Show(true); return true; } ``` ![Regions](https://img.kancloud.cn/3d/5f/3d5f79e59c62b64a5709274b3df0cd2a_272x252.jpg) 圖：區域 ## 漸變在計算機圖形學中，漸變是從淺到深或從一種顏色到另一種顏色的陰影的平滑混合。在 2D 繪圖程序和繪圖程序中，漸變用于創建彩色背景和特殊效果以及模擬燈光和陰影。（answers.com） ```cpp void GradientFillLinear(const wxRect& rect, const wxColour& initialColour, const wxColour& destColour, wxDirection nDirection = wxEAST) ``` 此方法從`initialColour`開始以線性漸變填充由 rect 指定的區域，最終逐漸漸變為`destColour`。 `nDirection`參數指定顏色更改的方向，默認值為`wxEAST`。 `gradient.h` ```cpp #include <wx/wx.h> class Gradient : public wxFrame { public: Gradient(const wxString& title); void OnPaint(wxPaintEvent& event); }; ``` `gradient.cpp` ```cpp #include "gradient.h" Gradient::Gradient(const wxString& title) : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(220, 260)) { this->Connect(wxEVT_PAINT, wxPaintEventHandler(Gradient::OnPaint)); this->Centre(); } void Gradient::OnPaint(wxPaintEvent& event) { wxPaintDC dc(this); wxColour col1, col2; col1.Set(wxT("#e12223")); col2.Set(wxT("#000000")); dc.GradientFillLinear(wxRect(20, 20, 180, 40), col1, col2, wxNORTH); dc.GradientFillLinear(wxRect(20, 80, 180, 40), col1, col2, wxSOUTH); dc.GradientFillLinear(wxRect(20, 140, 180, 40), col1, col2, wxEAST); dc.GradientFillLinear(wxRect(20, 200, 180, 40), col1, col2, wxWEST); } ``` `main.h` ```cpp #include <wx/wx.h> class MyApp : public wxApp { public: virtual bool OnInit(); }; ``` `main.cpp` ```cpp #include "main.h" #include "gradient.h" IMPLEMENT_APP(MyApp) bool MyApp::OnInit() { Gradient *grad = new Gradient(wxT("Gradient")); grad->Show(true); return true; } ``` ![Gradient](https://img.kancloud.cn/fd/6b/fd6b59abb5c46043f64354510dcfdb34_222x292.jpg) 圖：漸變 ## 形狀形狀是更復雜的幾何對象。在下面的示例中，我們將繪制各種幾何形狀。 `shapes.h` ```cpp #include <wx/wx.h> class Shapes : public wxFrame { public: Shapes(const wxString & title); void OnPaint(wxPaintEvent & event); }; ``` `shapes.cpp` ```cpp #include "shapes.h" Shapes::Shapes(const wxString& title) : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(350, 300)) { this->Connect(wxEVT_PAINT, wxPaintEventHandler(Shapes::OnPaint)); this->Centre(); } void Shapes::OnPaint(wxPaintEvent& event) { wxPaintDC dc(this); wxPoint lines[] = { wxPoint(20, 260), wxPoint(100, 260), wxPoint(20, 210), wxPoint(100, 210) }; wxPoint polygon[] = { wxPoint(130, 140), wxPoint(180, 170), wxPoint(180, 140), wxPoint(220, 110), wxPoint(140, 100) }; wxPoint splines[] = { wxPoint(240, 170), wxPoint(280, 170), wxPoint(285, 110), wxPoint(325, 110) }; dc.DrawEllipse(20, 20, 90, 60); dc.DrawRoundedRectangle(130, 20, 90, 60, 10); dc.DrawArc(240, 40, 340, 40, 290, 20); dc.DrawPolygon(4, polygon); dc.DrawRectangle(20, 120, 80, 50); dc.DrawSpline(4, splines); dc.DrawLines(4, lines); dc.DrawCircle(170, 230, 35); dc.DrawRectangle(250, 200, 60, 60); } ``` `main.h` ```cpp #include <wx/wx.h> class MyApp : public wxApp { public: virtual bool OnInit(); }; ``` `main.cpp` ```cpp #include "main.h" #include "shapes.h" IMPLEMENT_APP(MyApp) bool MyApp::OnInit() { Shapes *shapes = new Shapes(wxT("Shapes")); shapes->Show(true); return true; } ``` ![Shapes](https://img.kancloud.cn/d7/ae/d7ae97ef75f8af2a7da98d14b2d6428a_352x332.jpg) 圖：形狀在本章中，我們介紹了 wxWidgets 中的 GDI。