Qt繪圖詳解課件

《嵌入式GUI》——Qt5圖形與圖片（第六章）1教學回顧Qt內置對話框（重點）Qt工具盒；Qt進度條；Qt調色板；Qt可擴展對話框2教學內容Qt繪制事件Qt2D繪圖畫筆畫刷基本圖形和文本繪制漸變填充繪制文本圖像處理坐標系統(tǒng)與坐標變換繪圖舉例：表盤3Qt繪制事件4事件處理和繪制（Painting）當應用程序收到繪制事件時，就會調用QWidget::paintEvent()，該函數就是繪制窗口的地方有兩種方法要求重繪一個窗口update()–把重繪事件添加到事件隊列中重復調用update()會被Qt合并為一次不會產生圖像的閃爍可帶參數指定重繪某個區(qū)域repaint()–立即產生繪制事件一般情況下不推薦使用此方法只使用在需要立即重繪的特效情況下可帶參數指定重繪某個區(qū)域5事件處理和繪制（Painting）為處理繪制事件，只需要重寫paintEvent函數，并在該函數中實例化一個QPainter對象進行繪制classMyWidget:publicQWidget{...protected:voidpaintEvent(QPaintEvent*);voidMyWidget::paintEvent(QPaintEvent*ev){

QPainterp(this);...6基本繪制QPainter類提供繪制操作

其構造函數原型為：QPainter

(QPaintDevice*

device

)QPaintDevice代表繪制2D圖像的畫布如下繼承QPaintDevice的類對象都可用于QPainter繪制QWidget,QImage,QPixmap,QPicture,QPrinter,QSvgGenerator,QGLPixelBuffer,QGLFrameBufferObject,...7Qt2D繪圖8QT2D繪圖Qt中的2D繪圖部分，由3個類支撐整個框架：QPainter用來執(zhí)行具體的繪圖相關操作如畫點，畫線，填充，變換，alpha通道等。QPaintDevice是QPainter用來繪圖的繪圖設備，Qt中有幾種預定義的繪圖設備，如QWidget，QPixmap，QImage等。他們都從QPaintDevice繼承。9QPainter線和輪廓都可以用畫筆(QPen)進行繪制，用畫刷(QBrush)進行填充。字體使用QFont類定義，當繪制文字時，Qt使用指定字體的屬性，如果沒有匹配的字體，Qt將使用最接近的字體通常情況下，QPainter以默認的坐標系統(tǒng)進行繪制，也可以用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()繪制折線12畫筆13畫筆畫筆的屬性包括線型、線寬、顏色等。畫筆屬性可以在構造函數中指定，也可以使用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::SolidLineQt::DashLineQt::DotLineQt::DashDotLineQt::DashDotDotLineQt::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::MiterJoinQt::RoundJoin端點風格Qt::SquareCap(default)：矩形封線尾Qt::FlatCap：不封線尾Qt::RoundCap17畫筆示例QPainterp(this);QPenpen(Qt::black,5);p.setPen(pen);p.drawPolygon(polygon);18畫刷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中定義的任何顏色名為參數初始化。基本模式填充包括有各種點、線組合的模式。20QColorQcolor的構造函數r（red）,g（green）,b（blue）,a（alpha）的取值范圍為0-255Alpha控制透明度255：不透明0：完全透明Qt預定義顏色QColor(intr,intg,intb,inta)21顏色微調顏色可以通過如下函數進行微調QColor::lighter(intfactor)QColor::darker(intfactor)darkerlighterQt::red22QRgbQRgb類可以用于保存顏色值，可與QColor相互轉換獲取32-bit的RGB顏色值+alpha值創(chuàng)建新顏色獲取單獨某個顏色值：qRed,qGreen,qBlue,qAlpha獲取灰度值QRgborange=qRgb(255,127,0);QRgboverlay=qRgba(255,0,0,100);intred=qRed(orange);intgray=qGray(orange);23實色畫刷調用畫刷構造函數QBrushred(Qt::red);QBrushodd(QColor(55,128,97));QPainterp(this);p.setPen(Qt::NoPen);p.setBrush(Qt::red);p.drawPolygon(polygon);24模式畫刷模式化畫刷構造函數QBrush(constQColor&color,Qt::BrushStylestyle)25帶紋理的畫刷以QPixmap為參數的構造函數如果使用黑白的pixmap，則用畫刷顏色如果使用彩色pixmap，則用pixmap的顏色QBrush(constQPixmap&pixmap)QPixmappacPixmap("pacman.png");painter.setPen(QPen(Qt::black,3));painter.setBrush(pacPixmap);painter.drawEllipse(rect());26基本圖形和文本繪制27基本圖形繪制實現paintEvent函數voidRectWithCircle::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);}28基本文本繪制QPainter::drawTextQPainterp(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返回文本外邊框的矩形區(qū)域29漸變填充30漸變填充Qt提供了漸變填充的畫刷，漸變填充包括兩個要素：顏色的變化和路徑的變化。顏色變化可以指定從一種顏色漸變到另外一種顏色。路徑變化指在路徑上指定一些點的顏色進行分段漸變。Qt中，提供了三種漸變填充線性(QLinearGradient)圓形(QRadialGradient)圓錐漸變(QConicalGradient)所有的類都從QGradient類繼承構造漸變填充的畫刷QBrushb=QBrush(QRadialGradient(...));31填充設置從圖形的起點到終點，以從0至1的比例漸變填充完成0-1范圍的填充后，后續(xù)顏色鋪開的方式可以不同，通過setSpread()函數來設置QGradient::setColorAt(qrealpos,QColor);QGradient::PadSpread(default)QGradient::RepeatSpreadQGradient::ReflectSpread32線性漸變填充線性漸變填充指定兩個控制點，畫刷在兩個控制點之間進行顏色插值。通過創(chuàng)建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構造函數中指定線性填充的兩點分別為(0,0)，(100,100)。setColorAt()函數在0-1之間設置指定位置的顏色。33線型填充示例34圓形漸變填充圓形漸變填充需要指定圓心，半徑和焦點，QRadialGradient(qrealcx,qrealcy,qrealradius,qrealfx,qrealfy)。畫刷在焦點和圓上的所有點之間進行顏色插值。創(chuàng)建QRadialGradient對象設置畫刷QPainterpainter(this);QRadialGradientradialGradient(50,50,50,30,30);radialGradient.setColorAt(0.0,Qt::white);radialGradient.setColorAt(1.0,Qt::blue);painter.setBrush(radialGradient);painter.drawRect(0,0,100,100);35圓錐漸變填充圓錐漸變填充指定圓心和開始角，QConicalGradient(qrealcx,qrealcy,qrealangle)。畫刷沿圓心逆時針對顏色進行插值，創(chuàng)建QConicalGradient對象并設置畫刷。

QPainterpainter(this);QConicalGradient conicalGradient(50,50,90);conicalGradient.setColorAt(0,Qt::white);conicalGradient.setColorAt(1,Qt::blue);painter.setBrush(conicalGradient);painter.drawRect(0,0,100,100);為了實現自定義填充，還可以使用QPixmap或者QImage對象進行紋理填充。兩種圖像分別使用setTexture()和setTextureImage()函數加載紋理。36繪制文本37文本繪制使用QPainter進行文本繪制基本文本繪制帶選項的文本繪制帶返回信息的文本繪制drawText(QPoint,QString)drawText(QRect,QString,QTextOptions)drawText(QRect,flags,QString,QRect*)38使用字體Qt提供了QFont類來表示字體，當創(chuàng)建QFont對象時，Qt會使用指定的字體，如果沒有對應的字體，Qt將尋找一種最接近的已安裝字體FontfamilySizeBold/Italic/Underline/Strikeout/…字體信息可以通過QFontInfo取出，并可用QFontMetrics取得字體的相關數據。使用QApplication::setFont()可以設置應用程序默認的字體當QPainter繪制指定的字體中不存在的字符時將繪制一個空心的正方行。39FontFamily在構造函數中指定字體得到可用字體列表QFontfont("Helvetica");font.setFamily("Times");QFontDatabasedatabase;QStringListfamilies=database.families();40FontSize字體尺寸可以用像素尺寸（pixelsize）或點陣尺寸（pointsize）QFontfont("Helvetica");font.setPointSize(14);//14pointshigh//dependingonthepaintdevice'sdpifont.setPixelSize(10);//10pixelshigh41字體效果可以激活字體效果QWidget::font函數和QPainter::font函數返回

現有字體的const引用，因而需要先拷貝現有font，再做修改Normal,bold,italic,strikeout,underline,overlineQFonttempFont=w->font();tempFont.setBold(true);w->setFont(tempFont);42測量文本大小QFontMetrics可用于測量文本和font的大小boundingRect函數可用于測量文本塊的大小QImageimage(200,200,QImage::Format_ARGB32);

QPainterpainter(&image);

QFontMetricsfm(painter.font(),&image);

qDebug("width:%d",fm.width("HelloQt!"));

qDebug("height:%d",fm.boundingRect(0,0,200,0,Qt::AlignLeft|Qt::TextWordWrap,loremIpsum).height());43中文顯示問題使用QTextCodec類#include<qtextcodec.h>…QTextCodec::setCodecForTr(QTextCodec::codecForName("GB2312"));…intret=QMessageBox::warning(0,tr("PathFinder"),tr("您真的想要退出？"),QMessageBox::Yes|QMessageBox::No);44圖像處理45圖像處理Qt提供了4個處理圖像的類。QImage，QPixmap，QBitmap，QPicure。它們有著各自的特點。QImage優(yōu)化了I/O操作，可以直接存取操作像素數據。QPixmap優(yōu)化了在屏幕上顯示圖像的性能。QBitmap從QPixmap繼承，只能表示兩種顏色。QPicture是可以記錄和重啟QPrinter命令的類。46轉換在QImage和QPixmap之間轉換QImageQPixmap::toImage();QPixmapQPixmap::fromImage(constQImage&);47讀入和保存如下代碼使用QImageReader和QImageWriter類進行，這些類在保存時通過文件的擴展名確定文件格式QPixmappixmap("image.png");pixmap.save("image.jpeg");QImageimage("image.png");image.save("image.jpeg");48在QImage上繪制QImage是QPaintDevice的子類，因而QPainter可以在其上繪制QImageimage(100,100,QImage::Format_ARGB32);QPainterpainter(&image);painter.setBrush(Qt::red);painter.fillRect(image.rect(),Qt::white);painter.drawRect(image.rect().adjusted(20,20,-20,-20));image.save("image.jpeg");49在QPixmap上繪制QPixmap是QPaintDevice的子類，因而QPainter可以在其上繪制主要用于屏幕繪制voidMyWidget::imageChanged(constQImage&image){pixmap=QPixmap::fromImage(image);update();}voidMyWidget::paintEvent(QPaintEvent*){QPainterpainter(this);painter.drawPixmap(10,20,pixmap);}50坐標系統(tǒng)與坐標變換51坐標系統(tǒng)Qt坐標系統(tǒng)由QPainter控制，同時也由QPaintDevice和QPaintEngine類控制。Qt繪圖設備默認坐標原點是左上角，X軸向右增長，Y軸向下增長，默認的單位在基于像素的設備上是像素，在打印機設備上是1/72英寸(0.35毫米)QPainter的邏輯坐標與QPainterDevice的物理坐標之間的映射由QPainter的變換矩陣worldMatrix()、視口viewport()和窗口window()處理。未進行坐標變換的情況下，邏輯坐標和物理坐標是一致的52坐標值的表示方法如果不進行坐標變換，直接進行繪圖可用QPainter的window()函數取得繪圖窗口然后在此繪圖窗口內進行繪制使用QPoint,QSize,和QRect表示坐標值和區(qū)域QPoint:point(x,y)QSize:size(width,height)QRect:point和

size

(x,y,width,height)QPointF/QSizeF/QRectF用于表示浮點數坐標53坐標變換通常QPainer在設備的坐標系統(tǒng)上繪制圖形，但QPainter也支持坐標變換。QPainter::scale()函數：比例變換QPainter::rotate()函數：旋轉變換QPainter::translate()函數：平移變換QPainter::shear()函數：圖形進行扭曲變換所有變換操作的變換矩陣都可以通過QPainter::wordMatrix()函數取出。不同的變換矩陣可以使用堆棧保存。用QPainter::save()保存變換矩陣到堆棧，用QPainter::restore()函數將其彈出堆棧。54坐標變換坐標變換的順序很重要在做平移變換、旋轉變換和扭曲變換時，原點也很重要p.setBrush(Qt::red);p.drawRect(200,20,120,120);p.translate(0,100);p.drawRect(200,20,120,120);p.rotate(35);p.drawRect(200,20,120,120);p.setBrush(Qt::red);p.drawRect(200,20,120,120);p.rotate(35);p.drawRect(200,20,120,120);p.translate(0,100);p.drawRect(200,20,120,120);55坐標變換的保存和恢復通過save和restore函數，可以將坐標變換的狀態(tài)保存和恢復QPointrotCenter(50,50);qrealangle=42;p.save();p.translate(rotCenter);p.rotate(angle);p.translate(-rotCenter);p.setBrush(Qt::red);p.setPen(Qt::black);p.drawRect(25,25,50,50);p.restore();p.setPen(Qt::NoPen);p.setBrush(QColor(80,80,80,150));p.drawRect(25,25,50,50);應用變換畫紅色矩形畫灰色矩形562.5D坐標變換可以以任何坐標軸做旋轉操作，以產生3D效果p.setBrush(Qt::gray);p.setRenderHint(QPainter::Antialiasing);p.drawRect(100,100,100,100);QTransformt;t.translate(150,0);t.rotate(60,Qt::YAxis);p.setTransform(t,true);p.setBrush(Qt::red);p.drawRect(-50,100,100,100);57視口和窗口視口表示物理坐標下的任意矩形。而窗口表示在邏輯坐標下的相同矩形。視口由QPainter的viewport()函數獲取窗口由QPainter的window()函數獲取默認情況下邏輯坐標與物理坐標是相同的，與繪圖設備上的矩形也是一致的。使用窗口－視口變換可以使邏輯坐標符合自定義要求，這個機制通常用來完成設備無關的繪圖代碼。通過調用QPainter::setWindow()函數可以完成坐標變換設置窗口或視口矩形實際上是執(zhí)行線性變換。本質上是窗口四個角映射到對應的視口四個角，反之亦然。因此，應注意保持視口和窗口x軸和y軸之間的比例變換一致，從而保證變換不會導致繪制變形。58繪圖舉例：表盤59表盤自定義繪制可以與鍵盤和鼠標交互60表盤畫表盤的背景voidCircularGauge::paintEvent(QPaintEvent*ev){QPainterp(this);intextent;if(width()>height())extent=height()-20;elseextent=width()-20;p.translate((width()-extent)/2,(height()-extent)/2);p.setPen(Qt::white);p.setBrush(Qt::black);p.drawEllipse(0,0,extent,extent);...畫背景圓形將油表放在中心位置61表盤畫表盤的刻度voidCircularGauge::paintEvent(QPaintEvent*ev){...p.translate(extent/2,extent/2);for(intangle=0;angle<=270;angle+=45){p.save();p.rotate(angle+135);p.drawLine(extent*0.4,0,extent*0.48,0);p.restore();}...注意save和restore函數簡單調用ro