在CodeBolcks下wxSmith的C++编程教程——在屏幕上绘图和保存绘图

0.前言

 欢迎来到 wxSmith 教程页面！wxSmith 与 Code::Blocks、wxWidgets 和 C++ 编译器相结合，为您提供一种所见即所得的方式来创建具有图形用户界面 （GUI） 的应用程序。该组合形成了一个用于快速应用程序开发 （RAD） 的工具，可在 Linux、Mac OS X 和 Windows 上运行。当您工作时，您会在屏幕上看到您正在设计的表单;他们看着你，就像他们看着你的程序的用户一样。

这些教程假设您是Code::Blocks 或 wxWidgets 的初学者，事实上，它们也是学习它们的好教程；假设您对 C++ 有基本的了解，您能够看懂教程中的C++实例代码。
这套教程的其他文章可以从以下文章中找到：

在CodeBolcks下wxSmith的C++编程教程——wxSmith教程目录（序言） - lexyao - 博客园

编写这篇文章参照了Code::Blocks 用户文档中wxSmith教程的以下文章：

WxSmith tutorial: Drawing on the Screen and Saving Drawings - Code::Blocks

在这篇文章中你将看到以下内容：

1. 关于在屏幕上绘图和保存绘图
2. 在屏幕上绘图
3. 将图片另存为 PNG 和 JPEG 文件
4. 可展开的图
5. 结束语

1.关于在屏幕上绘图和保存绘图

上一篇教程中我们讲述了基础的绘制图形的操作，在这一篇教程中我们将讲解更多的图形绘制知识。

在本教程中，我们将在屏幕上绘制如下图，并将其保存为.jpg和.png文件。

 或许这篇教程的英文版（Code::Blocks 用户文档中wxSmith教程）的作者是俄罗斯人，他把图片中的方块解释为俄罗斯元素，而第二行的西里尔文字“Красная площадь”的意思是红场（莫斯科红场）。我在图片中添加了一行中文，哈哈哈。其实，图片中有什么不重要，重要的是我们以此为例讲述绘图的方法。

在 wxWidgets 中，人们总是在某种设备上下文上绘制一个图形。从使用 wxWidgets 的程序员的角度来看，设备上下文是一个黑匣子，它使我们不必知道如何将图形发送到打印机、屏幕、位图和.jpg文件的详细信息。完全相同的代码创建用于所有三个输出设备的图形。让我用示意图代码来说明我们的例子。

像往常一样，我们将从一个空应用程序开始，项目名称为tu08。在项目的主窗口中添加三个按钮，这篇教程中绘制图形的操作将通过点击这三个按钮启动。
构建并运行项目，确保项目能够正常构建、运行。运行后看到的主窗口如下图所示：

 

2.在屏幕上绘图

为了在屏幕上显示图表，我们需要一个框架中的面板，因此在 Code：：Blocks 主菜单上单击 wxSmith 项并选择“添加 wxFrame”。当窗口出现询问类名并建议“NewFrame”时，让我们将其命名为“PictureFrame”(只要是合法的名字就行，你也可以用其他的合法的名字)。接受建议的其他默认值，然后完成添加框架。

在进一步讨论之前，我们必须修复当用户尝试关闭此框架时会发生什么。双击PictureFrame，此时将显示与框架关联的 C++ 代码。在文件底部，您应该会看到以下行：

    void PictureFrame::OnClose(wxCloseEvent& event){}

我们希望当用户尝试关闭 PictureFrame 窗口时不能关闭主窗口。如果我们像以前一样将 Close（） 命令放入大括号之间的正文中，则关闭此窗口将关闭整个应用程序。相反，我们放置 Destroy（），它会清除当前窗口，但不会关闭整个程序。所以我们应该有：

    void PictureFrame::OnClose(wxCloseEvent& event){Destroy();}

现在回到编辑区（单击 C++ 代码上方栏中的 PictureFrame.wxs），在PictureFrame 上放置一个 wxBoxSizer，并在 wxBoxSizer中放置一个wxPanel面板。我们将在此面板绘制图片以在屏幕上查看。在属性浏览器中，选中其“Expand”框，取消选中“默认大小”，然后将“宽度”填写为 310，“高度”填写为 210。（准备画一个 300 X 200 的矩形，所以这给了他在边缘周围有一点额外的空间。

