QT繪圖第三講清華大學計算機系清華計算機系程設小學期-Qt繪圖課程主要內容Qt繪制事件Qt2D繪圖畫筆畫刷基本圖形和文本繪制漸變填充繪制文本圖像處理坐標系統與坐標變換繪圖舉例：表盤2清華計算機系程設小學期-Qt繪圖3Qt繪制事件清華計算機系程設小學期-Qt繪圖事件處理和繪制（Painting）當應用程序收到繪制事件時，就會調用QWidget::paintEvent()，該函數就是繪制控件的地方有兩種方法要求重繪一個控件update()–把重繪事件添加到事件隊列中重復調用update()會被Qt合并為一次不會產生圖像的閃爍可帶參數指定重繪某個區域repaint()–立即產生繪制事件一般情況下不推薦使用此方法只使用在需要立即重繪的特效情況下可帶參數指定重繪某個區域4清華計算機系程設小學期-Qt繪圖事件處理和繪制（Painting）為處理繪制事件，只需要重寫paintEvent函數，并在該函數中實例化一個QPainter對象進行繪制5classMyWidget:publicQWidget{...protected:voidpaintEvent(QPaintEvent*);voidMyWidget::paintEvent(QPaintEvent*ev){

QPainterp(this);...清華計算機系程設小學期-Qt繪圖基本繪制PipelineQPainter類提供繪制操作QPaintEngine類提供平臺相關的APIQPaintDevice代表繪制2D圖像的畫布如下繼承QPaintDevice的類對象都可用于QPainter繪制QWidget,QImage,QPixmap,QPicture,QPrinter,QSvgGenerator,QGLPixelBuffer,QGLFrameBufferObject,...6清華計算機系程設小學期-Qt繪圖7Qt2D繪圖清華計算機系程設小學期-Qt繪圖QT2D繪圖Qt4中的2D繪圖部分，由3個類支撐整個框架：QPainter用來執行具體的繪圖相關操作如畫點，畫線，填充，變換，alpha通道等。QPaintDevice是QPainter用來繪圖的繪圖設備，Qt中有幾種預定義的繪圖設備，如QWidget，QPixmap，QImage等。他們都從QPaintDevice繼承。QPaintEngine提供了QPainter在不同設備上繪制的統一接口，通常對開發人員是透明的。使用QPainter在QPainterDevice上進行繪制，它們之間使用QPaintEngine進行通訊。從Qt4.2開始，GraphicsView框架取代了QCanvas，QGraphicsView框架使用了MVC模式，適合對大量2D圖元的管理，GraphicsView框架中，場景(scene)存儲了圖形數據，它通過視圖(view)以多種表現形式，每個圖元(item)可以單獨進行控制。8清華計算機系程設小學期-Qt繪圖QPainter線和輪廓都可以用畫筆(QPen)進行繪制，用畫刷(QBrush)進行填充。字體使用QFont類定義，當繪制文字時，Qt使用指定字體的屬性，如果沒有匹配的字體，Qt將使用最接近的字體通常情況下，QPainter以默認的坐標系統進行繪制，也可以用QMatrix類對坐標進行變換9清華計算機系程設小學期-Qt繪圖QPainter當繪制時，可以使用QPainter::RenderHint來告訴繪圖引擎是否啟用反鋸齒功能使圖變得平滑QPainter::RenderHint的可取值QPainter::Antialiasing：告訴繪圖引擎應該在可能的情況下進行邊的反鋸齒繪制QPainter::TextAntialiasing：盡可能的情況下文字的反鋸齒繪制QPainter::SmoothPixmapTransform：使用平滑的pixmap變換算法(雙線性插值算法)，而不是近鄰插值算法10清華計算機系程設小學期-Qt繪圖QPainter的繪圖函數drawArc()弧drawChord()弦drawConvexPolygon()凸多邊形drawEllipse()橢圓drawImage()QImage表示的圖像drawLine()線drawLines()多條線drawPath()路徑drawPicture()按QPainter指令繪制drawPie()扇形drawPixmap()QPixmap表示的圖像drawPoint()點drawPoints()多個點drawPolygon()多邊形drawPolyline()多折線drawRect()矩形drawRects()多個矩形drawRoundRect()圓角矩形drawText()文字drawTiledPixmap()平鋪圖像drawLineSegments()繪制折線11清華計算機系程設小學期-Qt繪圖12畫筆清華計算機系程設小學期-Qt繪圖畫筆畫筆的屬性包括線型、線寬、顏色等。畫筆屬性可以在構造函數中指定，也可以使用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()函數來設定自定義風格。13清華計算機系程設小學期-Qt繪圖線型Qt::SolidLineQt::DashLineQt::DotLineQt::DashDotLineQt::DashDotDotLineQt::CustomDashLine–由dashPattern控制14清華計算機系程設小學期-Qt繪圖畫筆端點風格(capstyle)端點風格決定了線的端點樣式，只對線寬大于1的線有效。Qt定義了三種端點風格用枚舉類型Qt::PenCapStyle表示，分別為Qt::SqureCap，QT::FlatCap，Qt::RoundCap。連接風格(Joinstyle)連接風格是兩條線如何連接，連接風格對線寬大于等于1的線有效。Qt定義了四種連接方式，用枚舉類型Qt::PenStyle表示。分別是Qt::MiterJoin，Qt::BevelJoin，Qt::RoundJoin，Qt::SvgMiterJoin。15清華計算機系程設小學期-Qt繪圖端點風格和連接風格連接風格Qt::BevelJoin，斜邊(default)Qt::MiterJoinQt::RoundJoin16端點風格Qt::SquareCap(default)：矩形封線尾Qt::FlatCap：不封線尾Qt::RoundCap清華計算機系程設小學期-Qt繪圖畫筆示例17QPainterp(this);QPenpen(Qt::black,5);p.setPen(pen);p.drawPolygon(polygon);清華計算機系程設小學期-Qt繪圖18畫刷清華計算機系程設小學期-Qt繪圖畫刷在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中定義的任何顏色名為參數初始化。基本模式填充包括有各種點、線組合的模式。19清華計算機系程設小學期-Qt繪圖QColorQcolor的構造函數r（red）,g（green）,b（blue）,a（alpha）的取值范圍為0-255Alpha控制透明度255：不透明0：完全透明Qt預定義顏色20QColor(intr,intg,intb,inta)清華計算機系程設小學期-Qt繪圖顏色微調顏色可以通過如下函數進行微調QColor::lighter(intfactor)QColor::darker(intfactor)21darkerlighterQt::red清華計算機系程設小學期-Qt繪圖QRgbQRgb類可以用于保存顏色值，可與QColor相互轉換獲取32-bit的RGB顏色值+alpha值創建新顏色獲取單獨某個顏色值：qRed,qGreen,qBlue,qAlpha獲取灰度值22QRgborange=qRgb(255,127,0);QRgboverlay=qRgba(255,0,0,100);intred=qRed(orange);intgray=qGray(orange);清華計算機系程設小學期-Qt繪圖實色畫刷調用畫刷構造函數23QBrushred(Qt::red);QBrushodd(QColor(55,128,97));QPainterp(this);p.setPen(Qt::NoPen);p.setBrush(Qt::red);p.drawPolygon(polygon);清華計算機系程設小學期-Qt繪圖模式畫刷模式化畫刷構造函數24QBrush(constQColor&color,Qt::BrushStylestyle)清華計算機系程設小學期-Qt繪圖帶紋理的畫刷以QPixmap為參數的構造函數如果使用黑白的pixmap，則用畫刷顏色如果使用彩色pixmap，則用pixmap的顏色25QBrush(constQPixmap&pixmap)QPixmappacPixmap("pacman.png");painter.setPen(QPen(Qt::black,3));painter.setBrush(pacPixmap);painter.drawEllipse(rect());清華計算機系程設小學期-Qt繪圖26基本圖形和文本繪制清華計算機系程設小學期-Qt繪圖基本圖形繪制實現paintEvent函數27voidRectWithCircle::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);}清華計算機系程設小學期-Qt繪圖基本文本繪制QPainter::drawText28QPainterp(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返回文本外邊框的矩形區域清華計算機系程設小學期-Qt繪圖29漸變填充清華計算機系程設小學期-Qt繪圖漸變填充Qt4提供了漸變填充的畫刷，漸變填充包括兩個要素：顏色的變化和路徑的變化。顏色變化可以指定從一種顏色漸變到另外一種顏色。路徑變化指在路徑上指定一些點的顏色進行分段漸變。Qt4中，提供了三種漸變填充線性(QLinearGradient)圓形(QRadialGradient)圓錐漸變(QConicalGradient)所有的類都從QGradient類繼承構造漸變填充的畫刷QBrushb=QBrush(QRadialGradient(...));30清華計算機系程設小學期-Qt繪圖填充設置從圖形的起點到終點，以從0至1的比例漸變填充完成0-1范圍的填充后，后續顏色鋪開的方式可以不同，通過setSpread()函數來設置31QGradient::setColorAt(qrealpos,QColor);QGradient::PadSpread(default)QGradient::RepeatSpreadQGradient::ReflectSpread清華計算機系程設小學期-Qt繪圖線性漸變填充線性漸變填充指定兩個控制點，畫刷在兩個控制點之間進行顏色插值。通過創建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之間設置指定位置的顏色。32清華計算機系程設小學期-Qt繪圖線型填充示例33setColorAt(0.7,QColor(255,0,0))setColorAt(1.0,QColor(255,255,0))setColorAt(0.0,QColor(0,0,0))清華計算機系程設小學期-Qt繪圖圓形漸變填充圓形漸變填充需要指定圓心，半徑和焦點，QRadialGradient(qrealcx,qrealcy,qrealradius,qrealfx,qrealfy)。畫刷在焦點和圓上的所有點之間進行顏色插值。創建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);34清華計算機系程設小學期-Qt繪圖圓錐漸變填充圓錐漸變填充指定圓心和開始角，QConicalGradient(qrealcx,qrealcy,qrealangle)。畫刷沿圓心逆時針對顏色進行插值，創建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()函數加載紋理。35清華計算機系程設小學期-Qt繪圖36繪制文本清華計算機系程設小學期-Qt繪圖文本繪制使用QPainter進行文本繪制基本文本繪制帶選項的文本繪制帶返回信息的文本繪制37drawText(QPoint,QString)drawText(QRect,QString,QTextOptions)drawText(QRect,flags,QString,QRect*)清華計算機系程設小學期-Qt繪圖使用字體Qt提供了QFont類來表示字體，當創建QFont對象時，Qt會使用指定的字體，如果沒有對應的字體，Qt將尋找一種最接近的已安裝字體FontfamilySizeBold/Italic/Underline/Strikeout/…字體信息可以通過QFontInfo取出，并可用QFontMetrics取得字體的相關數據。使用QApplication::setFont()可以設置應用程序默認的字體當QPainter繪制指定的字體中不存在的字符時將繪制一個空心的正方行。38清華計算機系程設小學期-Qt繪圖FontFamily在構造函數中指定字體得到可用字體列表39QFontfont("Helvetica");font.setFamily("Times");QFontDatabasedatabase;QStringListfamilies=database.families();清華計算機系程設小學期-Qt繪圖FontSize字體尺寸可以用像素尺寸（pixelsize）或點陣尺寸（pointsize）40QFontfont("Helvetica");font.setPointSize(14);//14pointshigh//dependingonthepaintdevice'sdpifont.setPixelSize(10);//10pixelshigh清華計算機系程設小學期-Qt繪圖字體效果可以激活字體效果QWidget::font函數和QPainter::font函數返回

