28.QT-QPainter介紹

介紹

• 能夠在QPaintDevice類上繪製各類圖形
• QPaintDevice類表示QPainter的繪圖設備(畫布)
• QpaintDevice子類有QImage、QOpenGLPaintDevice、QWidget 等
• 因此, QPainter能夠在QImage、QOpenGLPaintDevice、QWidget上進行繪製圖形
• QPainter只能在類對象的paintEvent()函數中繪製圖形

  

QPainter類的成員角色有:

• QPen         : 用於繪製幾何圖形的邊緣,由顏色,寬度,線風格等參數組成
• QBrush     : 用於填充幾何圖形的調色板,由顏色和填充風格組成
• QFont       : 用於文本繪製
• QPixmap  : 繪製圖片,能夠加速顯示,帶有屏幕截圖,窗口截圖等支持,適合小圖片
• QImage    : 繪製圖片,能夠直接讀取圖像文件進行像素訪問,適合大圖片
• QBitmap  : QPixmap的一個子類，主要用於顯示單色位圖
• QPicture  : 繪圖裝置，用於記錄和重播Qpainter的繪圖指令 

具體參考: https://blog.csdn.net/cloud_castle/article/details/26256663

 

 

QPainter基礎圖形繪製相關函數:

 

 

 

繪畫圓弧drawArc

 

QPainter painter(this);

painter.setPen(    QPen(QColor(11,67,127),3));

QRectF rect(40.0, 40.0, 100.0, 100.0);

painter.setRenderHint(QPainter:: Antialiasing, true);  //設置渲染,啓動反鋸齒

painter.drawArc(rect,30*16,150*16); //繪畫角度爲30°~(30+150°)

painter.drawPoint(40+50,40+50);     //繪製中心點

 

 

繪畫橢圓drawElipse

 

QPainter painter(this);

painter.setRenderHint(QPainter:: Antialiasing, true);  //設置渲染,啓動反鋸齒

painter.setPen( QPen(QColor(11,67,127),3));

painter.drawEllipse(40.0, 40.0, 100.0, 100.0);   //半徑爲50的圓

 

 

繪畫扇形drawPie

 

QPainter painter(this);
painter.setPen(QPen(QColor(11,67,127),3));

QRectF rect(40.0, 40.0, 100.0, 100.0);

painter.setRenderHint(QPainter:: Antialiasing, true);  //設置渲染,啓動反鋸齒

painter.drawPie(rect,30*16,150*16); //繪畫角度爲30°~(30+150°)

 

        

繪畫弦drawChord

 

QPainter painter(this);

painter.setPen(QPen(QColor(11,67,127),3));

QRectF rect(40.0, 40.0, 100.0, 100.0);

painter.setRenderHint(QPainter:: Antialiasing, true);  //設置渲染,啓動反鋸齒

painter.drawChord(rect,30*16,150*16);       //繪畫角度爲30°~(30+150°)

 

 

QPainter-視口/窗口

在Qt中, QPainter能夠經過視口和窗口來設置自身組件大小位置.

 

視口:  基於QPaintDevice類組件的座標實現的,屬於物理座標,經過setViewport成員函數設置

窗口:  基於自身的邏輯座標實現的,並非真實座標,能夠經過setWindow成員函數設置

 

須要注意的是:

• Qpainter的座標是使用的窗口座標(邏輯座標)
• 當QPainter初始化時,視口和窗口座標默認是相同的,也就是說原點(0,0)在於窗口左上角
• 因此視口和窗口的最小座標和最大座標是從左上到右下的.

 

示例1-設置原點(0,0)爲窗口的(100,100),設置繪畫區域爲窗口大小爲100*100

以下圖所示,其中藍色爲視口座標,紅色爲窗口座標:

 

因爲數學Y座標方向與屏幕Y座標方向是相反的,因此w保持不變,h = -height

因此對應代碼爲:

    QPainter painter(this);

    QSize ViewWH(100,100);        //定義視口寬高

    painter.setViewport(50,50,ViewWH.width(),ViewWH.height());

    painter.setWindow(-50,50,ViewWH.width(),-ViewWH.height());

    painter.setBrush(QColor(187,229,253));

    painter.setPen(QPen(QColor(11,67,127),2));   

    painter.drawRect(-50,50,ViewWH.width(),-ViewWH.height()); //窗口背景

    painter.drawLine(-50,0,50,0);       //畫X座標

painter.drawLine(0,-50,0,50);           //畫Y座標 

效果以下:

 

 

 

示例2-在窗口的中心處繪製正弦波

QPainter painter(this);

painter.setViewport(50,50,width()-100,height()-100);    //設置視口爲中心處

painter.setWindow(-10,4,20,-8);
                //定義窗口 左上角爲(-10,4) 右下角爲(10,-4)

painter.fillRect(-10,4,20,-8,Qt::black);

painter.setPen(QPen(QBrush(Qt::green),1/(width()-100)/20));
      //因爲當前窗口和視口的比例爲 width()-100 : 20
      //因此1px的橫縱Line線寬 = 1/(width()-100)/20

painter.drawLine(-10,0,10,0);

painter.setPen(QPen(QBrush(Qt::green),1/(height()-100)/8));

painter.drawLine(0,-4,0,4);

for(float x=-10;x<10;x+=0.01)
{
        float y= qSin(x);
        painter.drawPoint(QPointF(x,y));
        qDebug()<<x <<","<<y;
}

效果以下:

 

 

Qpainter經過drawText來繪製文本

繪製文本時,是以左下角爲原點開始的.
能夠經過QfontMetrics獲取字符串在指定字體下的寬度和高度.
示例:

void MainWindow::paintEvent(QPaintEvent *)
{
QPainter painter(this);
QFont font;
font.setPixelSize(24); //設置字體像素大小爲12
QString text="1234567"; //設置顯示的文本
QFontMetrics metrics(font);
int w=metrics.width(text); //獲取顯示文本的寬度
int h=metrics.height(); //獲取顯示文本的高度
painter.setFont(font);
painter.setPen(Qt::blue);
painter.drawText(QRect(width()/2-w,height()/2-h,w,h),text);
painter.drawRect(QRect(width()/2-w,height()/2-h,w,h));
qDebug()<<"w:"<<w; //一個字符大小爲12*24,因此寬度爲12*7
qDebug()<<"h:"<<h; //高度爲24
}

效果:

 

未完,下章學習: 30.QT-漸變之QLinearGradient、 QConicalGradient、QRadialGradient