Qt6教程之三(6) 界面自绘与绘图类

据博主所知，Qt的绘图技术目前分为三大阵营，分别是：

一，基于QWidget的界面自绘制，这种方式纯粹为纯代码绘制，随着绘制图形量的不断增加，会导致其难以管理和性能不佳；

二，基于Qt Graphics View框架的界面自绘，该框架功能强大，据官方给出的数据，绘制百万级图形不在话下，而且其管理方便，性能优越，在日常开发中，当自绘图形量足够多时，建议使用这种方式，而且其跨平台特性也能得到保证，属于Qt原生；

三，使用Qt Quick技术绘制界面，这是最近几年Qt新推出的技术，Qt Quick采用QML书写绘制逻辑，底层采用GPU硬件加速，其开发效率、运行效率、绘图性能均比前面两种强悍，属于顶端绘图技术架构，同时这也是Qt未来开发的主风向标！

以上纯属个人认知，若有笔误，请各位见谅，同时请在评论区留言，便于博主及时修正！

那接下来针对这前2种方式进行逐一演示，至于第三种也会进行简单演示，后面会专门开一章关于Qt Quick的博文，敬请期待！

话不多说，开始写代码：

一基于QWidget的界面自绘制

首先新建一个工程，取名叫 SefWidget ,不需要ui界面文件，继承QWidget,

简单画了几个常用的规则图形，其中的长方形实现了自定义鼠标点击事件，代码如下：

,widget.h

#ifndef WIDGET_H
#define WIDGET_H#include <QMouseEvent>
#include <QTimer>
#include <QWidget>class Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();// QWidget interface
protected:void paintEvent(QPaintEvent *event);void mousePressEvent(QMouseEvent *event);void keyPressEvent(QKeyEvent *event);signals:void mouseIndexChange(int x,int y);
};
#endif // WIDGET_H

widget.cpp

#include "widget.h"#include <QBrush>
#include <QKeyEvent>
#include <QMouseEvent>
#include <QPainter>
#include <QPainterPath>
#include <QPointF>
#include <QMessageBox>Widget::Widget(QWidget *parent): QWidget(parent)
{resize(1200,1200);setWindowTitle("painter ") ;}Widget::~Widget()
{
}//控件的绘画事件
void Widget::paintEvent(QPaintEvent *event)
{QPainter painter(this);painter.setPen(QPen(QColor(255,0,0)));painter.setBrush(QBrush(QColor(255,0,0)));painter.setFont(QFont("Microsoft YaHei",55));painter.drawText(this->rect(),"test text");painter.drawEllipse(0,150,90,90);painter.drawChord(150,150,260,260,30*16,120*16);painter.drawLine(0,300,600,300);QPainter painter2(this);painter2.setPen(QPen(QColor(255,0,0)));painter2.setBrush(QBrush(QColor(255,250,0)));QPainterPath path;path.addRoundedRect(QRect(20,350,200,100),1,1,Qt::AbsoluteSize);path.addRoundedRect(QRect(20,460,200,100),25,25,Qt::RelativeSize);painter2.drawPath(path);//根据四个定点绘制一个多边形const QPointF points[4] = {QPointF(10.0, 610.0),QPointF(20.0, 590.0),QPointF(80.0, 700.0),QPointF(90.0, 800.0),};painter.drawPolygon(points, 4);}void Widget::mousePressEvent(QMouseEvent *event)
{qDebug()<<event->position().x()<<","<<event->position().y();int x= event->position().x();int y= event->position().y();if(event->button()==Qt::LeftButton ){if((22<x && x <220)  && (350<y && y<450)){QMessageBox::information(this,"self button","hello world!");}}qDebug()<<event->button();
}void Widget::keyPressEvent(QKeyEvent *event)
{}

main.cpp

#include "widget.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);Widget w;w.show();return a.exec();
}

运行效果：

二基于Qt Graphics View框架的界面自绘

Qt Graphics View能够实现图形的选择、拖放、修改、标注等功能，非常强大，其原理为：

在场景里面绘制物体，视图按照实际需要继续显示！其架构有以下三个类分工负责完成：
1，QGraphicsScene类提供绘图场景；
2，QGraphicsView提供绘图的视图组件；
3，QGraphicsItem类是图形项的基类；

