Qt图形 课程设计.

1、 图形图像的绘制郑州科技学院 QT课程设计 题 目 图形图像的绘制 学生姓名 专业班级 学 号 所 在 系 信息工程学院 指导教师 完成时间 年 月日 目 录1. 概述41.1 背景说明41.1.1简介4 1.1.2 功能和优势41.2 项目名称51.3 项目功能51.4 项目基本框架结构52. 各模块功能的介绍6 2.1 工具栏6 2.1.1 file文件6 2.1.2 help帮助72.2 操纵台7 2.2.1 style线型选择7 2.2.2 width画笔宽度8 2.2.3 color画笔颜色8 2.2.4 clear清空画板9 2.2.5 绘制图形9 2.2.6 erasor 橡皮擦

2、10 2.2.7坐标定位11 2.2.8画布112.3 布局格式113. 详细设计123.1 子菜单功能的实现12 3.1.1 New功能的实现12 3.1.2 Open 功能的实现13 3.1.3 Save 功能的实现13 3.1.4 SaveAs 功能的实现14 3.1.5 Exit 功能的实现153.2 悬浮窗内各个功能的实现15 3.2.1 Style功能的实现15 3.2.2 Width 功能的实现16 3.2.3 Color 功能的实现17 3.2.4 Clear 功能的实现18 3.2.5 绘图功能的实现19 3.2.6 erasor 功能的实现203.3 鼠标形状设置203.4

3、 坐标位置显示功能的实现214. 项目中所用到的QT知识介绍214.1 信号与槽214.2 创建主窗口234.3 自定义窗口部件234.4 布局管理234.5 QT中的事件机制244.6 二维图形的绘制254.7 项目中建立的类254.8 类之间的相互关系25结束语26致谢26参考文献2731.概述1.1背景说明 1.1.1简介 Qt Creator 包括项目生成向导、高级的 C+ 代码编辑器、浏览文件及类的工具、集成了 Qt Designer、Qt Assistant、Qt Linguist、图形化的 GDB 调试前端，集成 qmake 构建工具等。1.1.2 功能和优势 QtCreator

4、主要是为了帮助新 Qt 用户更快速入门并运行项目，还可提高有经验的 Qt 开发人员的工作效率。1.使用强大的 C+ 代码编辑器可快速编写代码语法标识和代码完成功能输入时进行静态代码检验以及提示样式上下文相关的帮助代码折叠括号匹配和括号选择模式高级编辑功能2.使用浏览工具管理源代码集成了领先的版本控制软件，包括 Git、Perforce 和 Subversion开放式文件，无须知晓确切的名称或位置搜索类和文件跨不同位置或文件沿用符号在头文件和源文件，或在声明和定义之间切换3.为Qt跨平台开发人员的需求而量身定制集成了特定于 Qt 的功能，如信号与槽 (Signals & Slots)图示调试器，

5、 对 Qt 类结构可一目了然集成了 Qt Designer 可视化布局和格式构建器只需单击一下就可生成和运行 Qt 项目。1.2 项目名称图形图像的绘制1.3项目功能在本项目中利用QT creator对图像图形进行相应的绘制，在此过程中，操作者可以实现文件的新建、打开、保存、另存为、退出以及相应的帮助功能，在主要的操作窗口中可以选择相应的样式风格，以及用户所要绘制的图形图像，用户可以对自己所绘制的图形做些相应的修改，例如：修改图形的宽度、颜色等，如果用户对自己所绘制的图形不满意的情况下，还可以选择不同大小的橡皮擦，对需要进行修改的图形进行修改。1.4项目基本框架结构 运行结果如下图： 图1.1

6、 图1.2 图1.32. 各模块功能的介绍2.1工具栏2.1.1 file文件文件的下拉菜单中包含1. new（新建）newAct=newQAction(QIcon(:/new/prefix1/image/new.PNG),tr(&New),this);2. open（打开一个图片）openAct=newQAction(QIcon(:/images/open.png),tr(&Open.),this);3. save（保存）在此菜单中用户可以根据提示将所打开的文件保存到自己想要保存的位置，方便以后用户的查找。saveAct=newQAction(QIcon(:/new/prefix1/imag

7、e/save.PNG),tr(&Save),this);4. saveas（另存为）和save的功能类似，只是用户将打开的文件保存的时候更改一下路径。saveAsAct=newQAction(tr(Save&As.),this);5. exit（退出）。exitAct=newQAction(tr(E&xit),this);2.1.2 help帮助 不懂本工具操作的用户可以查看qt creator的相应信息，使用户对本工具的了解更加深入。2.2操纵台2.2.1 style线型选择通过一个组合框对以下线性进行选择：1.SolidLine实线2.DashLine虚线3.DotLine点线4.Dash

