QT基础篇（7）QT5图形视图框架

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 
#include 
#include 

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 
#include 

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 
#include 
#include 
#include 

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对象，代表一个矩形图元。通过调用该对象的相应方法，可以对图元进行旋转、缩放、切变和位移操作。

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