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