Qt：在widget的外部进行绘制带有坐标轴的图像

Qt零基础教程（四）QWidget详解（3）：QWidget的⼏何结构Qt零基础教程(四) QWidget详解(3):QWidget的⼏何结构这篇⽂章⾥⾯分析了QWidget中常⽤的⼏种⼏何结构下图是Qt提供的分析QWidget⼏何结构的⼀幅图,在帮助的 Window and Dialog Widgets 可以找到相关的内容介绍：在Qt中横坐标的⽅向和我们平时看到的笛卡⼉坐标系是相同的，但是纵坐标和笛卡⼉坐标系是相反的，这⾥的纵坐标是向下的，不知道是不是和刚开始的电⼦管屏幕电⼦打在屏幕上的顺序是有关的。

从这副图⾥⾯可以看到，这⾥有两种⼏何结构：1：不包含外边各种边框的⼏何结构。

2：包含外边各种边框的⼏何结构；**************************************************************************在这⾥先分析不包含边框的各种设置函数：⼀般情况下式，不包含边框的部分是客户区部分，这⾥⾯就是我们正常操作的部分，可以在这部分⾥⾯添加⼦部件。

这部分是⼀个长⽅形，那么对于⼀个长⽅形，就会有⼤⼩和位置。

⼤⼩的话就是宽和⾼(国外的说法，和中国的长宽⾼不同)，位置就是这个长⽅形在电脑屏幕上的位置。

Qt中保存这个长⽅形是⽤了⼀个QRect这个类，这⾥我们不去深究这个类，后⾯的⽂章会详细说明⼀下这个类。

要改改变这个⼤⼩和位置可以有如下⼏个函数：1void resize(int w, int h);2void resize(const QSize &);这两个函数是改变了长⽅形的⼤⼩，第⼀个参数是宽，第⼆个是⾼。

这⾥的英⽂是Width和Height。

设置了⼤⼩之后的窗⼝还是可以通过⿏标进⾏改变窗⼝的⼤⼩。

通过下⾯的函数可以获得客户区的⼤⼩：1 QSize size() const下⾯的函数分别获得了宽度和⾼度：1int width() const2int height() constView Code如果要设置不可以改变的窗⼝：set FixedHeight(int h)这个时候⾼度就是固定的了，不可以改变⾼度，但是可以改变宽度set FixedWidth(int w)这个时候宽度就是固定的了，不可以改变宽度，但是可以改变⾼度void setFixedSize(const QSize & s)void setFixedSize(int w, int h)通过上⾯的这两个函数，⾼度和宽度都是固定的了，不可以通过⿏标来改变窗⼝的宽度和⾼度。

osgqopenglwidget用法osgQtOpenGLWidget是OpenSceneGraph（OSG）库与Qt框架结合的一个小部件，用于在Qt应用程序中显示和渲染3D图形。

下面是osgQtOpenGLWidget的用法示例：1. 首先，确保你的项目已经正确设置了OpenSceneGraph和Qt的依赖关系。

2. 在你的Qt应用程序中创建一个Qt窗口或对话框，用于放置osgQtOpenGLWidget 小部件。

3. 在你的窗口或对话框的头文件中引入osgQtOpenGLWidget的头文件：```cpp#include <osgQt/GraphicsWindowQt>#include <osgViewer/Viewer>#include <osgViewer/ViewerEventHandlers>```4. 创建一个osgViewer::Viewer对象和一个osgQt::GraphicsWindowQt对象：```cpposg::ref_ptr<osgViewer::Viewer> viewer = new osgViewer::Viewer;QWidget* container = new QWidget(this);osgQt::GraphicsWindowQt* graphicsWindow = newosgQt::GraphicsWindowQt(container);```5. 在容器窗口中设置layout，并将osgQtOpenGLWidget添加到layout中：```cppQVBoxLayout* layout = new QVBoxLayout;layout->addWidget(graphicsWindow->getGLWidget());container->setLayout(layout);```6. 创建一个osg::Node对象，它代表你想要渲染的3D场景，例如一个模型或一个场景图。

Qt图形视图框架三——坐标系统⼀基础知识 图形视图框架是基于笛卡尔坐标系统的，⼀个图形项在场景中的位置和⼏何形状由x坐标和y坐标来表⽰。