現有字體的const引用，因而需要先拷貝現有font，再做修改41Normal,bold,italic,strikeout,underline,overlineQFonttempFont=w->font();tempFont.setBold(true);w->setFont(tempFont);清華計算機系程設小學期-Qt繪圖測量文本大小QFontMetrics可用于測量文本和font的大小boundingRect函數可用于測量文本塊的大小42QImageimage(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());清華計算機系程設小學期-Qt繪圖中文顯示問題使用QTextCodec類#include<qtextcodec.h>…QTextCodec::setCodecForTr(QTextCodec::codecForName("GB2312"));…

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

size

(x,y,width,height)QPointF/QSizeF/QRectF用于表示浮點數坐標52清華計算機系程設小學期-Qt繪圖坐標變換通常QPainer在設備的坐標系統上繪制圖形，但QPainter也支持坐標變換。QPainter::scale()函數：比例變換QPainter::rotate()函數：旋轉變換QPainter::translate()函數：平移變換QPainter::shear()函數：圖形進行扭曲變換所有變換操作的變換矩陣都可以通過QPainter::wordMatrix()函數取出。不同的變換矩陣可以使用堆棧保存。用QPainter::save()保存變換矩陣到堆棧，用QPainter::restore()函數將其彈出堆棧。53清華計算機系程設小學期-Qt繪圖坐標變換坐標變換的順序很重要在做平移變換、旋轉變換和扭曲變換時，原點也很重要54p.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);清華計算機系程設小學期-Qt繪圖坐標變換的保存和恢復通過save和restore函數，可以將坐標變換的狀態保存和恢復55QPointrotCenter(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);應用變換畫紅色矩形畫灰色矩形清華計算機系程設小學期-Qt繪圖2.5D坐標變換可以以任何坐標軸做旋轉操作，以產生3D效果56p.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);清華計算機系程設小學期-Qt繪圖視口和窗口視口表示物理坐標下的任意矩形。而窗口表示在邏輯坐標下的相同矩形。視口由QPainter的viewport()函數獲取窗口由QPainter的window()函數獲取默認情況下邏輯坐標與物理坐標是相同的，與繪圖設備上的矩形也是一致的。使用窗口－視口變換可以使邏輯坐標符合自定義要求，這個機制通常用來完成設備無關的繪圖代碼。通過調用QPainter::setWindow()函數可以完成坐標變換設置窗口或視口矩形實際上是執行線性變換。本質上是窗口四個角映射到對應的視口四個角，反之亦然。因此，應注意保持視口和窗口x軸和y軸之間的比例變換一致，從而保證變換不會導致繪制變形。57清華計算機系程設小學期-Qt繪圖58繪圖舉例：表盤清華計算機系程設小學期-Qt繪圖表盤自定義繪制可以與鍵盤和鼠標交互59清華計算機系程設小學期-Qt繪圖表盤畫表盤的背景60voidCircularGauge::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);...畫背景圓形將油表放在中心位置清華計算機系程設小學期-Qt繪圖表盤畫表盤的刻度61voidCircularGauge::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函數簡單調用rotate(45)會增大舍入誤差清華計算機系程設小學期-Qt繪圖表盤畫表盤的指針62voidCircularGauge::paintEvent(QPaintEvent*ev){...p.rotate(m_value+135);QPolygonpolygon;polygon<<QPoint(-extent*0.05,extent*0.05)<<QPoint(-extent*0.05,-extent*0.05)<<QPoint(extent*0.46,0);p.setPen(Qt::NoPen);p.setBrush(QColor(255,0,0,120));p.drawPolygon(polygon);}清華計算機系程設小學期-Qt繪圖響應事件除了paintEvent，還有鍵盤事件鼠標事件窗口事件定時器事件。。。63清華計算機系程設小學期-Qt繪圖響應鍵盤事件重寫keyPressEvent鍵按下時響應將未處理的按鍵傳給基類處理64voidCircularGauge::keyPressEvent(QKeyEvent*ev){switch(ev->key()){caseQt::Key_Up:caseQt::Key_Right:setValue(value()+1);break;caseQt::Key_Down:caseQt::Key_Left:setValue(value()-1);break;caseQt::Key_PageU