《图形与图画》PPT课件.ppt

第7章 图形与图画,7.1 各类位置相关函数的区别,7.2 各种与位置相关函数的使用场合,7.3 各种基础图形的绘制,7.4 双缓冲机制,7.5 SVG格式图片的显示,7.1 各类位置相关函数的区别,Qt提供了很多关于获取窗体位置以及显示区域大小的函数，如x()、y()和pos()、rect()、size()、geometry()等，如图7.1所示。,7.2 各种与位置相关函数的使用场合,本节通过一个简单的例子介绍QWidget提供的x()、y()、frameGeometry、pos()、rect()、size()、geometry()等函数的使用场合。在此例中，当改变对话框的大小，或移动对话框时调用各个函数所获得的信息也相应地发生变化，从变化中可得知各函数之间的区别，如图7.2所示。,7.3 各种基础图形的绘制,首先介绍各种形状的区分，其次介绍画笔颜色、线宽、风格、顶帽风格、连接点风格以及画刷的颜色设置、填充模式和画刷的风格设置，使用的实例如图7.3所示。,7.3 各种基础图形的绘制,此实例的具体实现包含了两个部分的内容，一个是用于画图的区域PaintArea类，一个是主窗口MainWidget类，如图7.4所示。,7.3.1 绘图区的实现,打开“paintarea.h”头文件，添加如下代码：#include#include class PaintArea:public QWidget Q_OBJECTpublic:enum ShapeLine,Rectangle,RoundRect,Ellipse,Polygon,Polyline,Points,Arc,Path,Text,Pixmap;PaintArea(QWidget*parent=0);void setShape(Shape);void setPen(QPen);void setBrush(QBrush);void setFillRule(Qt:FillRule);void paintEvent(QPaintEvent*);private:Shape shape;QPen pen;QBrush brush;Qt:FillRule fillRule;,7.3.1 绘图区的实现,PaintArea类的构造函数完成初始化工作，设置了图形显示区域的背景色以及最小显示尺寸，具体代码如下：#include paintarea.h#include PaintArea:PaintArea(QWidget*parent):QWidget(parent)setPalette(QPalette(Qt:white);setAutoFillBackground(true);setMinimumSize(400,400);setShape()函数可以设置形状、setPen()函数可以设置画笔、setBrush()函数可以设置画刷、setFillRule()函数可以设置填充模式，具体代码实现。,7.3.1 绘图区的实现,(1)利用QPainter绘制图形（Shape）Qt为开发者提供了丰富的绘制基本图形的draw函数，如图7.6所示。,7.3.1 绘图区的实现,(2)利用QPainterPath绘制简单图形利用QPainterPath绘制简单图形，QPainterPath类为QPainter类提供了一个存储容器，里面包含了所要画的内容的集合以及画的顺序，如长方形、多边形、曲线等各种任意图形。cubicTo()函数绘制的是贝赛尔曲线，如图7.7所示。,7.3.1 绘图区的实现,利用QPainterPath类可以实现QPainter类的所有draw()函数能实现的图形。如对于QPainter:drawRect()函数，除了可用上面介绍的QPainterPath:addRect()的方式实现，还可以用如下方式实现：QPainterPath path;path.moveTo(0,0);path.lineTo(200,0);path.lineTo(200,100);path.lineTo(0,100);path.lineTo(0,0);,7.3.2 主窗口的实现,主窗口类MainWiget继承自QWidget类，包含完成各种图形参数选择的控制区的声明、一系列设置与画图相关参数的槽函数的声明和一个绘图区PaintArea对象的声明。打开“mainwidget.h”头文件，添加代码。MainWiget类的构造函数中创建了各参数选择控件，打开“mainwiget.cpp”文件，添加代码。,7.3.2 主窗口的实现,ShowShape()槽函数，根据当前下拉列表框中选择的选项，并调用PaintArea类的setShape()函数设置PaintArea对象的形状参数，具体代码如下：void MainWidget:ShowShape(int value)PaintArea:Shape shape=PaintArea:Shape(shapeComboBox-itemData(value,Qt:UserRole).toInt();paintArea-setShape(shape);,7.3.2 主窗口的实现,在此函数中获得与画笔相关的所有属性值，包括画笔颜色、画笔线宽、画笔风格、画笔顶端风格以及画笔连接点风格，共同构成QPen对象，并调用PaintArea对象的setPen()函数设置PaintArea对象的画笔属性。其他与画笔参数相关的响应函数完成的工作与此类似，具体代码如下：void MainWidget:ShowPenColor()QColor color=QColorDialog:getColor(Qt:blue);penColorFrame-setPalette(QPalette(color);int value=penWidthSpinBox-value();Qt:PenStyle style=Qt:PenStyle(penStyleComboBox-itemData(penStyleComboBox-currentIndex(),Qt:UserRole).toInt();Qt:PenCapStyle cap=Qt:PenCapStyle(penCapComboBox-itemData(penCapComboBox-currentIndex(),Qt:UserRole).toInt();Qt:PenJoinStyle join=Qt:PenJoinStyle(penJoinComboBox-itemData(penJoinComboBox-currentIndex(),Qt:UserRole).toInt();paintArea-setPen(QPen(color,value,style,cap,join);,7.3.2 主窗口的实现,ShowPenWidth()槽函数的具体实现代码如下：void MainWidget:ShowPenWidth(int value)QColor color=penColorFrame-palette().color(QPalette:Window);Qt:PenStyle style=Qt:PenStyle(penStyleComboBox-itemData(penStyleComboBox-currentIndex(),Qt:UserRole).toInt();Qt:PenCapStyle cap=Qt:PenCapStyle(penCapComboBox-itemData(penCapComboBox-currentIndex(),Qt:UserRole).toInt();Qt:PenJoinStyle join=Qt:PenJoinStyle(penJoinComboBox-itemData(penJoinComboBox-currentIndex(),Qt:UserRole).toInt();paintArea-setPen(QPen(color,value,style,cap,join);,7.3.2 主窗口的实现,ShowPenStyle()槽函数的具体实现代码如下：void MainWidget:ShowPenStyle(int styleValue)QColor color=penColorFrame-palette().color(QPalette:Window);int value=penWidthSpinBox-value();Qt:PenStyle style=Qt:PenStyle(penStyleComboBox-itemData(styleValue,Qt:UserRole).toInt();Qt:PenCapStyle cap=Qt:PenCapStyle(penCapComboBox-itemData(penCapComboBox-currentIndex(),Qt:UserRole).toInt();Qt:PenJoinStyle join=Qt:PenJoinStyle(penJoinComboBox-itemData(penJoinComboBox-currentIndex(),Qt:UserRole).toInt();paintArea-setPen(QPen(color,value,style,cap,join);,7.3.2 主窗口的实现,ShowPenCap()槽函数的具体实现代码如下：void MainWidget:ShowPenCap(int capValue)QColor color=penColorFrame-palette().color(QPalette:Window);int value=penWidthSpinBox-value();Qt:PenStyle style=Qt:PenStyle(penStyleComboBox-itemData(penStyleComboBox-currentIndex(),Qt:UserRole).toInt();Qt:PenCapStyle cap=Qt:PenCapStyle(penCapComboBox-itemData(capValue,Qt:UserRole).toInt();Qt:PenJoinStyle join=Qt:PenJoinStyle(penJoinComboBox-itemData(penJoinComboBox-currentIndex(),Qt:UserRole).toInt();paintArea-setPen(QPen(color,value,style,cap,join);,7.3.2 主窗口的实现,ShowPenJoin()槽函数的具体实现代码如下：void MainWidget:ShowPenJoin(int joinValue)QColor color=penColorFrame-palette().color(QPalette:Window);int value=penWidthSpinBox-value();Qt:PenStyle style=Qt:PenStyle(penStyleComboBox-itemData(penStyleComboBox-currentIndex(),Qt:UserRole).toInt();Qt:PenCapStyle cap=Qt:PenCapStyle(penCapComboBox-itemData(penCapComboBox-currentIndex(),Qt:UserRole).toInt();Qt:PenJoinStyle join=Qt:PenJoinStyle(penJoinComboBox-itemData(joinValue,Qt:UserRole).toInt();paintArea-setPen(QPen(color,value,style,cap,join);,7.3.2 主窗口的实现,ShowFillRule()槽函数的具体实现代码如下：void MainWidget:ShowFillRule()Qt:FillRule rule=Qt:FillRule(fillRuleComboBox-itemData(fillRuleComboBox-currentIndex(),Qt:UserRole).toInt();paintArea-setFillRule(rule);ShowSpreadStyle()槽函数的具体实现代码如下：void MainWidget:ShowSpreadStyle()spread=QGradient:Spread(spreadComboBox-itemData(spreadComboBox-currentIndex(),Qt:UserRole).toInt();,7.3.2 主窗口的实现,ShowBrushColor()槽函数，与设置画笔颜色函数类似，但选定颜色后并不直接调用PaintArea对象的setBrush()函数，而是调用ShowBrush()函数设置显示区的画刷属性，具体实现代码如下：void MainWidget:ShowBrushColor()QColor color=QColorDialog:getColor(Qt:blue);brushColorFrame-setPalette(QPalette(color);ShowBrush(brushStyleComboBox-currentIndex();ShowBrush()槽函数的具体实现代码。,7.3.2 主窗口的实现,若还需实现更加复杂的变形，则可采用QMatrix类实现。打开“main.cpp”文件，添加如下代码：#include#include mainwidget.h#include#include int main(int argc,char*argv)QApplication a(argc,argv);QFont f(ZYSong18030,12);a.setFont(f);QTextCodec:setCodecForTr(QTextCodec:codecForLocale();/显示中文 MainWidget w;w.show();return a.exec();,7.3.2 主窗口的实现,运行程序，程序显示效果如图7.17所示。,7.4 双缓冲机制,本实例实现的是一个简单的绘图工具，可以选择线型、线宽以及颜色等基本要素，如图7.18所示。,7.4 双缓冲机制,QMainWindow对象作为主窗口，QToolBar对象作为工具栏，QWidget对象作为主窗口的中央窗体centralWidget，也就是绘图区，如图7.19所示。,7.4.1 绘图区的实现,DrawWidget类继承自QWidget类，在类声明中对鼠标事件mousePressEvent()和mouseMoveEvent()、重画事件paintEvent()以及尺寸变化事件resizeEvent()进行了重定义。setStyle()、setWidth()以及setColor()函数主要用于为主窗口传递各种与绘图有关的参数。(1)打开“drawwidget.h”头文件，添加的代码。(2)打开“drawwidget.cpp”文件，DrawWidget构造函数完成对窗体参数及部分功能的初始化工作，具体的代码如下：#include drawwidget.h#include#include DrawWidget:DrawWidget()setAutoFillBackground(true);/对窗体背景色的设置 setPalette(QPalette(Qt:white);pix=new QPixmap(size();/此QPixmap对象用来准备随时接收绘制的内容 pix-fill(Qt:white);/填充背景色为白色 setMinimumSize(600,400);/设置绘制区窗体的最小尺寸,7.4.1 绘图区的实现,setStyle()函数接收主窗体传来的线型风格参数，setWidth()函数接收主窗体传来的线宽参数值，setColor()函数接收主窗体传来的画笔颜色值。具体代码如下：void DrawWidget:setStyle(int s)style=s;void DrawWidget:setWidth(int w)weight=w;void DrawWidget:setColor(QColor c)color=c;,7.4.1 绘图区的实现,重定义鼠标按下事件mousePressEvent()，在按下鼠标时，记录当前的鼠标位置值startPos。void DrawWidget:mousePressEvent(QMouseEvent*e)startPos=e-pos();,7.4.2 主窗口的实现,声明了一个构造函数，一个用于创建工具栏的函数createToolBar()，一个用于进行选择线型风格的槽函数ShowStyle()和一个用于进行颜色选择的槽函数ShowColor()，最后声明一个DrawWidget类对象作为主窗口的私有变量，以及声明代表线型风格、线宽选择、颜色选择以及清除按钮的私有变量。(1)打开“mainwindow.h”文件，添加代码。,7.4.2 主窗口的实现,(2)打开“mainwindow.cpp”文件，MainWindow类的构造函数完成初始化工作，各个功能见注释说明，具体代码。改变线型参数的槽函数ShowStyle()，通过调用DrawWidget类的setStyle()函数把当前线型选择控件中的线型参数传给绘制区；设置画笔颜色的槽函数ShowColor()，具体代码。,7.4.2 主窗口的实现,(3)打开“main.cpp”文件，添加如下代码：#include#include int main(int argc,char*argv)QApplication a(argc,argv);QFont font(ZYSong18030,12);a.setFont(font);QTextCodec:setCodecForTr(QTextCodec:codecForLocale();MainWindow w;w.show();return a.exec();,7.5 SVG格式图片的显示,在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网格矢量图形标准，是一个开放的图形标准。SVG格式的特点：(1)基于XML。(2)采用文本来描述对象。(3)具有交互性和动态性。(4)完全支持DOM。,7.5 SVG格式图片的显示,下面通过利用QsvgWidget类和QsvgRender类实现一个SVG图片浏览器，显示以.svg结尾的文件来介绍SVG格式图片显示的方法，如图7.20所示。,7.5 SVG格式图片的显示,此实例由3个层次的窗体构成，如图7.21所示。,7.5 SVG格式图片的显示,在完成此功能的程序中使用与SVG相关的类，必须在程序中包含SVG相关的头文件：#include 由于Qt默认生成的Makefile中只会加入QtGui、QtCore模块的库，因此，必须在工程文件.pro中加入一行：QT+=svg这样会在编译时加入QtSvg的库。,