Qt绘图详解

1《嵌入式GUI程序设计》——Qt5图形与图片（第六章）教学回顾•Qt内置对话框（重点）•Qt工具盒；•Qt进度条；•Qt调色板；•Qt可扩展对话框2教学内容•Qt绘制事件•Qt2D绘图•画笔•画刷•基本图形和文本绘制•渐变填充•绘制文本•图像处理•坐标系统与坐标变换•绘图举例：表盘34Qt绘制事件事件处理和绘制（Painting）•当应用程序收到绘制事件时，就会调用QWidget::paintEvent()，该函数就是绘制窗口的地方•有两种方法要求重绘一个窗口–update()–把重绘事件添加到事件队列中•重复调用update()会被Qt合并为一次•不会产生图像的闪烁•可带参数指定重绘某个区域–repaint()–立即产生绘制事件•一般情况下不推荐使用此方法•只使用在需要立即重绘的特效情况下•可带参数指定重绘某个区域5事件处理和绘制（Painting）•为处理绘制事件，只需要重写paintEvent函数，并在该函数中实例化一个QPainter对象进行绘制6classMyWidget:publicQWidget{...protected:voidpaintEvent(QPaintEvent*);voidMyWidget::paintEvent(QPaintEvent*ev){QPainterp(this);...基本绘制•QPainter类提供绘制操作其构造函数原型为：QPainter(QPaintDevice*device)•QPaintDevice代表绘制2D图像的画布•如下继承QPaintDevice的类对象都可用于QPainter绘制–QWidget,QImage,QPixmap,QPicture,QPrinter,QSvgGenerator,QGLPixelBuffer,QGLFrameBufferObject,...78Qt2D绘图QT2D绘图•Qt中的2D绘图部分，由3个类支撑整个框架：–QPainter用来执行具体的绘图相关操作如画点，画线，填充，变换，alpha通道等。–QPaintDevice是QPainter用来绘图的绘图设备，Qt中有几种预定义的绘图设备，如QWidget，QPixmap，QImage等。他们都从QPaintDevice继承。9QPainter•线和轮廓都可以用画笔(QPen)进行绘制，用画刷(QBrush)进行填充。•字体使用QFont类定义，当绘制文字时，Qt使用指定字体的属性，如果没有匹配的字体，Qt将使用最接近的字体•通常情况下，QPainter以默认的坐标系统进行绘制，也可以用QMatrix类对坐标进行变换10QPainter•当绘制时，可以使用QPainter::RenderHint来告诉绘图引擎是否启用反锯齿功能使图变得平滑•QPainter::RenderHint的可取值–QPainter::Antialiasing：告诉绘图引擎应该在可能的情况下进行边的反锯齿绘制–QPainter::TextAntialiasing：尽可能的情况下文字的反锯齿绘制–QPainter::SmoothPixmapTransform：使用平滑的pixmap变换算法(双线性插值算法)，而不是近邻插值算法11QPainter的绘图函数•drawArc()弧•drawChord()弦•drawConvexPolygon()凸多边形•drawEllipse()椭圆•drawImage()QImage表示的图像•drawLine()线•drawLines()多条线•drawPath()路径•drawPicture()按QPainter指令绘制•drawPie()扇形•drawPixmap()QPixmap表示的图像•drawPoint()点•drawPoints()多个点•drawPolygon()多边形•drawPolyline()多折线•drawRect()矩形•drawRects()多个矩形•drawRoundRect()圆角矩形•drawText()文字•drawTiledPixmap()平铺图像•drawLineSegments()绘制折线1213画笔画笔•画笔的属性包括线型、线宽、颜色等。画笔属性可以在构造函数中指定，也可以使用setStyle()，setWidth()，setBrush()，setCapStyle()，setJoinStyle()等函数设定•Qt中，使用Qt::PenStyle定义了6种画笔风格，分别是–Qt::SolidLine，Qt::DashLine，Qt::DotLine，Qt::DashDotLine，Qt::DashDotDotLine，Qt::CustomDashLine。–自定义线风格(Qt::CustomDashLine)，需要使用QPen的setDashPattern()函数来设定自定义风格。14线型•Qt::SolidLine•Qt::DashLine•Qt::DotLine•Qt::DashDotLine•Qt::DashDotDotLine•Qt::CustomDashLine–由dashPattern控制15画笔•端点风格(capstyle)–端点风格决定了线的端点样式，只对线宽大于1的线有效。–Qt定义了三种端点风格用枚举类型Qt::PenCapStyle表示，分别为Qt::SqureCap，QT::FlatCap，Qt::RoundCap。•连接风格(Joinstyle)–连接风格是两条线如何连接，连接风格对线宽大于等于1的线有效。–Qt定义了四种连接方式，用枚举类型Qt::PenStyle表示。分别是Qt::MiterJoin，Qt::BevelJoin，Qt::RoundJoin，Qt::SvgMiterJoin。16端点风格和连接风格•连接风格–Qt::BevelJoin，斜边(default)–Qt::MiterJoin–Qt::RoundJoin17端点风格Qt::SquareCap(default)：矩形封线尾Qt::FlatCap：不封线尾Qt::RoundCap画笔示例18QPainterp(this);QPenpen(Qt::black,5);p.setPen(pen);p.drawPolygon(polygon);19画刷画刷•在Qt中图形使用QBrush进行填充，画刷包括填充颜色和风格(填充模式)。•在Qt中，颜色使用QColor类表示，QColor支持RGB，HSV，CMYK颜色模型。QColor还支持alpha混合的轮廓和填充。–RGB是面向硬件的模型。颜色由红绿蓝三种基色混合而成。–HSV/HSL模型比较符合人对颜色的感觉，由色调(0-359)，饱和度(0-255)，亮度(0-255)组成，主要用于颜色选择器。–CMYK由青，洋红，黄，黑四种基色组成。主要用于打印机等硬件拷贝设备上。每个颜色分量的取值是0-255。–另外QColor还可以用SVG1.0中定义的任何颜色名为参数初始化。•基本模式填充包括有各种点、线组合的模式。20QColor•Qcolor的构造函数•r（red）,g（green）,b（blue）,a（alpha）的取值范围为0-255•Alpha控制透明度–255：不透明–0：完全透明•Qt预定义颜色21QColor(intr,intg,intb,inta)颜色微调•颜色可以通过如下函数进行微调–QColor::lighter(intfactor)–QColor::darker(intfactor)22darkerlighterQt::redQRgb•QRgb类可以用于保存颜色值，可与QColor相互转换获取–32-bit的RGB颜色值+alpha值•创建新颜色•获取单独某个颜色值：qRed,qGreen,qBlue,qAlpha•获取灰度值23QRgborange=qRgb(255,127,0);QRgboverlay=qRgba(255,0,0,100);intred=qRed(orange);intgray=qGray(orange);实色画刷•调用画刷构造函数24QBrushred(Qt::red);QBrushodd(QColor(55,128,97));QPainterp(this);p.setPen(Qt::NoPen);p.setBrush(Qt::red);p.drawPolygon(polygon);模式画刷•模式化画刷构造函数25QBrush(constQColor&color,Qt::BrushStylestyle)带纹理的画刷•以QPixmap为参数的构造函数–如果使用黑白的pixmap，则用画刷颜色–如果使用彩色pixmap，则用pixmap的颜色26QBrush(constQPixmap&pixmap)QPixmappacPixmap(pacman.png);painter.setPen(QPen(Qt::black,3));painter.setBrush(pacPixmap);painter.drawEllipse(rect());27基本图形和文本绘制基本图形绘制•实现paintEvent函数28voidRectWithCircle::paintEvent(QPaintEvent*ev){QPainterp(this);p.setBrush(Qt::green);p.drawRect(10,10,width()-20,height()-20);p.setBrush(Qt::yellow);p.drawEllipse(20,20,width()-40,height()-40);}基本文本绘制•QPainter::drawText29QPainterp(this);QFontfont(Helvetica);p.setFont(font);p.drawText(20,20,120,20,0,HelloWorld!);font.setPixelSize(10);p.setFont(font);p.drawText(20,40,120,20,0,HelloWorld!);font.setPixelSize(20);p.setFont(font);p.drawText(20,60,120,20,0,HelloWorld!);QRectr;p.setPen(Qt::red);p.drawText(20,80,120,20,0,HelloWorld!,&r);r返回文本外边框的矩形区域30渐变填充渐变填充•Qt提供了渐变填充的画刷，渐变填充包括两个要素：颜色的变化和路径的变化。–颜色变化可以指定从一种颜色渐变到另外一种颜色。–路径变化指在路径上指定一些点的颜色进行分段渐变。•Qt中，提供了三种渐变填充–线性(QLinearGradient)–圆形(QRadialGradient)–圆锥渐变(QConicalGradient)–所有的类都从QGradient类继承•构造渐变填充的画刷QBrushb=QBrush(QRadialGradient(...));31填充设置•从图形的起点到终点，以从0至1的比例渐变填充•完成0-1范围的填充后，后续颜色铺开的方式可以不同，通过setSpread()函数来设置32QGradient::setColorAt(qrealpos,QColor);QGradient::PadSpread(default)QGradient::RepeatSpreadQGradient::ReflectSpread线性渐变填充•线性渐变填充指定两个控制点，画刷在两个控制点之间进行颜色插值。•通过创建QLinearGradient对象来设置画刷。QPainterp(this);QLinearGradientg(0,0,100,100);g.setColorAt(0.0,Qt::white);g.setColorAt(1.0,Qt::blue);p.setBrush(g);p.drawRect(0,0,100,100);•在QGradient构造函数