当使⽤⼀个没有变换的视图来观察场景时，场景中的⼀个单元代表屏幕上的⼀个像素。

图形视图框架的三个坐标系分别是视图坐标系、场景坐标系和图元坐标系。

三个坐标系分别由视图、场景和图元使⽤。

为了⽅便应⽤，图形视图框架中提供了⼀些便捷函数来完成3个坐标系统之间的映射。

当进⾏绘图时，场景坐标对应QPainter的逻辑坐标，视图坐标对应设备坐标。

⽐如在给场景中添加图元时，图元的位置就是相对于场景坐标系⽽⾔的：1.1 场景坐标系 场景坐标系是所有图元对象的绝对坐标. 有四个象限，场景坐标是所有图形项的基础坐标系统。

场景坐标系统描述了每⼀个顶层图形項的位置，也形成了所有从视图传到场景上的事件的基础。

场景坐标的原点在场景的中⼼，x轴正⽅向向右，y轴正⽅向向下。

每⼀个在场景中的图形项除了拥有⼀个图形項的本地坐标和边界矩形外，还都拥有⼀个场景坐标（QGraphicsItem: :scenePos())和⼀个场景中的边界矩形（QGraphicsItem::sceneBoundingRect())。

场景坐标⽤来描述图形项在场景坐标系统中的位置，⽽图形项的场景边界矩形⽤于QGraphicsScene判断场景中的哪些区域进⾏了更改。

常⽤添加图元函数：QGraphicsScene::setBackgroundBrush //填充背景⾊QGraphicsScene::setForegroundBrush //填充前景⾊QGraphicsScene::addSimpleText //添加简单⽂本QGraphicsScene::addLine //添加直线QGraphicsScene::addRect //添加矩形QGraphicsScene::addEllipse //添加椭圆QGraphicsScene::addWidget //添加窗⼝QGraphicsScene::addPixmap //添加图⽚操作图元函数：QGraphicsScene::itemAt //查找场景某个中最表层的itemQGraphicsScene::setSelectionArea //设置选定区域QGraphicsScene::setSceneRect //设置场景的区域⼤⼩QGraphicsScene::itemsBoundingRect //根据所有的item计算区域⼤⼩QGraphicsScene:: selectedItems //获取被选中的item,item必须为可选QGraphicsItem::ItemIsSelectableQGraphicsScene类的坐标系以中⼼为原点（0,0），如下图所⽰。

=====================================Widget.h============= =============================================================Widget.cpp=============== ======================#include"Widget.h"#include"ui_Widget.h"#include<QtGui/QPainter>Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);ui->widget->installEventFilter(this);}Widget::~Widget() {delete ui;}void Widget::changeEvent(QEvent *e) {QWidget::changeEvent(e);switch (e->type()) {case QEvent::LanguageChange:ui->retranslateUi(this);break;default:break;}}bool Widget::eventFilter(QObject *watched, QEvent *e) {if (watched == ui->widget) {if (e->type() == QEvent::Paint) {paintOnWidget(ui->widget);return true;}}return QWidget::eventFilter(watched, e);}void Widget::paintOnWidget(QWidget *w) {QPainter painter(w);QFontMetrics metrics = painter.fontMetrics();int textHeight = metrics.ascent() + metrics.descent();int leftWidth = metrics.width(tr("9000")) + 5;int rightWidth = metrics.width(tr("(日)"));int width = w->size().width() - leftWidth - rightWidth;int height = w->size().height() - 3 * textHeight;// 绘制外框painter.drawRect(0, 0, w->size().width() -1, w->size().height() - 1);//移动坐标系//painter.translate(inset * 2, ui->yearWidget->size().height() - inset);painter.translate(leftWidth, 1.75 * textHeight + height);int totalCount = 9000; //默认每年收入9000件衣服int count = 10; //分成10成float deltaX = width / 12.0f; // x坐标上每分的宽度float deltaY = (float)height / count; // y坐标上每分的宽度// 画横坐标painter.drawLine(0, 0, width, 0);for (int i = 1; i <= 12; ++i) {QString month = tr("%1月").arg(i);int stringWidth = metrics.width(month);// 绘制坐标刻度painter.drawLine(deltaX * i, 0, deltaX * i, 4);// 绘制坐标处的月int monthX = deltaX * (i - 1) + ((deltaX - stringWidth) / 2);painter.drawText(monthX, textHeight, month);}// 画纵坐标painter.drawLine(0, 0, 0, -height);painter.drawText(-metrics.width(tr("(件)")),-(deltaY * count + textHeight / 2 + metrics.descent()),tr("(件)"));for (int i = 1; i <= count; ++i) {QString value = QString("%1").arg(i * totalCount / count);int stringWidth = metrics.width(value);// 绘制坐标刻度painter.drawLine(-4, -i * deltaY, 0, -i * deltaY);//绘制坐标值//painter.drawText(-stringWidth - 4, -i * deltaY + stringHeight / 2, value);painter.drawText(-stringWidth - 4, -(deltaY * i + textHeight / 2- metrics.ascent()), value);}// // 绘制每个月收到的服饰// painter.setBrush(Qt::BDiagPattern);// for (int i = 0; i < yearList.size(); ++i) {// painter.setPen(Qt::black);// int fineryCount = yearList.at(i); // 第i + 1个月收到的服饰件数// int h = fineryCount / (float)totalCount * height;// painter.drawRect(deltaX * i + 2, 0, deltaX - 4, -h);//// // 绘制收到的服饰件数// QString fineryString = QString("%1").arg(fineryCount);// int stringWidth = metrics.width(fineryString);//// if (h > height) {// h = height;// }//// painter.setPen(Qt::red);// //painter.drawText(deltaX * i + (deltaX - stringWidth) / 2, -(h + metrics.descent()), fineryString);// }}#ifndef WIDGET_H#define WIDGET_H#include <QWidget>namespace Ui {class Widget;}class Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent = 0);~Widget();protected:virtual void changeEvent(QEvent *e);virtual bool eventFilter(QObject *watched, QEvent *e);void paintOnWidget(QWidget *w);private:Ui::Widget *ui; };#endif// WIDGET_H。

