QT基础篇(7)QT5图形视图框架

发布时间:2024年01月15日
1.图形视图体系结构
1..1?Graphics?View框架结构的主要特点

Graphics View是Qt中用于绘制和管理2D图形的框架。它的主要特点包括:

  1. 场景(Scene)和视图(View)的分离:Graphics View框架将场景(Scene)和视图(View)分开管理。场景是2D图形对象的容器,而视图是用于显示和交互的窗口。这种分离使得可以在不同的视图中同时显示同一个场景,并且可以轻松地更换视图类型。

  2. 高效的图形渲染:Graphics View框架使用了高效的渲染技术,包括图像缓存和局部更新,可以在处理大规模图形时提供平滑的绘制性能。

  3. 支持交互和事件处理:Graphics View框架提供了丰富的交互功能,包括拖动、缩放、旋转等操作。它还能够处理各种输入事件,如鼠标点击、键盘事件等。

  4. 强大的图形项(Item)系统:Graphics View框架使用图形项(Item)来管理和操作2D图形对象。每个图形项都可以具有不同的属性和行为,可以根据需要添加、删除、移动、转换和组合图形项。

  5. 支持分层绘制:Graphics View框架支持分层绘制,可以定义不同的图层,使得某些图形项可以显示在其他图形项的上方或下方。

  6. 支持坐标变换和视图转换:Graphics View框架支持坐标变换和视图转换,可以实现图形的平移、缩放、旋转等操作,以及从场景坐标到视图坐标的转换。

  7. 支持事件过滤器:Graphics View框架可以使用事件过滤器来过滤和处理事件,可以在每个图形项和视图上独立地设置事件过滤器。这样可以更方便地处理各种输入事件。

总的来说,Graphics View框架具有灵活、高效、交互性强等特点,适用于各种2D图形的绘制和管理任务。

1.2?Graphics?View框架结构的三元素

Graphics View框架的结构由三个主要元素组成:

  1. 场景(Scene):场景是Graphics View框架中的核心元素,用于存储和管理2D图形项。场景提供了一个2D坐标系统,可以在其中添加、删除和操作图形项。它充当了图形对象的容器,可以嵌套使用,并支持层次化的结构。

  2. 视图(View):视图是Graphics View框架中用于显示和交互的组件。视图可以显示场景的内容,并根据需要进行缩放、平移和旋转等操作。一个场景可以在多个视图中显示,实现多窗口或多视图的功能。

  3. 图形项(Item):图形项是Graphics View框架中的基本绘图元素。每个图形项都是一个独立的2D图形对象,可以具有不同的属性和行为。可以通过添加、删除、移动、旋转、缩放等操作来操作图形项。图形项可以是简单的图形对象,如矩形、椭圆、路径等,也可以是复杂的图形组合,如图形项的集合、图形项的组合等。

这三个元素之间的关系是:场景包含了图形项,视图负责显示场景中的内容,并提供交互功能。通过这种结构,Graphics View框架实现了2D图形的绘制、管理和显示,并提供了丰富的交互性能。

1.3?Graphics?View框架结构的坐标系统

Graphics View框架使用的坐标系统是以场景(Scene)为基准的。坐标系统是一个二维坐标系,其中的点用坐标对(x, y)表示。

在Graphics View框架中,场景的左上角被定义为坐标(0, 0),即原点。x坐标增加向右延伸,y坐标增加向下延伸。因此,当x坐标增加时,图形项向右移动;当y坐标增加时,图形项向下移动。

坐标系统默认使用浮点数进行测量,可以表示任意精度的坐标值。这允许图形项的坐标和大小可以以子像素级别进行设置和调整,从而实现更精细的图形效果。

在视图(View)中,可以通过缩放和平移来改变坐标系统的显示范围。缩放操作可以放大或缩小场景中的内容,平移操作可以将场景中的内容从视图的一个位置移动到另一个位置。这样,可以实现对大尺寸或超出视图范围的场景进行浏览和交互的功能。

通过Graphics View框架提供的坐标系统,可以在不同分辨率和设备上实现图形的适应性显示和交互操作。

2.图形视图
2.1?飞舞的蝴蝶

下面是一个使用QT的示例代码实现飞舞的蝴蝶:

#include <QtWidgets>
#include <QPainter>
#include <QTimer>