现在，我们需要为此面板的 Paint 事件添加一些代码。因此，单击面板，单击属性浏览器上方的 {}，找到EVT_PAINT（它应该在列表的顶部），单击它，然后单击行右边缘的向下箭头，然后选择添加新处理程序。接受建议的名称，然后单击确定。

您会发现自己回到了PictureFrame.cpp，并显示了以下用于编写代码来处理此事件的框架：

void PictureFrame::OnPanel1Paint(wxPaintEvent& event)
{
}

我们只需要在框架中间添加两行，如下所示：

void PictureFrame::OnPanel1Paint(wxPaintEvent& event)
{wxPaintDC dc( Panel1 );Repin(dc);
}

上面代码中有一个名为Repin的函数，这是我们给绘制图形的函数取的名字。以下是函数Repin的代码，将这些代码复制到PictureFrame.cpp文件中PictureFrame::OnPanel1Paint之前：

void Repin(wxDC &dc)
{// 将设备上下文清除为全白dc.SetBrush(*wxWHITE_BRUSH);dc.Clear();// 创建一个宽5像素的蓝色画笔用于绘制边框。wxColor Blue(0, 0, 255);wxPen myBluePen(Blue, 10, wxSOLID);// 告诉dc使用它
    dc.SetPen(myBluePen);// 用蓝色边框绘制一个矩形，矩形的内部用当前画刷填充，当前画刷是白色dc.DrawRectangle(0, 0, 300, 200);// 设置画刷和画笔为红色dc.SetBrush(*wxRED_BRUSH);dc.SetPen(*wxRED_PEN);// 绘制高和宽都是40像素的矩形，它的左上角坐标为10，10dc.DrawRectangle(10, 10, 40, 40);// 创建一支宽3像素的绿色画笔，用于绘制一条实线wxPen myGreenPen(*wxGREEN, 3, wxSOLID);// 告诉dc开始用这支笔画画。
    dc.SetPen(myGreenPen);// 画一条水平线dc.DrawLine(55, 40, 290, 40);// 将文本前景设置为黑色dc.SetTextForeground(*wxBLACK);// 用默认的字体、字号绘制一些文字dc.DrawText(wxT("Красная площадь"), 50, 60);dc.DrawText(wxT("我爱北京天安门"), 50, 90);// 创建一个16磅的字体，既不粗体， 也不斜体，无下划线。wxFont BigFont(16, wxFONTFAMILY_ROMAN, wxNORMAL, wxNORMAL, false);// 告诉dc使用这个字体
    dc.SetFont(BigFont);// 写下我们图片的标题。dc.DrawText(wxT("Red Square"), 60, 10);
}

至此我们已经完成了PictureFrame 绘制图形的程序设计，下面我们将添加代码在主窗口中通过点击按钮“Show”将PictureFrame 显示出来。为此，单击代码编辑器上方行中的 tu08Frame.wxs以返回主窗口，双击“Show”按钮为其添加事件响应函数，并添加以下代码(在tu08frame.cpp中)：

void tu08Frame::OnButton1Click(wxCommandEvent& event)
{PictureFrame* frm = new PictureFrame(this);frm->Show();
}

在tu08frame.cpp中包含头文件PictureFrame.h：

#include "PictureFrame.h"

最后，我们构建并运行的程序，在应用程序的主界面点击“Show”按钮，将会看到PictureFrame运行后的画面，说明Repin能够正常工作了。

 你会发现，每点击Show按钮一次就会打开一个PictureFrame窗口。你可以关闭PictureFrame窗口；关闭主窗口时还没有关闭的PictureFrame窗口也会一同关闭。

3.将图片另存为 PNG 和 JPEG 文件

我们希望运行时单击“Save”按钮时绘图保存为 PNG 和 JPEG 文件，需要为响应Save按钮的点击事件添加代码。

要将我们的绘图保存到文件中，我们需要做以下工作：

1. 首先创建一个位图，
2. 然后创建一个内存设备上下文（DC），
3. 接着将位图交给内存DC用作绘画的纸张，
4. 然后让Repin在上面绘图，
5. 最后从DC中释放位图，并将其写入为文件。 