QT显⽰图⽚的四种⽅法相关⽂章QT显⽰图⽚的⽅法有很多⼤致为label上显⽰直接画出来容器显⽰1---------------显⽰gif图⽚（label上显⽰）在QT中要显⽰GIF图⽚,不能通过单单的添加部件来完成.还需要⼿动的编写程序.⼯具:QT Creator新建⼀个⼯程,我们先在designer中,添加⼀个QLabel部件.如下图:将QLabel拉成适当⼤⼩.在类cpp函数中添加如下程序:#include "widget.h"#include "ui_widget.h"#include <QLabel>#include <QMovie>Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget){ui->setupUi(this);QMovie *movie =new QMovie("D:/Project/Qt/testclass/2.gif");ui->label->setMovie(movie);movie->start();}Widget::~Widget(){delete ui;}如下图:这⾥要注意QMovie中的路径名:"D:/Project/Qt/testclass/2.gif" 这⾥的路径斜杠和WINDOWS下是相反的.WINDOWS下默认是反斜杠.编译,运⾏就没有问题,就会看到GIF⽂件在播放了.如下图:当⽂档GIF图⽚显⽰:#include <QtGui/QApplication>#include <QLabel>#include <QMovie>int main(int argc,char*argv[]){QApplication app(argc,argv);QLabel *label =new QLabel();QMovie *movie =new QMovie("D:/Project/Qt/firstQT/2.gif"); label->setMovie(movie);movie->start();label->show();return app.exec();}2-------------------------label上显⽰图⽚------------------把你的label.png放到⼯程⽬录顶层，直接QPixmap pixmap("label.png");ui->title_label->setPixmap(pixmap);ui->title_label->show();---可以直接：label->setPixmap(QPixmap("./pic.jpg"));或者：QImage *image= new QImage("./pic.jpg");label->setPixmap(QPixmap::fromImage(image));再或者在中途换某个图像的话：QImage *image= new QImage("./pic1.jpg");label->setPixmap(QPixmap::fromImage(image)); ...........image->load("./pic2.jpg");3----------直接画出图⽚-------------------------voidlogindlg::paintEvent(QPaintEvent*){QPainterpainter(this);QPixmappix;pix.load("D:/QT/login/login/images/delta.png");painter.drawPixmap(0,0,100,33,pix);//painter.drawLine(0,0,100,100);}4-----------程序启动时的图⽚QApplication app(argc, argv);QSplashScreen *splash = new QSplashScreen;splash->setPixmap(QPixmap(":/images/splash.png"));//设置图⽚splash->show();//显⽰图⽚Qt::Alignment topRight = Qt::AlignRight | Qt::AlignTop;splash->showMessage(QObject::tr("Setting up the main window..."),topRight, Qt::white);//显⽰信息MainWindow mainWin;splash->showMessage(QObject::tr("Loading modules..."),topRight, Qt::white); //显⽰信息loadModules();splash->showMessage(QObject::tr("Establishing connections..."),topRight, Qt::white); //显⽰信息establishConnections();mainWin.show();splash->finish(&mainWin);//图⽚⼀直显⽰到mainWin加载完成delete splash;//释放空间，节省内存return app.exec();来⾃:⾸先你得加载⼀张能显⽰透明的图⽚，jpg格式肯定是不⾏的，⼀般都是png还有不同的部件加载图⽚的⽅法也不太相同，⽐如：QLabel加载图⽚：C/C++ codeQString strPath=imagePath.value(day); //图⽚路径QPixmap pix(strPath);dayLabel->setPixmap(pix);QPushButton加载图⽚：C/C++ codebutton->setIcon(QIcon("toolbutton.png"));button->setIconSize(QSize(48, 48));其中setIconSize函数是⽤来截取图⽚的显⽰区域，如果没有该函数，该图⽚是被缩放的放到图⽚上⽤调⾊板加载图⽚：C/C++ codeQPalette p = palette();p.setBrush(QPalette::Button, QBrush(QPixmap("toolbutton.png")));setPalette(p);另外实现按钮的透明：C/C++ codebutton->setFlat(true);还有就是⽤绘制事件函数了：C/C++ codeQPixmap arrayImage("/home/image/array.png"); //图⽚路径QRect arrayRect(0,0,50,50); //截取图⽚区域QPainter painter；painter.drawPixmap(QPoint(100,100),arrayImage,arrayRect); //打印图⽚//=============================================================================================================================备注::1>这⾥要注意QMovie中的路径名:"D:/Project/Qt/testclass/2.gif" 这⾥的路径斜杠和WINDOWS下是相反的.WINDOWS下默认是反斜杠.。

