基本概念
虽然Qt已经内置了很多的控件,但是不能保证现有控件就可以应对所有场景. 很多时候我们需要更强的"DIY"能力;
Qt 提供了画图相关的API,可以允许我们在窗口上绘制任意的图形形状,来完成更复杂的界面设计。
绘图api核心类:
类 | 说明 |
---|---|
QPainter | “绘画者"或者"画家” 用来绘图的对象,提供了一系列drawXXX方法,可以允许我们绘制各种图形 |
QPaintDevice | “画板” 描述了QPainter把图形画到哪个对象上,如QWidget也是一种QPaintDevice(QWidget是QPaintDevice的子类). |
QPen | “画笔” 描述了QPainter画出来的线是什么样的 |
QBrush | “画刷” 描述了QPainter填充⼀个区域是什么样的 |
(绘图API的使用,⼀般不会在QWidget的构造函数中使用,而是要放到paintEvent中)
示例1:分别画出线段、矩形、圆形
1.在widget.h中声明绘图事件
2.在widget.cpp中重写paintEvent()函数
void Widget::paintEvent(QPaintEvent *event)
{(void) event;//实例化画家对象(需包含QPainter头文件)QPainter painter(this);//画一条线段painter.drawLine(200,50,400,50);//(x1,y1,x2,y2)painter.drawLine(QPoint(200,100),QPoint(400,100));//((x1,y1)(x2,y2))//画一个矩形painter.drawRect(200,150,200,100);//(x1,y1,width,height)//画一个圆形painter.drawEllipse(200,300,200,200);//(圆外切矩形的相关参数)
}
效果如图:
示例2:绘制文本
QPainter类中不仅提供了绘制图形的功能,还可以使用QPainter::drawText()函数来绘制文字,也可以使用QPainter::setFont() 设置字体等信息。
在示例1代码的基础上添加代码:
void Widget::paintEvent(QPaintEvent *event)
{(void) event;//实例化画家对象(需包含QPainter头文件)QPainter painter(this);QFont font("微软雅黑",24);painter.setFont(font);//添加文本painter.drawText(20,200,"求个关注♥");
}
效果如图:
示例3:设置画笔
QPainter 在绘制时,是有⼀个默认的画笔的。在使用时也可以自定义画笔。在Qt中,QPen类中定义了QPainter应该如何绘制形状、线条和轮廓。同时通过QPen类可以设置画笔的线宽、颜色、样式、画刷等;
画笔的颜色可以在实例化画笔对象时进行设置,画笔的宽度是通过setWidth()方法进行设置,画笔的
风格是通过setStyle()方法进行设置,设置画刷主要是通过setBrush()方法;
设置画笔颜色:QPen::QPen(constQColor&color) 画笔的颜色主要是通过QColor类设置;
设置画笔宽度:voidQPen::setWidth(intwidth)
设置画笔风格:voidQPen::setStyle(Qt::PenStylestyle)
查阅Qt文档,查看画笔的风格有以下几种:
仍在示例1的基础上添加代码:
void Widget::paintEvent(QPaintEvent *event)
{(void) event;//实例化画家对象(需包含QPainter头文件)QPainter painter(this);//添加画笔QPen pen;//设置画笔线条颜色 为红色线条pen.setColor(QColor(255,0,0));//设置画笔线条粗细pen.setWidth(5);//设置画笔线条风格pen.setStyle(Qt::DashLine);//让画家拿起画笔painter.setPen(pen);//画一个圆形painter.drawEllipse(300,200,200,200);//(圆外切矩形的相关参数)
}
效果如图:
示例4:设置画刷
在Qt中,画刷是使用QBrush类来描述,画刷大多用于填充。QBrush定义了QPainter的填充模式,具有样式、颜色、渐变以及纹理等属性;
画刷的格式中定义了填充的样式,使用Qt::BrushStyle枚举,默认值是Qt::NoBrush,也就是不进行任何填充。可以通过Qt助手查找画刷的格式。
如下图所示:
设置画刷主要通过voidQPen::setBrush(constQBrush&brush)方法,其参数为画刷的格式。
在示例3代码的基础上添加代码:
void Widget::paintEvent(QPaintEvent *event)
{(void) event;//实例化画家对象(需包含QPainter头文件)QPainter painter(this);//添加画笔QPen pen;//设置画笔线条颜色 为红色线条pen.setColor(QColor(255,0,0));//设置画笔线条粗细pen.setWidth(5);//设置画笔线条风格pen.setStyle(Qt::DashLine);//让画家拿起画笔painter.setPen(pen);//添加画刷QBrush brush;//设置画刷颜色brush.setColor(QColor(0,255,0));//设置画刷风格brush.setStyle(Qt::CrossPattern);//让画家拿起画刷painter.setBrush(brush);//画一个圆形painter.drawEllipse(300,200,200,200);//(圆外切矩形的相关参数)
}
效果如图:
示例5:绘制图片
Qt 提供了四个类来处理图像数据:QImage、QPixmap、QBitmap和QPicture,它们都是常用的绘图设备。其中QImage主要用来进行I/O处理,它对I/O处理操作进行了优化,而且可以用来直接访问和操作像素;QPixmap主要用来在屏幕上显示图像,它对在屏幕上显示图像进行了优化;QBitmap
是QPixmap的子类,用来处理颜色深度为1的图像,即只能显示黑白两种颜色;QPicture用来记录并重演QPainter命令。下面以QPixmap进行示例。
1.首先按照添加qrc文件的方法添加图片
2.按照示例1的步骤在widget.h中添加绘图事件声明
3.在widget.cpp中重写paintEvent()函数
void Widget::paintEvent(QPaintEvent *event)
{(void) event;QPainter painter(this);QPixmap pixmap(":/1.jpg");//基础绘制//painter.drawPixmap(0,0,pixmap);//图片缩放//painter.drawPixmap(0,0,400,400,pixmap);//图片旋转,本质上是把QPainter对象进行了旋转,绘制出来的内容也就发生了旋转painter.rotate(180);//顺时针旋转180度//旋转180度,此时是以原点为中心旋转的//如果要改变旋转的中心,可以使用translate()函数完成painter.translate(-800,-600);//将原点平移到右下角painter.drawPixmap(0,0,400,400,pixmap);
}
效果如图: