【Qt】界面优化2——绘画API1. 基本概念2. 绘制各种图案2.1 绘制线段2.2 绘制矩形2.3. 绘制圆2.4 绘制文本3. 设置画笔4.设置画刷5. 绘制图片5.1 绘制简单图片5.2 平移图片5.3 旋转图片1. 基本概念虽然Qt已经内置了很多的空间也能正常满足我们的日常开发但是也不能完全保证现有的控件能完全满足我们所有的场景。有时候也需要我们自定义的图形。Qt提供了画图相关的API可以允许我们在窗口绘制任意的图形形状来完成更复杂的界面设计。其实Qt中这些现有的控件其实都是Qt通过画图相关的API进行了进一步的封装。绘画API的核心类类说明QPainter绘画者或者画家用来绘图的对象提供了一系列drawXXX方法可以允许我们绘制各种图形QPaintDevice画板”描述了QPainter把图形画到哪个对象上.像咱们之前用过的QWidget也是一种QPaintDevice(QWidget是QPaintDevice的子类).QPen画笔”描述了QPainter画出来的线是什么样的QBrush画刷描述了QPainter填充一个区域是什么样的.这里注意了我们之前创建Qt内置的控件的时候基本上都是在QWidget的构造函数中实现的但是这里我们不能这样做qt中有一个QPaintEvent类一旦我们使用会话API触发了以下操作就会触发paintEvent事件进行绘制。控件首次创建控件被遮挡再解除遮挡窗口最小化.再恢复.控件大小发生变化时.主动调用repaint()或者update()方法.这两个方法都是QWidget的方法).…因此,如果把绘图api放到构造函数中调用,那么一旦出现上述的情况,界面的绘制效果就无法确保符合预期了。所以我们如果要进行绘制的话通常是重写paintEvent然后在重写paintEvent这个函数中进行绘制。2. 绘制各种图案2.1 绘制线段函数介绍voiddrawLine(constQPointp1,constQPointp2);voidQPainter::drawLine(intx1,inty1,intx2,inty2)参数 p1绘制起点坐标 p2绘制终点坐标 需要通过QPainter对象进行调用示例voidWidget::paintEvent(QPaintEvent*event){// 实例化画家对象// 注意这里是通过局部变量的方式创建painter所以这里传入的this// 表示画家的画画在哪里QPainterpainter(this);// 画一条线painter.drawLine(Qpoint(10,10),QPoint(500,10));// 也可以使用下面这种方式//painter.drawLine(10, 10, 500, 10);}2.2 绘制矩形函数介绍voidQPainter::drawRect(intx,inty,intwidth,intheight) 参数 x窗⼝横坐标 y窗⼝纵坐标 width所绘制矩形的宽度 height所绘制矩形的⾼度示例voidWidget::paintEvent(QPaintEvent*event){// 实例化画家对象// 注意这里是通过局部变量的方式创建painter所以这里传入的this// 表示画家的画画在哪里QPainterpainter(this);// 画一个矩形painter.drawRect(20,20,100,100);}2.3. 绘制圆函数介绍voidQPainter::drawEllipse(constQPointcenter,intrx,intry)参数 center中⼼点坐标 rx横坐标 ry纵坐标示例voidWidget::paintEvent(QPaintEvent*event){// 实例化画家对象// 注意这里是通过局部变量的方式创建painter所以这里传入的this// 表示画家的画画在哪里QPainterpainter(this);// 画一个圆painter.drawEllipse(20,20,100,100);}2.4 绘制文本QPainter类中不仅提供了绘制图形的功能还可以使用QPainter::drawText()函数来绘制文字也可以使用QPainter::setFont()设置字体等信息。voidQPainter::drawText(constQPointFposition,constQStringtext)参数 position中⼼点坐标 text文本内容示例voidWidget::paintEvent(QPaintEvent*event){// 实例化画家对象// 注意这里是通过局部变量的方式创建painter所以这里传入的this// 表示画家的画画在哪里QPainterpainter(this);// 设置字体QFontfont(微软雅黑,24);// 设置字体和字体大小painter.setFont(font);painter.drawText(50,80,hello);}3. 设置画笔QPainter在绘制时是有一个默认的画笔的。在使用时也可以自定义画笔。在Qt中QPen类中定义了QPainter应该如何绘制形状、线条和轮廓可以使用setPen函数设置画笔。同时通过QPen类可以设置画笔的线宽、颜色、样式、画刷等。画笔的颜色可以在实例化画笔对象时进行设置画笔的宽度是通过setWidth()方法进行设置画笔的风格是通过setStyle()方法进行设置设置画刷主要是通过setBrush()方法。设置画笔颜色QPen:QPen(const QColorcolo)画笔的颜色主要是通过QColor类设置设置画笔宽度void QPen:setWidth(int width)设置画笔风格void QPen:setStyle(Qt:PenStyle style)画笔的风格有于是我们可以设置画笔重新将上述的案例重新绘制voidWidget::paintEvent(QPaintEvent*event){// 实例化画家对象// 注意这里是通过局部变量的方式创建painter所以这里传入的this// 表示画家的画画在哪里QPainterpainter(this);// 设置画笔QPenpen(QColor(255,0,0));// 设置画笔的颜色pen.setWidth(3);// 设置画笔的宽度pen.setStyle(Qt::DashLine);// 设置画笔的风格painter.setPen(pen);// 让画家使用画笔}4.设置画刷在Qt中画刷是使用QBrush类来描述画刷大多用于填充。QBrush定义了QPainter的填充模式具有样式、颜色、渐变以及纹理等属性。画刷的格式中定义了填充的样式使用Qt:BrushStyle枚举默认值是Qt:NoBrush,也就是不进行任何填充。可以通过Qt助手查找画刷的格式。如下图示函数介绍voidQPainter::setBrush(constQBrushbrush)示例voidWidget::paintEvent(QPaintEvent*event){// 实例化画家对象// 注意这里是通过局部变量的方式创建painter所以这里传入的this// 表示画家的画画在哪里QPainterpainter(this);// 设置画笔QPenpen(QColor(255,0,0));// 设置画笔的颜色pen.setWidth(3);// 设置画笔的宽度pen.setStyle(Qt::DashLine);// 设置画笔的风格painter.setPen(pen);// 让画家使用画笔// 设置画刷QBrushbursh(QColor(0,255,0));bursh.setStyle(Qt::DiagCrossPattern);painter.setBrush(bursh);// 画一个圆painter.drawEllipse(20,20,100,100);}5. 绘制图片Qt提供了四个类来处理图像数据QImage、QPixmap、QBitmap和QPicture,它们都是常用的绘图设备。其中QImage主要用来进行I/O处理它对I/O处理操作进行了优化而且可以用来直接访问和操作像素QPixmap主要用来在屏幕上显示图像它对在屏幕上显示图像进行了优化QBitmap是QPixmap的子类用来处理颜色深度为l的图像即只能显示黑白两种颜色QPicture用来记录并重演QPainter命令。5.1 绘制简单图片现在我们简单的绘制以下图片同样的先将图片资源添加到qrc中。voidWidget::paintEvent(QPaintEvent*event){QPainterpainter(this);painter.drawPixmap(0,0,800,600,QPixmap(:/qt.jpg));// 同时可以对图片进行缩放}5.2 平移图片平移图片实际是通过改变坐标来实现。QPainter类中提供了translate()函数来实现坐标原点的改变。voidWidget::paintEvent(QPaintEvent*event){QPainterpainter(this);painter.translate(20,20);painter.drawPixmap(0,0,400,300,QPixmap(:/qt.jpg));}5.3 旋转图片图片的旋转使用的是QPainter类中的rotate()函数它默认是以原点为中心进行旋转的。如果要改变旋转的中心可以使使用translate()函数完成。这里要注意的是这里所谓的旋转其实针对的对象是QPsinter这个画家而不是窗口。示例将图片旋转180度voidWidget::paintEvent(QPaintEvent*event){// 实例化画家QPainterpainter(this);// 移动位置painter.translate(20,20);painter.rotate(180);// 表示旋转180painter.drawPixmap(0,0,400,300,QPixmap(:/qt.jpg));}voidWidget::paintEvent(QPaintEvent*event){// 实例化画家QPainterpainter(this);// 移动位置painter.translate(20,20);painter.rotate(180);// 表示旋转180// 将坐标放到右下角painter.translate(-800,-600);// 往坐标的反方向走是负值painter.drawPixmap(0,0,400,300,QPixmap(:/qt.jpg));}