QT二维绘图8-1 用QPainter绘图（Painting with QPainter）要在绘图设备（paint device，一般是一个控件）上开始绘制，我们只要创建一个QPainter，把绘图设备指针传给QPainter对象。

例如：oid MyWidget::paintEvent(QPaintEvent *event){QPainter painter(this);...}使用QPainter的draw…()函数我们可以绘制各种图形。

图8.1给出了主要的一些。

绘制的方式由QPainter的设置决定。

设置的一部分是从绘图设备得到的，其他是初始化时的默认值。

三个主要的设置为：画笔，刷子和字体。

画笔用来绘制直线和图形的边框。

包含颜色，宽度，线型，角设置和连接设置。

刷子是填充几何图形的方式。

包含颜色，方式设置，也可以是一个位图或者渐变色。

字体用来绘制文本。

字体的属性很多，如字体名，字号等。

这些设置随时可以改变，可用QPen，QBrush，QFont对象调用setPen()，setBrush()，setFont()修改。

Figure 8.1. QPainter's most frequently used draw...() functionsFigure 8.2. Cap and join stylesFigure 8.3. Pen stylesFigure 8.4. Predefined brush styles现在来看看具体的例子。

下面的代码是绘制图8.5(a)中椭圆的代码：QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing, true);painter.setPen(QPen(Qt::black, 12, Qt::DashDotLine, Qt::RoundCap));painter.setBrush(QBrush(Qt::green, Qt::SolidPattern));painter.drawEllipse(80, 80, 400, 240);调用函数setRenderHint(QPainter::Antialiasing,true)，使绘制时边缘平滑，使用颜色浓度的变化，把图形的边缘转换为象素时引起的扭曲变形尽可能减少，在支持这一功能的平台或者绘图设备上得到一个平滑的边缘。

