介紹
-
可以在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
https://www.cnblogs.com/lifexy/p/9238878.html