目录
GUI用户界面的优势是通过可视化的界面元素为用户提供便利的操作,界面上的按钮、编辑 框等各种界面组件其实都是通过绘图而得到的。 Qt 的二维绘图基本功能是使用 QPainter 在绘图设 备上绘图,绘图设各包括 QWidget 、 QPixmap 等,通过绘制一些基本的点、线、圆等基本形状组 成自己需要的图形,得到的图形是不可交互操作的图形。
1 QPainter绘图系统
1.1 QPainter与QPaintDevice
Qt的绘图系统使用户可以在屏幕或打印设备上用相同的API绘图,绘图系统基于QPainter、 QPaintDevice和QPaintEngine类。QPainter是用来进行绘图操作的类,QPaintDevice是一个可以使 用QPainter进行绘图的抽象的二维界面,QPaintEngine给QPainter提供在不同设备上绘图的接口。 QPaintEngine类由QPainter和QPaintDevice内部使用,应用程序一般无需和QPaintEngine打交道, 除非要创建自己的设备类型。
一般的绘图设备包括QWidget、QPixmap、Qlmage等,这些绘图设备为QPainter提供一个 “画布"。
1.2 paintEvent事件和绘图区
QWidget类及其子类是最常用的绘图设备,从QWidget类继承的类都有paintEvent()事件,要 在设备上绘图,只需重定义此事件并编写响应代码。创建一个QPainter对象获取绘图设备的接口, 然后就可以在绘图设备的“画布”上绘图了。
在paintEvent()事件里绘图的基本程序结构是:
void Widget::paintEvent(QPaintEvent *event){QPainter painter(this);//创建与绘图设备关联的QPainter对象...//painter在设备的窗口上画图}
首先创建一个属于本绘图设各的QPainter对象painter,然后使用这个painter在绘图设备的窗 口上画图。
QWidget的绘图区就是其窗口内部区域。如图8-1 所示是在一个QWidget窗口上绘制了一个填充矩形 (这个实心矩形及其边框是程序绘制的图形,其他直线 和文字是为说明而加的),整个窗口内部的矩形区就是QPainter可以绘图的区域。
![](https://i-blog.csdnimg.cn/blog_migrate/9a4162d8519c51f437ddc19cc621a503.png)
QWidget的内部绘图区的坐标系统如图8-1所示, 坐标系统的单位是像素。左上角坐标为(0,0),向右是 x轴正方向,向下是Y轴正方向,绘图区的宽度由 QWidget::width()函数获取,高度由QWidget::height()函数获取,所以,绘图区右下角的的点的坐标 是(width(),height())。这个坐标系统是QWidget绘图区的局部物理坐标,称为视口(viewport)坐标。相应的还有逻辑坐标,称为窗口(window)坐标,后面再详细介绍。
使用QPainter在QWidget上绘图就是在这样的一个矩形区域里绘图。
1.3 QPainter绘图的主要属性
用QPainter在绘图设各上绘图,主要是绘制一些基本的图形元素,包括点、直线、圆形、矩 形、曲线、文字等,控制这些绘图元素特性的主要是的3个属性,分别如下。
-
pen属性:是一个QPen对象,用于控制线条的颜色、宽度、线型等,如图8-1所示矩形 边框的线条的特性就是由pen属性决定的。
-
brush属性:是一个QBrush对象,用于设置一个区域的填充特性,可以设置填充颜色、填 充方式、渐变特性等,还可以采用图片做材质填充。图8-1中的矩形用黄色填充就是由brush 属性设置决定的。
-
font属性:是一个QFont对象,用于绘制文字时,设置文字的字体样式、大小等属性。
使用这3个属性基本就控制了绘图的基本特点,当然还有一些其他的功能结合使用,比如叠 加模式、旋转和缩放等功能。
1.4 创建实例
为演示QPainter绘图的基本功能,创建一个Qt Widget Application项目samp8_1,并选择窗口 基类为QWidget,自动创建窗体。创建后的项目有一个Widget类,为了简化代码功能,Widget窗 口里不再放置任何其他组件,只用来绘图。
下面是Widget类的完整定义。只是重新定义了paintEvent()事件,在此事件里编写绘图的代 码。Q_DECL_OVERRIDE宏表示这个函数是对父类虚函数的重载。
class Widget : public QWidget
{
Q_OBJECT
protected:
void paintEvent(QPaintEvent *event) Q_DECL_OVERRIDE;
public:
explicit Widget(QWidget *parent = 0);
~Widget();
private:
Ui::Widget *ui;
};
下面是Widget类构造函数和paintEvent()函数的代码,在界面上绘制如图8-1所示的一个填充 矩形,演示了QPainter绘图的基本过程。