qt中绘图事件paintEvent的⽤法⼀．主要理解⼀下⼏个⽅法和属性：1．QWidget * QScrollView::viewport () const2．void QWidget::paintEvent ( QPaintEvent * ) [虚保护]3．void QWidget::repaint ( int x, int y, int w, int h, bool erase = TRUE ) [槽]4．void QWidget::update () [槽]5．void QWidget::erase ( int x, int y, int w, int h )6．bool updatesEnabled⼆．现分别详细介绍：1．QWidget * QScrollView::viewport () const返回滚动视图中的视⼝窗⼝部件，这个窗⼝部件包含内容窗⼝部件或者要画的区域。

2．void QWidget::paintEvent ( QPaintEvent * ) [虚保护]只要窗⼝部件需要被重绘就被调⽤。

每个要显⽰输出的窗⼝部件必须实现它。

这个事件处理器可以在⼦类中被重新实现来接收绘制事件。

它可以是repaint()或update()的结果。

很多窗⼝部件在当它们被请求时，它们很简单地重新绘制整个界⾯，但是⼀些窗⼝部件通过仅仅绘制被请求的区域QPaintEvent::region()进⾏优化，例如，QListView和QCanvas就是这样做的。

Qt也可通过把多个绘制事件合并为⼀个来加快绘制速度。

当update()被调⽤⼏次或者窗⼝系统发送⼏次绘制事件，Qt把它们合并为⼀个⽐较⼤区域（请参考QRegion::unite()）的⼀个事件中。

repaint()不允许这样优化，所以只要可能我们尽量使⽤update ()。

当绘制事件发⽣，更新区域通常被擦除。

这⾥有⼀些例外，通过QPaintEvent::erased()可以得知这个窗⼝部件是否被擦除。

QtQPainter的使⽤及矩形、圆形等常见图形的画法1 #include<QApplication>2 #include <QWidget>3 #include <QPainter>4class MyMainWindow:public QWidget5 {6public:7 MyMainWindow(QWidget *parent = 0);8private:9void paintEvent(QPaintEvent*);10 QPainter *paint;11 };121314void MyMainWindow::paintEvent(QPaintEvent*)1516//paintEvent函数由系统⾃动调⽤，⽤不着我们⼈为的去调⽤。

17 {18 paint=new QPainter;19 paint->begin(this);20 paint->setPen(QPen(Qt::blue,4,Qt::DashLine));//设置画笔形式21 paint->setBrush(QBrush(Qt::red,Qt::SolidPattern));//设置画刷形式22 paint->drawRect(20,20,160,160);23 paint->end();24 }252627 MyMainWindow::MyMainWindow(QWidget*parent):QWidget(parent)28 {29 setGeometry(100,100,200,200);30 }313233int main(int argc,char**argv)34 {35 QApplication a(argc,argv);36 MyMainWindow w;37 w.show();38return a.exec();39 }绘制圆和椭圆核⼼代码：1 paint->setPen(QPen(Qt::blue,4，Qt::SolidLine));2 paint->drawEllipse(20,20,210,160);第1，2个参数分别表⽰圆/椭圆距左上⾓的像素数。

Qt Custom Plot 是一个强大的图形绘制库，用于在Qt 应用程序中绘制各种图形。

要在Qt Custom Plot 中绘制sin 和cos 曲线，你需要使用QCPGraph 类。

以下是一个简单的示例代码，展示了如何在Qt Custom Plot 中绘制sin 和cos曲线：cpp复制代码#include"mainwindow.h"#include"ui_mainwindow.h"#include"qcustomplot.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow){ui->setupUi(this);// 创建 QCustomPlot 实例QCustomPlot *customPlot = new QCustomPlot(ui->centralWidget);ui->verticalLayout->addWidget(customPlot);// 创建数据序列QVector<double> x(100); // x 数据点数量为 100QVector<double> siny, cosy; // sin 和 cos 的 y 数据点for (int i=0; i<100; ++i){x[i] = i/50.0 - 1; // x 范围从 -1 到 1，步长为 0.2siny << qSin(x[i]*2*M_PI); // 计算 sin 值cosy << qCos(x[i]*2*M_PI); // 计算 cos 值}// 创建图形并添加数据序列QCPGraph *graph = customPlot->addGraph();graph->setPen(QPen(Qt::black));graph->addData(x, siny);graph->addData(x, cosy);// 设置坐标轴范围以适应数据customPlot->rescaleAxes();}这个示例创建了一个QCustomPlot 实例，并添加了两个数据序列（sin 和cos）。