8、DotLine一个虚线一个点组成的线5.DashDotDotLine一个虚线两个点组成的线可以在源文件controlbox中进行相应的操作，具体代码如下：styleLabel = new QLabel(style);styleComboBox = new QComboBox;styleComboBox-addItem(tr(SolidLine),static_cast(Qt:SolidLine);styleComboBox-addItem(DashLine,static_cast(Qt:DashLine);styleComboBox-addItem(DotLine,static_cast(Qt

9、:DotLine); styleComboBox-addItem(DashDotLine,static_cast(Qt:DashDotLine); styleComboBox-addItem(DashDotDotLine,static_cast(Qt:DashDotDotLine);2.2.2 width画笔宽度 用户可通过一个组件布局选择自己所需要的画笔宽度，在此项目中画笔宽度默认值为1，具体实现方式如下:widthLabel = new QLabel(Width);widthSpinBox = new QSpinBox;widthSpinBox-setValue(1);2.2.3 colo

10、r画笔颜色 用户可以手动的调整画笔颜色，此项目画笔的颜色默认为黑色，具体实现功能的代码如下：colorLabel = new QLabel(Color);colorBtn = new QToolButton;QPixmap pixmap(20,20);ixmap.fill(Qt:black);colorBtn-setIcon(QIcon(pixmap);图例为： 2.2.4 clear清空画板 点击相应的按钮可清除用户在画板上所做的操作，恢复成最原始的状态，具体实现如以下代码：clearBtn = new QToolButton();clearBtn-setText(clear);2.2.5

11、绘制图形用户可以绘制的图形有：1. rectangle矩形rectangle=new QPushButton(QIcon(:/new/prefix1/image/qpainter-rectangle.png),tr(rectangle),0);2. roundrectangle圆角矩形roundrect=new QPushButton(QIcon(:/new/prefix1/image/qpainter-roundrect.png),tr(roundrect),0);3. ellipse椭圆（当按着Shift键绘制时为圆形）ellipse=new QPushButton(QIcon(:/new

12、/prefix1/image/qpainter-ellipse.png),tr(ellipse ),0);4. chord弦chord=new QPushButton(QIcon(:/new/prefix1/image/qpainter-chord.png),tr(chord ),0);5. line线line=new QPushButton(QIcon(:/new/prefix1/image/Line(2).png),tr(line ),0);6. pen画笔pen=new QPushButton(QIcon(:/new/prefix1/image/cursor_pen.png),tr(pe

13、n ),0);2.2.6 erasor 橡皮擦用户在不满意的情况下可以使用橡皮擦工具，可以将自己不满意的地方进行擦除，然后就可以按照自己想绘制的图形进行相应的修改。erasor=new QPushButton(QIcon(:/new/prefix1/image/cursor_erasor.png),tr(eraser ),0);用户可以在橡皮按钮后面的一个组合框中选择自己想要的橡皮的大小，具体可以选择3mm、6mm、9mm,这样可以使用户更加方便的对自己绘制的图形图像进行相应的修改。erasorComboBox = new QComboBox;erasorComboBox-addItem(QI

14、con(:/new/prefix1/image/3mmLine.png),tr(3mm),0);erasorComboBox-addItem(QIcon(:/new/prefix1/image/6mmLine.png),tr(6mm),0);erasorComboBox-addItem(QIcon(:/new/prefix1/image/10mmLine.png),tr(9mm),0);2.2.7坐标定位可以显示画布中鼠标的具体位置。2.2.8画布画布的创建创建一张新的画布，等待用户绘制图片。实现代码如下：pix=newQPixmap(this-size();画布的颜色初始化初始化画布的颜色，

15、使它拥有一个初始背景颜色。实现代码如下：pix-fill(Qt:white);画板大小初始化画布的大小，使它能适合画板控件。实现代码如下：pix=newQPixmap(this-size();setMinimumSize(600,400);2.3布局格式使用的是QVBoxLayout 垂直管理器格式的布局。QGridLayout *gridLayout = new QGridLayout(this);spacelayout=new QVBoxLayout;gridLayout-addWidget(styleLabel,0,0);gridLayout-addWidget(styleComboBo

16、x,0,1,1,2);gridLayout-addWidget(widthLabel,1,0);gridLayout-addWidget(widthSpinBox,1,1,1,2);gridLayout-addWidget(colorLabel,2,0);gridLayout-addWidget(colorBtn,2,1);gridLayout-addWidget(clearBtn,3,0);gridLayout-addWidget(rectangle,4,0,1,4);gridLayout-addWidget(roundrect,5,0,1,4);gridLayout-addWidget(e

17、llipse,6,0,1,4);gridLayout-addWidget(chord,7,0,1,4);gridLayout-addWidget(line,8,0,1,4);gridLayout-addWidget(pen,9,0,1,4);gridLayout-addWidget(erasor,10,0);gridLayout-addWidget(erasorComboBox,10,1,1,2);gridLayout-addLayout(spacelayout,12,0,2,4);3. 详细设计3.1子菜单功能的实现3.1.1 New功能的实现步骤如下：新建一个QAction,并将此子菜单项

18、命名为NewnewAct=newQAction(QIcon(:/new/prefix1/image/new.PNG),tr(&New),this);添加快捷键：newAct-setShortcuts(QKeySequence:New); Ctrl+N当鼠标指向此子菜单项的时候，在状态栏显示信息为：Create a new filenewAct-setStatusTip(tr(Createanewfile);当此子菜单项被触发（单击子菜单项）的时候，激活newFile 槽函数。connect(newAct,SIGNAL(triggered(),this,SLOT(newFile();在此应用到信

19、号-槽机制，这是QT里面极为重要的特色内容，当一个QAction被触发的时候，系统会自动调用与此信号相关联的槽函数，newFile()是自定义的一个实现新建图片文件的槽函数。将此QAction添加到File 菜单中：fileMenu-addAction(newAct);3.1.2 Open 功能的实现步骤如下：新建一个QAction,并将此子菜单项命名为OpenopenAct=newQAction(QIcon(:/images/open.png),tr(&Open.),this);添加快捷键：openAct-setShortcuts(QKeySequence:Open); Ctrl+O当鼠标指

20、向此子菜单项的时候，在状态栏显示信息为：Open an existing fileopenAct-setStatusTip(tr(Openanexistingfile);当此子菜单项被触发（单击子菜单项）的时候，激活Open() 槽函数。connect(openAct,SIGNAL(triggered(),this,SLOT(open();在此应用到信号-槽机制，这是QT里面极为重要的特色内容，当一个QAction被触发的时候，系统会自动调用与此信号相关联的槽函数，open()是自定义的一个实现打开一个图片文件的槽函数。将此QAction添加到File 菜单中：fileMenu-addActi

21、on(openAct);3.1.3 Save 功能的实现步骤如下：新建一个QAction,并将此子菜单项命名为SavesaveAct=newQAction(QIcon(:/new/prefix1/image/save.PNG),tr(&Save),this);添加快捷键：saveAct-setShortcuts(QKeySequence:Save);Ctrl+s当鼠标指向此子菜单项的时候，在状态栏显示信息为：Save the document to disksaveAct-setStatusTip(tr(Save the document to disk);当此子菜单项被触发（单击子菜单项）的

22、时候，激活Save() 槽函数。connect(saveAct, SIGNAL(triggered(), this, SLOT(save();在此应用到信号-槽机制，这是QT里面极为重要的特色内容，当一个QAction被触发的时候，系统会自动调用与此信号相关联的槽函数，Save()是自定义的一个实现保存图片文件的槽函数。将此QAction添加到File 菜单中：fileMenu-addAction(saveAct);3.1.4 SaveAs 功能的实现步骤如下：新建一个QAction,并将此子菜单项命名为SaveAssaveAsAct=newQAction(tr(Save&As.),this)

23、;添加快捷键：saveAsAct-setShortcuts(QKeySequence:SaveAs);Ctrl+s+a当鼠标指向此子菜单项的时候，在状态栏显示信息为：Save the document under a new namesaveAsAct-setStatusTip(tr(Save the document under a new name);当此子菜单项被触发（单击子菜单项）的时候，激活saveAs() 槽函数。connect(saveAsAct, SIGNAL(triggered(), this, SLOT(saveAs();在此应用到信号-槽机制，这是QT里面极为重要的特色内

24、容，当一个QAction被触发的时候，系统会自动调用与此信号相关联的槽函数，saveAs()是自定义的一个实现将图片文件另存为一个新文件的槽函数。将此QAction添加到File 菜单中：fileMenu-addAction(saveAsAct);3.1.5 Exit 功能的实现步骤如下：新建一个QAction,并将此子菜单项命名为ExitexitAct=newQAction(tr(E&xit),this);添加快捷键：exitAct-setShortcuts(QKeySequence:Quit);当鼠标指向此子菜单项的时候，在状态栏显示信息为：Exit the applicationexit

25、Act-setStatusTip(tr(Exit the application);当此子菜单项被触发（单击子菜单项）的时候，激活close() 槽函数。connect(exitAct, SIGNAL(triggered(), this, SLOT(close();在此应用到信号-槽机制，这是QT里面极为重要的特色内容，当一个QAction被触发的时候，系统会自动调用与此信号相关联的槽函数，close()是系统内部的一个实现关闭或者退出一个应用程序的槽函数。将此QAction添加到File 菜单中：fileMenu-addAction(exitAct);3.2 悬浮窗内各个功能的实现3.2.1

26、 Style功能的实现 步骤如下：在组合框中添加线型： styleComboBox-addItem(tr(SolidLine),static_cast(Qt:SolidLine); styleComboBox-addItem(DashLine,static_cast(Qt:DashLine); styleComboBox-addItem(DotLine,static_cast(Qt:DotLine); styleComboBox-addItem(DashDotLine,static_cast(Qt:DashDotLine); styleComboBox-addItem(DashDotDotLi

27、ne,static_cast(Qt:DashDotDotLine);这些线型都是QT 内部自定义。关联信号与槽connect(controlBox-styleComboBox,SIGNAL(activated(int),this,SLOT(ShowStyle();将组合框内子项的触发与主窗口类中的ShowStyle()槽函数进行关联。单击某个线型的时候就会自动调用ShowStyle()槽函数。ShowStyle()槽函数的实现内容是：void MainWindow:ShowStyle()drawArea-setStyle(controlBox-styleComboBox-itemData( c

28、ontrolBox-styleComboBox-currentIndex(),Qt:UserRole).toInt();即：给画板的setStyle（）函数传递一个线型参数，下面为setStyle（）函数：void DrawWidget:setStyle(int s) style = s;这样style就获得一个整型值。再通过执行下面的这条语句就完成了画笔线型的选择：pen.setStyle(Qt:PenStyle)style);3.2.2 Width 功能的实现步骤如下：添加宽度框widthSpinBox：widthSpinBox = new QSpinBox;widthSpinBox-se

29、tValue(1）;给了它一个默认宽度。信号与槽关联connect(controlBox-widthSpinBox,SIGNAL(valueChanged(int),drawArea,SLOT(setWidth(int);那么，当widthSpinBox的值被改变的时候，将调用画板的setWidth()方法，setWidth()方法内容如下：void DrawWidget:setWidth(int w) weight = w;这时便将widthSpinBox中的索引值作为参数传递给变量weight，再通过pen.setWidth(weight);这条语句的执行就完成了画笔宽度的调节。3.2.3

30、 Color 功能的实现步骤如下：添加颜色colorBtn colorBtn=new QToolButton;信号与槽关联connect(controlBox-colorBtn,SIGNAL(clicked(),this,SLOT(ShowColor();单击colorBtn将调用主窗口类的ShowColor()，ShowColor()槽函数内容如下：void MainWindow:ShowColor() QColor = QColorDialog:getColor(Qt:black,this); if(color.isValid() drawArea-setColor(color); QPi

31、xmap p(20,20); p.fill(color); controlBox-colorBtn-setIcon(QIcon(p); Color用于获得用户选择的某种颜色值，画板类中的setColor(color)：void DrawWidget:setColor(QColor c) color = c;将颜色参数传递过来，再执行画板类中pen.setColor(color);语句，即完成画笔颜色选择。3.2.4 Clear 功能的实现步骤如下：添加clearBtn按钮clearBtn-setText(clear);信号与槽关联connect(controlBox-clearBtn,SIGN

32、AL(clicked(),drawArea,SLOT(clear();在主窗口类中将其关联，单击clearBtn的时候，调用画板类中槽函数clear()：void DrawWidget:clear() pix-fill(Qt:white); this-update();即可清除画布上的所有内容。3.2.5 绘图功能的实现步骤如下：添加各个按钮rectangle-line，逐个添加并且为它们布局。信号与槽相关联connect(controlBox-rectangle,SIGNAL(clicked(),drawArea,SLOT(drawrectangle();connect(controlBox

33、-roundrect,SIGNAL(clicked(),drawArea,SLOT(drawroundrect();connect(controlBox-ellipse,SIGNAL(clicked(),drawArea,SLOT(drawellipse();connect(controlBox-chord,SIGNAL(clicked(),drawArea,SLOT(drawchord();connect(controlBox-line,SIGNAL(clicked(),drawArea,SLOT(drawline();由上面的代码可见，其中任意一个按钮被单击的时候将会调用与此按钮信号相关联

34、的槽函数，它们的绘图方法都极为相似，我们拿drawrectangle()进行解析：void DrawWidget:drawrectangle() shape=Rectangle; this-setCursor(Qt:CrossCursor);其中shape 是枚举类型，这时通过判断shape的值执行相应的绘图语句，如果是Rectangle，则执行绘制矩形语句。3.2.6 erasor 功能的实现步骤如下：添加erasor按钮信号与槽相关联connect(controlBox-erasor,SIGNAL(clicked(),drawArea,SLOT(erasor();橡皮擦的实现和画笔是同样的

35、原理，只不过将画笔的颜色设置为白色，可以涂去画板上的内容。 pen.setColor(Qt:white);添加erasor宽度组合框erasor宽度信号与槽相关联connect(controlBox-erasorComboBox,SIGNAL(currentIndexChanged(int),drawArea,SLOT(setErasorWidth(int);槽函数获得一个索引值赋给erasorWith,执行pen.setWidth(erasorWidth);可设置橡皮擦宽度。3.3 鼠标形状设置第一种：this-setCursor(Qt:CrossCursor);内部鼠标形状。第二种：QCu

36、rsor*cursor=newQCursor(QPixmap(:/new/prefix1/image/10mm.png),-1,-1);this-setCursor(*cursor);自定义鼠标形状。3.4坐标位置显示功能的实现这里涉及到鼠标移动事件以及信号槽机制。在画板类中的鼠标移动事件中发射一个信号：Emit signalMousePos(e-pos().x(),e-pos().y();意思是将获得的当前鼠标位置坐标作为信号的参数进行发送。在主窗口类中定义一个槽函数如下:void MainWindow:setMousePosDisplay(int x, int y) QString str

37、 = ( + QString:number(x) + , +QString:number(y) + ); statusBar()-showMessage(str);用以得到当前鼠标的坐标位置。将信号和槽相关联connect(drawArea,SIGNAL(signalMousePos(int,int),this,SLOT(setMousePosDisplay(int,int);本项目的内容以及画图工具功能的实现基本如上所述。4.项目中所用到的QT知识介绍4.1信号与槽 信号和槽机制是 QT 的核心机制，要精通 QT 编程就必须对信号和槽有所了解。信号和槽是一种高级接口，应用于对象之间的通信，它

38、是 QT 的核心特性，也是 QT 区别于其它工具包的重要地方。信号和槽是 QT 自行定义的一种通信机制，它独立于标准的 C/C+ 语言，因此要正确的处理信号和槽，必须借助一个称为 moc（Meta Object Compiler）的 QT 工具，该工具是一个 C+ 预处理程序，它为高层次的事件处理自动生成所需要的附加代码。你可以将很多信号与单个的槽进行连接，也可以将单个的信号与很多的槽进行连接，甚至于将一个信号与另外一个信号相连接也是可能的，这时无论第一个信号什么时候发射系统都将立刻发射第二个信号。总之，信号与槽构造了一个强大的部件编程机制。信号由moc 自动生成，他们不应该在.cpp文件中实

39、现。例如:Signals:Void mySignal();Void mySignal(int x);Void mySignal(int x); Void mySignalParam(int x,int y);槽函数也分为三种类型，即 public slots、private slots 和 protected slots。 public slots：在这个区内声明的槽意味着任何对象都可将信号与之相连接。这对于组件编程非常有用，你可以创建彼此互不了解的对象，将它们的信号与槽进行连接以便信息能够正确的传递。 protected slots：在这个区内声明的槽意味着当前类及其子类可以将信号与之相连接

40、。这适用于那些槽，它们是类实现的一部分，但是其界面接口却面向外部。 private slots：在这个区内声明的槽意味着只有类自己可以将信号与之相连接。这适用于联系非常紧密的类。 通过调用 QObject 对象的 connect 函数来将某个对象的信号与另外一个对象的槽函数相关联，这样当发射者发射信号时，接收者的槽函数将被调用。该函数的定义如下： bool QObject:connect ( const QObject * sender, const char * signal, const QObject * receiver, const char * member ) static这个函

41、数的作用就是将发射者 sender 对象中的信号 signal 与接收者 receiver 中的 member 槽函数联系起来。当指定信号 signal 时必须使用 QT 的宏 SIGNAL()，当指定槽函数时必须使用宏 SLOT()。如果发射者与接收者属于同一个对象的话，那么在 connect 调用中接收者参数可以省略。4.2创建主窗口主窗口是构建应用程序用户界面的框架，其中包括菜单，工具栏以及应用程序所需的对话框。在本项目中利用QMain Window类创建了主窗口，继承了Main Window的详细方法，具体内容详见代码。4.3自定义窗口部件 窗口中显示的不同部件，既可以是QT中提供的类

42、所定义的对象，也可以是自己绘制的。自定义窗口部件要用到QWidget类，以及在绘制界面时用到的双缓冲技术。其中QWidget类是所有用户界面对象类的基类，经常用到的一些构成界面的窗口部件都是继承自它，例如：QLable、QLainEdit等子类。这些部件可以在界面上显示，组成了与用户交互的窗口，都具有一些QWidget类的共有特点。双缓冲技术是图形图像处理编程过程中的基本技术。4.4布局管理 对于一个GUI用户界面来说，合理地安排每一个窗口部件是很必要的。如果没有合理的布局，那么界面会变的杂乱无章，将会影响与用户的交互功能，从而失去了GUI用户界面最本质的功能。例如：窗口部件在界面布局中的位置

43、、大小等。特别是当用户对窗口进行拉伸的时候，窗口部件中的子窗口部件也应该做出相应的变化，否则有些部件将无法进行正常使用。对于一个常见的窗口子部件，它在窗口中的位置以及大小应该是固定的，那么怎么来确定它的大小和位置，QT提供了三种方式：绝对位置；手工布局；布局管理器，其中布局管理器还包括水平布局管理器QHBoxLayout、垂直布局管理器QVBoxLayout、网格布局管理器QGridLayout。在本项目中使用了垂直布局管理器。4.5 QT中的事件机制事件起源： 基于事件如何被产生与分发，可以把事件分为以下三类。1.Spontaneous 事件自发事件：由窗口系统产生，它们被放到系统队列中，通

44、过事件循环逐个处理。2.Posted 事件：由Qt或是应用程序产生，它们被Qt组成队列，再通过事件循环处理。3.Sent 事件：由Qt或是应用程序产生，但它们被直接发送到目标对象。事件处理与过滤Qt中的事件可以在五个不同的层次上被处理1.重新实现一个特定的事件handlerQObject与QWidget提供了许多特定的事件handlers，分别对应于不同的事件类型。（如paintEvent()对应paint事件）2.重新实现QObject:event()event()函数是所有对象事件的入口，QObject和QWidget中缺省的实现是简单地把事件推入特定的事件handlers。3.在QObject安装上事件过滤器事件过滤器是一个对象，它接收别的对象的事件，在这些事件到达指定目标之间。4.在aApp上安装一个事件过滤器它会监视程序中发送到所有对象的所有事件。5.重新实现QApplication:notify()Qt的事件循环与sendEvent()调用这个函数来分发事件，通过重写它，你可以在别人之前看到事件。事件的分类：最常见的事件是鼠标事件QMouoseEvent和键盘事件QKeyEvent。QMouoseEvent类是描述鼠标事件的，其中有3个鼠标事件方法