class Butterfly : public QWidget {
public:
    explicit Butterfly(QWidget* parent = nullptr) : QWidget(parent) {
        setFixedSize(800, 600);
        
        // 设置蝴蝶初始位置
        x = width() / 2;
        y = height() / 2;
        
        // 创建定时器,用于更新蝴蝶位置
        timer = new QTimer(this);
        connect(timer, &QTimer::timeout, this, &Butterfly::updatePosition);
        timer->start(10);
    }

protected:
    void paintEvent(QPaintEvent* event) override {
        Q_UNUSED(event)
        
        QPainter painter(this);
        
        // 绘制蝴蝶
        painter.setRenderHint(QPainter::Antialiasing);
        painter.setBrush(Qt::red);
        painter.setPen(Qt::NoPen);
        
        QPointF points[6] = {
            {x, y},
            {x - 50, y - 20},
            {x - 50, y + 20},
            {x - 70, y + 10},
            {x - 70, y - 10},
            {x - 50, y}
        };
        
        painter.drawConvexPolygon(points, 6);
    }

private:
    void updatePosition() {
        // 更新蝴蝶的位置
        x += dx;
        y += dy;
        
        // 检查蝴蝶是否超出边界,超出则反向移动
        if (x <= 0 || x >= width()) {
            dx = -dx;
        }
        
        if (y <= 0 || y >= height()) {
            dy = -dy;
        }
        
        // 重绘界面
        update();
    }

private:
    QTimer* timer;
    qreal x, y;
    qreal dx = 1, dy = 1;
};

int main(int argc, char** argv) {
    QApplication app(argc, argv);
    
    Butterfly butterfly;
    butterfly.show();
    
    return app.exec();
}

上述代码创建了一个名为Butterfly的自定义QWidget类,用于绘制飞舞的蝴蝶。在构造函数中设置了窗口的固定大小,并初始化了蝴蝶的初始位置。然后使用定时器来更新蝴蝶的位置,每隔一段时间重绘界面。在paintEvent()函数中绘制了一个由6个点组成的蝴蝶形状。updatePosition()函数用于更新蝴蝶的位置,并检查是否越界。最后,在main()函数中创建了应用程序对象,实例化了Butterfly类,并显示出来。

运行该示例代码,即可看到一个在窗口中飞舞的蝴蝶。可以通过调整定时器的时间间隔和蝴蝶的移动速度来调整动画效果。

2.2?地图浏览器

下面是一个使用QT的示例代码实现地图浏览器:

#include <QtWidgets>
#include <QWebView>

int main(int argc, char** argv) {
    QApplication app(argc, argv);
    
    QWidget window;
    QVBoxLayout layout(&window);
    
    QWebView webView;
    webView.load(QUrl("https://www.google.com/maps"));
    
    layout.addWidget(&webView);
    
    window.show();
    
    return app.exec();
}

上述代码创建了一个名为window的QWidget窗口,并使用垂直布局管理器QVBoxLayout来管理窗口中的控件。创建了一个QWebView控件,加载了Google Maps的网页,并将其添加到布局中。最后,通过调用窗口的show()函数来显示窗口。

运行该示例代码,即可看到一个简单的地图浏览器窗口,显示了Google Maps的网页。

2.3?图元创建

在Qt中,可以使用QGraphicsItem类及其子类来创建图元。下面是一个示例代码,演示如何创建一个简单的图元并显示在Graphics View中:

#include <QApplication>
#include <QGraphicsScene>
#include <QGraphicsView>
#include <QGraphicsRectItem>

int main(int argc, char** argv) {
    QApplication app(argc, argv);
    
    // 创建场景
    QGraphicsScene scene;
    
    // 创建图元
    QGraphicsRectItem rectItem(QRectF(0, 0, 100, 100));
    rectItem.setBrush(Qt::red);
    
    // 将图元添加到场景中
    scene.addItem(&rectItem);
    
    // 创建视图并设置场景
    QGraphicsView view(&scene);
    
    // 显示视图
    view.show();
    
    return app.exec();
}

上述代码首先创建了一个名为scene的QGraphicsScene对象,然后创建了一个QGraphicsRectItem对象rectItem,它代表一个矩形图元,并设置其位置和大小。接着,将rectItem添加到场景中使用scene.addItem()方法。然后,创建了一个QGraphicsView对象view,并将场景设置为视图的场景。最后,通过调用视图的show()方法来显示视图。

运行该示例代码,即可看到一个显示了一个红色矩形的Graphics View窗口。

2.4 图元的旋转,缩放,切变,位移

在Qt中,可以使用QGraphicsItem的相关方法实现图元的旋转、缩放、切变和位移。下面是一些示例代码,演示如何对图元进行这些操作:

  1. 旋转图元:
// 顺时针旋转30度
rectItem.setRotation(30);

  1. 缩放图元:
// 水平方向缩小50%,垂直方向放大200%
rectItem.setScale(0.5, 2.0);

  1. 切变图元:
// 在水平方向上切变45度
rectItem.setShear(1, 0);

  1. 位移图元:
// 将图元水平方向移动100个像素,垂直方向移动50个像素
rectItem.setPos(100, 50);

上述代码中,rectItem是一个QGraphicsRectItem对象,代表一个矩形图元。通过调用该对象的相应方法,可以对图元进行旋转、缩放、切变和位移操作。

在实际使用中,可以根据需要组合使用这些方法,实现更复杂的图元变换效果。

文章来源:https://blog.csdn.net/m0_57260797/article/details/135608926
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。