在编辑器中双击“Save”按钮，在按钮的事件响应函数中添加以下代码：

void tu08Frame::OnButton2Click(wxCommandEvent& event)
{// 创建一个宽 300 像素，高 200 像素的位图。// 称之为“纸”，因为我们将在上面书写。wxBitmap *paper = new wxBitmap(300, 200);// 创建一个内存设备上下文
    wxMemoryDC memDC;// 告诉memDC在“纸上”写。memDC.SelectObject(*paper);// 调用Repin函数在memDC上画我们的图像
    Repin(memDC);// 告诉 memDC 在一个虚假的位图上写入；// 这释放了“纸张”，以便它可以将自己写入文件。
    memDC.SelectObject(wxNullBitmap);// 将“纸”中的内容放入一个png和一个jpeg文件中。paper->SaveFile(_T("RedSquare.png"), wxBITMAP_TYPE_PNG, (wxPalette*)NULL);paper->SaveFile(_T("RedSquare.jpg"), wxBITMAP_TYPE_JPEG, (wxPalette*)NULL);delete paper;
}

构建并运行应用程序，单击Save按钮，然后打开应用程序tu08.exe所在的文件夹，你会看到两个图形文件。

 打开这两个文件，你会看到里面正是我们使用Repin绘制的图像。

（为了成功编译上述内容，您需要添加一个函数原型，以便 Repin（） 在tu08Main.cpp中可见。在 PictureFrame.h 的末尾，在结束标头保护之前添加行 void Repin（wxDC &dc）; 。）

4.可展开的图

当我们运行时单击“Show”按钮打开PictureFrame窗口，我们可以拖动改变窗口的大小，但绘图的大小不受影响。
让我们为 Stretch 按钮添加事件响应代码，并绘制一个图形，当用户调整显示它的框的大小时，它确实会改变大小和比例。该图将是一个红色矩形，带有固定宽度的绿色边框。

和创建PictureFrame时一样，在 Code::Blocks 主菜单上，选择 wxSmith >>Add wxFrame;接受框架的建议名称，即 NewFrame。使用 Destroy（） 填充 OnClose 代码框。在框架上，放一个盒子尺寸;在尺寸管理器中放置一个面板，在属性浏览器中将面板设置为 200 宽和 200 高。请务选中“Expand”属性。通过单击 {} 图标将属性浏览器更改为事件浏览器，找到 Paint 事件，单击行右侧的下拉箭头，然后选择“Add new handler”。在显示的代码框中，添加代码以获取以下内容：

void NewFrame::OnPanel1Paint(wxPaintEvent& event)
{wxPaintDC dc( Panel1 );dc.SetPen( wxPen( *wxGREEN, 5 ) ); // 绿色的笔宽5像素dc.SetBrush(*wxRED_BRUSH);// 获取窗口尺寸wxSize sz = GetClientSize();// 我们的矩形尺寸wxCoord w = sz.x/2 , h = sz.y/2;// 将矩形居中在窗口上，但不要在负位置绘制。int x = wxMax(0, (sz.x - w)/2);int y = wxMax(0, (sz.y - h)/2);wxRect rectToDraw(x, y, w, h);dc.DrawRectangle(rectToDraw);
}

此代码引入了几个新的 wxWidgets 结构：wxSize、wxCoord、wxRect 和 wxMax 函数。从名称和此处的使用方式中可以清楚地看出它们的含义。当然，C++ 函数 GetClientSize（） 是使绘图大小取决于绘制窗口大小的关键。

现在回到主窗口的代码中，在顶部添加 #include“NewFrame.h”行。然后让 wxSmith 给你标有“Stretch”的按钮的代码框架。在该代码框架中添加行以使整体如下所示：

void tu08Frame::OnButton3Click(wxCommandEvent& event)
{NewFrame* ffrm = new NewFrame(this);ffrm->Show();}

构建并运行应用程序。单击“Stretch”按钮。您应该得到带有绿色边框的红色矩形的图片。现在尝试更改窗口的大小，矩形应该按比例放大或缩小。

 

5.结束语

在这篇教程中，我们讲述了更多的绘制图形的方法，文字也是一种图形。
要了解更多的图形绘制的方法，可以通过多看多练达到自己的目的。