自适应网站建设价格,合肥大型网站建设,成都网站建设详细内容,企业公司网页目录
1、绘图核心类
2、QPainter类的使用
2.1 绘制线段
2.2 绘制矩形
2.3 绘制圆形
2.4 绘制文本
3、QPen类的使用
3.1 使用画笔
4、QBrush类的使用
4.1 使用画刷
5、绘制图片
5.1 测试QPixmap
5.1.1 图片移动
5.1.2 图标缩小
5.1.3 旋转图片
5.1.4 将…目录
1、绘图核心类
2、QPainter类的使用
2.1 绘制线段
2.2 绘制矩形
2.3 绘制圆形
2.4 绘制文本
3、QPen类的使用
3.1 使用画笔
4、QBrush类的使用
4.1 使用画刷
5、绘制图片
5.1 测试QPixmap
5.1.1 图片移动
5.1.2 图标缩小
5.1.3 旋转图片
5.1.4 将QPixmap作为绘图设备
5.2 测试QImage
5.3 测试QPicture
结语 前言 Qt提供了DIY度极强的绘图功能目的就是解决在特殊场景时使用系统提供的控件无法达到预期的效果。Qt的绘图功能提供了相关的方法允许开发者在界面中绘制任意的图形形状以完成更复杂的界面设计。 1、绘图核心类 要想使用绘图功能则必须用Qt提供的与绘图相关的类来实例化出对象常用的核心类介绍如下通过以下类的直译也可以看出其作用 QPainter画家 进行绘图操作的最基本的类该类提供了⼀系列drawXXX方法允许在界面中绘制各种图形 QPen画笔 描述用QPainter画出来的线的样式 QBrush画刷 用来填充用QPainter画出来区域 QPaintDevice画板 描述用QPainter画出来图形在哪个对象上比如画在QWidget上则QWidget就是画板而且QWidget本身就继承自QPaintDevice所以他本就可以作为被画对象 值得注意的是绘图操作不能直接在界面的构造函数处执行比如不能在QWidget构造函数中进行绘图原因很简单可以理解为绘图的前提是必须得有画板而执行到QWidget构造函数时还没有生成完整的画板因此哪怕此时绘图了也不能在最终的界面上显示出来因为“画快了”。 所以把绘图操作放到Qt提供的paintEvent事件中即重写该事件实现绘图功能而paintEvent事件会在以下情况自动触发并执行对应的动作 1、控件首次创建的时候。 2、控件被遮挡后再解除遮挡的时候。比如用一个界面去挡住另一个界面然后将他们分开他们不会影响彼此的界面内容原因就是paintEvent的执行动作在重新绘图 3、将窗口最小化的时候。然后恢复窗口窗口的内容不会受到影响注窗口实际上就是控件 4、将控件进行放大缩小的时候。 5、在代码中主动调用repaint()或者update()函数。这两个函数都是QWidget提供的 因此当paintEvent事件触发时就会重新进行绘图这也是为什么在计算机屏幕中可以不断的来回切换各种图形界面给人的感觉是计算机如同一本书一样可以来回翻页实际上是计算机强大的计算能力在不断的重新绘图。
2、QPainter类的使用 介绍QPainter类中的系列函数drawxxx的使用即进行一些基本的绘图。
2.1 绘制线段 使用QPainter提供的函数drawLine进行绘制线段该函数介绍如下
void drawLine(const QPoint p1, const QPoint p2);
//p1绘制起点坐标
//p2绘制终点坐标 在widget.h中声明paintEvent事件代码如下
#ifndef WIDGET_H
#define WIDGET_H#include QWidgetQT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent nullptr);~Widget();void paintEvent(QPaintEvent *event);//重写paintEvent事件private:Ui::Widget *ui;
};
#endif // WIDGET_H在widget.cpp中重写paintEvent事件代码如下
#include widget.h
#include ui_widget.h
#include QPainterWidget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui-setupUi(this);}Widget::~Widget()
{delete ui;
}void Widget::paintEvent(QPaintEvent *event)
{//this表示在当前窗口中绘画QPainter painter(this);//在2020坐标到20020坐标画一条线painter.drawLine(QPoint(20,20),QPoint(200,20));
} 运行结果如下 2.2 绘制矩形 使用QPainter提供的函数drawRect进行绘制线段该函数介绍如下
void QPainter::drawRect(int x, int y, int width, int height)
//x矩形左上角横坐标
//y矩形左上角纵坐标
//width矩形的宽度
//height矩形的⾼度 widget.h代码依旧是声明paintEvent事件因此不再展示widget.h代码直接展示widget.cpp代码
#include widget.h
#include ui_widget.h
#include QPainterWidget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui-setupUi(this);}Widget::~Widget()
{delete ui;
}void Widget::paintEvent(QPaintEvent *event)
{//this表示在当前窗口中绘画QPainter painter(this);//在坐标2020处绘制一个长200宽200的矩形painter.drawRect(20,20,200,200);
} 运行结果 2.3 绘制圆形 使用QPainter提供的函数drawEllipse进行绘制线段该函数介绍如下
void QPainter::drawEllipse(const QPoint center, int rx, int ry)
//center中⼼点坐标
//rx圆的宽度
//ry圆的高度 widget.cpp代码如下
#include widget.h
#include ui_widget.h
#include QPainterWidget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui-setupUi(this);}Widget::~Widget()
{delete ui;
}void Widget::paintEvent(QPaintEvent *event)
{//this表示在当前窗口中绘画QPainter painter(this);//将绘画颜色改成红色painter.setPen(Qt::red);//在坐标(100,100)处换一个宽50高50的红色圆形painter.drawEllipse(QPoint(100,100),50,50);
} 运行结果 2.4 绘制文本 QPainter不仅可以绘图还可以绘制文本这样在界面上写字时就不再需要QLabel作为文本的载体了。使用drawText()函数来绘制文章还可以配合setFont()函数来设置字体样式让字体看起来更加饱满。drawText函数介绍如下
void drawText(const QPoint position, const QString text)
//position表示文本的坐标
//text表示文本内容 值得注意的是这里文本坐标是指文本最左侧的基线出的位置如下图 测试代码如下
#include widget.h
#include ui_widget.h
#include QPainterWidget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui-setupUi(this);
}Widget::~Widget()
{delete ui;
}void Widget::paintEvent(QPaintEvent *event)
{//this表示在当前窗口中绘画QPainter painter(this);//设置字体样式painter.setFont(QFont(华文行楷,30));//设置画笔painter.setPen(Qt::green);painter.drawText(QPoint(150,200),雨打蕉叶又潇潇了几夜);} 运行结果 3、QPen类的使用 使用QPainter绘图时默认有一个画笔没有画笔则无法绘图只不过默认画笔就是最普通的文本样式当然也可以自定义画笔。在Qt中QPen类表示画笔该类定义了QPainter绘图的颜色线条宽度、线条样式。同时通过QPen类提供的函数来设置上述属性常用函数如下
QPen(const QColor color)通过QPen构造函数来设置画笔颜色void setWidth(int width)设置画笔画出线条的宽度void setStyle(Qt::PenStyle style)设置画笔画出线条的样式 其中Qt::PenStyle提供了以下的风格 将上述的枚举常量传给setStyle则画笔就可以画出不同的样式。
3.1 使用画笔 对上述画矩形的代码进行画笔修饰代码如下
#include widget.h
#include ui_widget.h
#include QPainterWidget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui-setupUi(this);}Widget::~Widget()
{delete ui;
}void Widget::paintEvent(QPaintEvent *event)
{//this表示在当前窗口中绘画QPainter painter(this);//自定义画笔QPen pen(QColor(0,255,0));//设置画笔宽度pen.setWidth(30);//设置画笔样式pen.setStyle(Qt::DotLine);//将画笔设置到画家中painter.setPen(pen);//在坐标2020处绘制一个长200宽200的矩形painter.drawRect(20,20,200,200);
} 运行结果 4、QBrush类的使用 QBrush类表示画刷作用是填充图形可以通过QBrush提供的函数对填充样式进行更改比如颜色、风格等。常用函数介绍如下
QPen(const QColor color)设置画刷的颜色void setStyle(Qt::BrushStyle style)设置画刷的风格 其中Qt::BrushStyle是一个枚举类型他提供了多个枚举常量供开发者选择画刷的风格如下图 4.1 使用画刷 对上述画笔代码进行添加画刷代码如下
#include widget.h
#include ui_widget.h
#include QPainterWidget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui-setupUi(this);}Widget::~Widget()
{delete ui;
}void Widget::paintEvent(QPaintEvent *event)
{//this表示在当前窗口中绘画QPainter painter(this);//自定义画笔QPen pen(QColor(0,255,0));//设置画笔宽度pen.setWidth(30);//设置画笔样式pen.setStyle(Qt::DotLine);//将画笔设置到画家中painter.setPen(pen);//自定义画刷QBrush brush(Qt::cyan);//设置画刷的风格brush.setStyle(Qt::Dense1Pattern);//将画刷设置到画家中painter.setBrush(brush);//在坐标2020处绘制一个长200宽200的矩形painter.drawRect(20,20,200,200);
} 运行结果 5、绘制图片 上文的例子说明了如何在界面中手动绘图然而Qt还提供了对现有图片进行处理的类分别是QImage、QPixmap、QBitmap和QPicture这些都是Qt封装好的绘图设备。其中QImage可以对图片进行像素级别的操作QPixmap可以将图片显示到屏幕上QBitmap是QPixmap的子类只能显示黑白两种颜色QPicture用来记录并重演QPainter命令。
5.1 测试QPixmap QPainter提供了drawPixmap函数该函数可以将QPixmap中的资源显示在界面上该函数介绍如下
void drawPixmap(int x, int y, const QPixmap pm)
//x表示图片左上角的横坐标
//y表示图片左上角的纵坐标
//pm表示图片资源 首先需要创建一个虚拟目录虚拟目录详细见Qt_控件的QWidget属性介绍-第五点如下图 代码如下
#include widget.h
#include ui_widget.h
#include QPainterWidget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui-setupUi(this);
}Widget::~Widget()
{delete ui;
}void Widget::paintEvent(QPaintEvent *event)
{QPainter painter(this);//创建QPixmap对象QPixmap map(:/kklt.png);//将图片设置在坐标2020处painter.drawPixmap(20,20,map);
} 运行结果 5.1.1 图片移动 将上述图片进行移动操作移动的本质是将QPainter进行移动而不是直接对QPixmap进行移动代码如下
#include widget.h
#include ui_widget.h
#include QPainterWidget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui-setupUi(this);
}Widget::~Widget()
{delete ui;
}void Widget::paintEvent(QPaintEvent *event)
{QPainter painter(this);//创建QPixmap对象QPixmap map(:/kklt.png);//移动画家painter.translate(100,100);//将图片设置在坐标2020处painter.drawPixmap(20,20,map);
} 运行结果 5.1.2 图标缩小 将上述图片进行缩小函数仍然使用drawPixmap该函数也拥有缩小的功能代码如下
#include widget.h
#include ui_widget.h
#include QPainterWidget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui-setupUi(this);
}Widget::~Widget()
{delete ui;
}void Widget::paintEvent(QPaintEvent *event)
{QPainter painter(this);//创建QPixmap对象QPixmap map(:/kklt.png);// //移动画家
// painter.translate(100,100);//将图片设置在坐标2020处尺寸不变painter.drawPixmap(20,20,map);//将图片设置在坐标50020处尺寸为50*50像素painter.drawPixmap(650,20,50,50,map);
} 运行结果 5.1.3 旋转图片 旋转图片的逻辑稍微复杂点使用QPainter类中的rotate()函数进行旋转并且旋转的不是图片而是QPainter本身所以会导致一种情况即旋转之后的QPainter不在当前窗口中然后我们在该QPainter上显示的图片也不会在当前窗口中显示如下图 从这里也可以得到一个结论QPainter是一种类似于”附在“窗口界面上的媒介我们往窗口中写入的资源实际上是写到该QPainter中然后QPainter再写入至窗口中即QPainter和窗口界面是相互独立的且QPainter可以移动但是当QPainter超出了窗口则QPainter就不能将超出部分的资源写入窗口中了。因此要将旋转之后的QPainter再进行移动将其移动回窗口界面中注意旋转过后的原点位置以及坐标系都变了。 测试代码如下
#include widget.h
#include ui_widget.h
#include QPainterWidget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui-setupUi(this);
}Widget::~Widget()
{delete ui;
}void Widget::paintEvent(QPaintEvent *event)
{QPainter painter(this);//创建QPixmap对象QPixmap map(:/kklt.png);//旋转QPainter顺时针旋转90°painter.rotate(90);//将QPainter移回窗口界面中painter.translate(0,-500);//将图片设置在坐标2020处尺寸不变painter.drawPixmap(20,20,50,50,map);} 运行结果 5.1.4 将QPixmap作为绘图设备 上述中的QPixmap是作为图片载体然而QPixmap还可以作为绘图的对象即将QPixmap作为画板。测试代码如下
#include widget.h
#include ui_widget.h
#include QPainter
#include QPixmapWidget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui-setupUi(this);//将QPixmap作为画板尺寸为500*500pxQPixmap pixmap(300,300);//将pixmap的背景色调成白色pixmap.fill(Qt::white);//让画家在QPixmap上绘画QPainter painter(pixmap);//在QPixmap上画一个圆painter.drawEllipse(QPoint(100,100),50,50);//为了观察是否画在QPixmap上将QPixmap上的内容保存到文件中pixmap.save(D:\\Qt_code\\QPixmap\\pix.png);
}Widget::~Widget()
{delete ui;
} 运行结果 5.2 测试QImage QImage也可以像QPixmap一样作为画板并且也可以保存到磁盘的文件夹中此功能就不再测试了。主要测试QImage更改像素的功能首先重写paintEvent事件通过函数setPixel来设置某个像素的颜色值使用qRgb表示⼀个具体的颜色值测试代码如下
#include widget.h
#include ui_widget.h
#include QPainterWidget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui-setupUi(this);
}Widget::~Widget()
{delete ui;
}void Widget::paintEvent(QPaintEvent *event)
{QPainter painter(this);QImage image;image.load(:\kklt.jpg);//修改像素点for(int i 0;i200;i)for(int j 0;j200;j){QRgb rgb qRgb(0,255,255);image.setPixel(i,j,rgb);}painter.drawImage(20,20,image);
} 运行结果 5.3 测试QPicture QPicture最重要的功能是能够记录QPainter的操作步骤他跟上述几个类不一样上述的类是作为QPainter的画板QPainter将最终的成品绘制在面板中呈现给用户看。而QPicture是记录QPainter绘制的操作然后将该操作进行复盘再将复盘的结果呈现给用户看他们本质上大同小异。 首先需要将QPicture实例作为参数传递给QPainter::begin()函数以便告诉系统开始记录记录完毕后使用QPainter::end()命令终止。测试代码如下
#include widget.h
#include ui_widget.h
#include QPainter
#include QPictureWidget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui-setupUi(this);QPicture picture;QPainter painter;painter.begin(picture);painter.drawEllipse(20,20,50,50);//画一个圆painter.end();//此时picture中存放的就是QPainter的操作步骤将picture保存到磁盘上picture.save(D:\\Qt_code\\QPicture\\pic.pic);
}Widget::~Widget()
{delete ui;
}void Widget::paintEvent(QPaintEvent *event)
{QPainter painter1(this);//从磁盘上加载到picture1中QPicture picture1;picture1.load(D:\\Qt_code\\QPicture\\pic.pic);//将picture1的内容用painter1画出来此时picture1里面存放的并不是图形painter1.drawPicture(30,30,picture1);} 测试结果 结语 以上就是关于Qt绘图的讲解Qt内部提供了许多功能齐全的部分供我们使用因此在大部分的场景下很少用到绘图功能但是不排除一些特别场景并且这些内置控件的底层也是由绘图一步步画出来的因此了解绘图也可以更好的了解这些控件的原理。其次就是绘图可以让开发者进行界面开发时拥有很高的自由度设计一些样式时不再依赖控件作为载体。 最后如果本文有遗漏或者有误的地方欢迎大家在评论区补充谢谢大家
