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

code_shenbing

已于 2023-03-05 16:38:52 修改

阅读量1.9k

点赞数

分类专栏： Qt学习程序开发文章标签： qt 开发语言

于 2023-03-05 10:07:56 首次发布

本文链接：https://blog.csdn.net/XiaoWang_csdn/article/details/129342923

版权

Qt学习同时被 2 个专栏收录

40 篇文章 86 订阅

订阅专栏

程序开发

32 篇文章 7 订阅

订阅专栏

据博主所知，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_OBJECT

public:
    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

另外，官方示例里面也有关于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 QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")




    Rectangle {
        width: 400
        height: 400
        color: "blue"
        border.color: "red"
        border.width: 5
        radius: 10

        Text {
            id: name
            text: 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: parent
            onClicked: { parent.color = 'red'}
        }

完整代码：


import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")




    Rectangle {
        width: 400
        height: 400
        color: "blue"
        border.color: "red"
        border.width: 5
        radius: 10

        Text {
            id: name
            text: qsTr("hello world!")

        }

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



}

效果对比：