具体使用请参见以下博文，在此就不在赘述啦！

之前博主也有一篇博文有提到，链接：

Qt6教程之二(8) Display Widgets_爱折腾的业余程序员的博客-CSDN博客本篇文章主要介绍Qt的显示控件基础使用！https://blog.csdn.net/XiaoWang_csdn/article/details/129222330

这里推荐一篇比较优秀的博客，链接：QT Graphics View_qtgraphicsview_Mr.codeee的博客-CSDN博客1.概述采用QPainter绘图时需要在绘图设备paintEvent()事件里编写绘图的程序，实现整个绘图过程，这种方法如同使用windows的画图软件在绘图，绘制的是位图，这种方法适合于绘制复杂性不高的固定图形，不能实现图件的选择、编辑、拖放、修改等功能。Graphics View是一种基于图形项的模型/视图模式，并且每个图形元件是可选择、可拖放和修改的，由3个部分组成，场景、视图、图形项视图、场景、图形项的关系2.场景QGraphicsScene类提供绘图场景，场景是不可见的，是一https://blog.csdn.net/wzz953200463/article/details/115190508?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167799996516800197084448%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=167799996516800197084448&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-2-115190508-null-null.142%5Ev73%5Epc_search_v2,201%5Ev4%5Eadd_ask,239%5Ev2%5Einsert_chatgpt&utm_term=qt%20graphics%20view%E5%8E%9F%E7%90%86&spm=1018.2226.3001.4187

另外，官方示例里面也有关于Graphics View的示例教程，免费下载，链接如下：

Qt 官方 Graphics view示例工程文件https://download.csdn.net/download/XiaoWang_csdn/87459471运行效果：

三，使用Qt Quick技术绘制界面

Qt Quick是Qt界面的未来趋势，而且开发效率极高，运行性能直接支持GPU硬件加速，直接开发工业级画图软件也是不在话下，下面我们将新建一个Qt Quick工程文件，来体验Qt Quick的强大之处。

话不多说，开始写代码：

新建一个Qt Quick工程，工程名称叫MyQuick ,

一直下一步，最后点击完成，

接下来我们画一个矩形，然后在矩形里面放置一个文本字符串，显示 hello world ！；
双击打开 main.qml ,添加内容如下：


import QtQuickWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")Rectangle {width: 400height: 400color: "blue"border.color: "red"border.width: 5radius: 10Text {id: nametext: qsTr("hello world!")}}}

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>int main(int argc, char *argv[])
{QGuiApplication app(argc, argv);QQmlApplicationEngine engine;const QUrl url(u"qrc:/MyQuick/main.qml"_qs);QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,&app,[url](QObject *obj, const QUrl &objUrl) {if (!obj && url == objUrl) QCoreApplication::exit(-1);}, Qt::QueuedConnection);engine.load(url);return app.exec();
}

运行效果：

是不是非常高效快捷，接下来我们实现鼠标事件，当点击矩形时把颜色换为红色，添加内容如下：

MouseArea{anchors.fill: parentonClicked: { parent.color = 'red'}}

完整代码：


import QtQuickWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")Rectangle {width: 400height: 400color: "blue"border.color: "red"border.width: 5radius: 10Text {id: nametext: qsTr("hello world!")}MouseArea{anchors.fill: parentonClicked: { parent.color = 'red'}}}}

效果对比：

这效率是不是比纯手工写代码高很多了呢，至于与C++的交互，留在后面的教程里详细示范！

上一篇文章链接：

Qt6教程之三(5) Model/View_爱折腾的业余程序员的博客-CSDN博客本篇博客主要介绍Qt中的model-view原理及实际应用！https://blog.csdn.net/XiaoWang_csdn/article/details/129338804

下一篇文章链接：

Qt6教程之三(7) Qt开发桌面软件常用技术_爱折腾的业余程序员的博客-CSDN博客大体介绍Qt开发桌面软件常用工具类及相关技术！https://blog.csdn.net/XiaoWang_csdn/article/details/129347751?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22129347751%22%2C%22source%22%3A%22XiaoWang_csdn%22%7D

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/17035.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！