QT跨平台应用程序开发框架(13)—— 绘图API
目录
一,介绍
二,使用
2.1 绘制线段
2.2 绘制圆形
2.3 绘制文字
2.4 设置画笔
2.5 设置画刷
2.6 绘制图片
一,介绍
Qt 已经有了很多内置的控件,其实它们本质上也是“画”出来的,我们前面学习的各种控件,其实都是大佬们已经“画”好了的,放进库里我们直接用就行
但是,也总会有各种非常规场景,从而导致内置的控件不够用,所以有些时候我们需要更强的“自定义”能力,比如事件机制,就是这样
Qt 提供了画图相关的 API,允许我们在窗口上绘制任意的图形形状,来完成更复杂的界面设计(实际开发中大部分情况下不会用,老样子,要用的时候直接查资料现学现用)
绘图 API 核心类如下:
类 | 说明 |
---|---|
QPainter | "绘画者" 用来绘图的对象,提供⼀系列 drawXXX 方法,允许我们绘制各种图形 |
QPaintDevice | "画板" 描述了 QPainter 把图形画到哪个对象上,QWidget 也是一种QPaintDevice(QWidget是QPaintDevice的子类) |
QPen | "画笔" 描述了 QPainter 画出来的线是什么样的 |
QBrush | "画刷" 描述了 QPainter 填充一个区域是什么样的 |
绘图 API 的使用,一般不会在 QWidget 类的构造函数中,要放到 paintEvent 事件中
原因:和 paintEvent 对应的有一个 QPaintEvent 事件,在下面情况中会触发:
- 控件首次创建的时候,比如往 QWidget 上画画,在 QWidget 创建之前画的东西不会生效,创建之后就会显示出来
- 控件被遮挡,再解除遮挡
- 窗口最小化,再恢复
- 控件大小发生变化时
- 主动调用 repaint() 或 update() 方法
- ......
如果把绘图 API 放到构造函数中,一旦出现上面的情况,界面的绘制效果就会有偏差了
二,使用
2.1 绘制线段
先在头文件声明:
后续我们绘图的各种操作就放到这里来执行,如下是绘制直线:
void Widget::paintEvent(QPaintEvent *event)
{(void) event;QPainter painter(this); //这个this不是父对象,是指定绘制的设备(在什么东西上画),在这里不是指 QWidget,而是指整个窗口//画线段painter.drawLine(20, 20, 200, 20); //从(20, 20)的位置开始画,画到(200, 20)停止,也可以用 QPoint 来代替坐标painter.drawLine(20, 20, 20, 200); //这个是竖着画painter.drawLine(QPoint(20, 20), QPoint(100, 100)); //斜着画
}
2.2 绘制圆形
void Widget::paintEvent(QPaintEvent *event)
{(void) event;QPainter painter(this);painter.drawEllipse(QPoint(100, 100), 50, 50); //画一个正圆形painter.drawEllipse(QPoint(200, 200), 200, 50); //可以画椭圆,后面两个参数是外界矩形的高度宽度
}
2.3 绘制文字
void Widget::paintEvent(QPaintEvent *event)
{(void) event;QPainter painter(this);//设置字体QFont font("微软雅黑", 24);painter.setFont(font);//设置画笔颜色painter.setPen(Qt::blue);//画字painter.drawText(QRect(100, 200, 600, 150), "努力就会有回报");//前面两个参数是文字显示的矩形的左上角起始位置,后面两个参数是边框矩形的宽度和高度
}
2.4 设置画笔
上面我们使用 setPen 设置了画笔颜色,同样的,我们也可以设置画笔的宽度和风格,如下实例
void Widget::paintEvent(QPaintEvent *event)
{(void) event;QPainter painter(this);QPen pen;pen.setColor(QColor(255, 0, 0)); //设置画笔颜色pen.setWidth(5); //设置线条粗细,单位pxpen.setStyle(Qt::DashLine); //设置线条风格painter.setPen(pen);painter.drawEllipse(QPoint(100, 100), 50, 50); //画一个圆形
}
2.5 设置画刷
画刷使用 QBrush 来描述,大多数情况下画刷用于填充,具有样式、颜色、渐变以及纹理等属性
void Widget::paintEvent(QPaintEvent *event)
{(void) event;QPainter painter(this);QPen pen;pen.setColor(QColor(255, 0, 0)); //设置画笔颜色pen.setWidth(5); //设置线条粗细,单位pxpen.setStyle(Qt::DashLine); //设置线条风格painter.setPen(pen);QBrush brush;brush.setColor(QColor(0, 255, 0));brush.setStyle(Qt::SolidPattern); //设置填充样式painter.setBrush(brush); //让其能使用画刷painter.drawEllipse(200, 400, 400, 100);
}
可以设置的部分样式如下:
2.6 绘制图片
Qt 提供了四个类来处理图像数据:QImage、QPixmap、QBitmap和QPicture,它们都是常用的绘 图设备
- QImage:主要用来进行 I/O 处理,它对I/O处理操作进行了优化,而且可以用来直接访问和操作像素
- QPixmap:主要用来在屏幕上显示图像,它对在屏幕上显示图像进行了优化
- QBitmap:是 QPixmap 的子类,用来处理颜色深度为1的图像,即只能显示黑白两种颜色
- QPicture:用来记录并重演 QPainter 命令
下面来演示一下 QPixmap 绘制图片:
void Widget::paintEvent(QPaintEvent *event)
{(void) event;QPainter painter(this);//painter.translate(100, 100); //设置图片位置,左上角//从(0, 0) 开始画图,图片尺寸和原图一样painter.drawPixmap(0, 0, QPixmap(":/deepseek.png"));//从(300, 400) 开始画图,尺寸变为50 * 60painter.drawPixmap(300, 400, 50, 60, QPixmap(":/deepseek.png"));
}