Graphics View是Qt中用于绘制和管理2D图形的框架。它的主要特点包括:
场景(Scene)和视图(View)的分离:Graphics View框架将场景(Scene)和视图(View)分开管理。场景是2D图形对象的容器,而视图是用于显示和交互的窗口。这种分离使得可以在不同的视图中同时显示同一个场景,并且可以轻松地更换视图类型。
高效的图形渲染:Graphics View框架使用了高效的渲染技术,包括图像缓存和局部更新,可以在处理大规模图形时提供平滑的绘制性能。
支持交互和事件处理:Graphics View框架提供了丰富的交互功能,包括拖动、缩放、旋转等操作。它还能够处理各种输入事件,如鼠标点击、键盘事件等。
强大的图形项(Item)系统:Graphics View框架使用图形项(Item)来管理和操作2D图形对象。每个图形项都可以具有不同的属性和行为,可以根据需要添加、删除、移动、转换和组合图形项。
支持分层绘制:Graphics View框架支持分层绘制,可以定义不同的图层,使得某些图形项可以显示在其他图形项的上方或下方。
支持坐标变换和视图转换:Graphics View框架支持坐标变换和视图转换,可以实现图形的平移、缩放、旋转等操作,以及从场景坐标到视图坐标的转换。
支持事件过滤器:Graphics View框架可以使用事件过滤器来过滤和处理事件,可以在每个图形项和视图上独立地设置事件过滤器。这样可以更方便地处理各种输入事件。
总的来说,Graphics View框架具有灵活、高效、交互性强等特点,适用于各种2D图形的绘制和管理任务。
Graphics View框架的结构由三个主要元素组成:
场景(Scene):场景是Graphics View框架中的核心元素,用于存储和管理2D图形项。场景提供了一个2D坐标系统,可以在其中添加、删除和操作图形项。它充当了图形对象的容器,可以嵌套使用,并支持层次化的结构。
视图(View):视图是Graphics View框架中用于显示和交互的组件。视图可以显示场景的内容,并根据需要进行缩放、平移和旋转等操作。一个场景可以在多个视图中显示,实现多窗口或多视图的功能。
图形项(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框架提供的坐标系统,可以在不同分辨率和设备上实现图形的适应性显示和交互操作。
下面是一个使用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类,并显示出来。
运行该示例代码,即可看到一个在窗口中飞舞的蝴蝶。可以通过调整定时器的时间间隔和蝴蝶的移动速度来调整动画效果。
下面是一个使用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的网页。
在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窗口。
在Qt中,可以使用QGraphicsItem的相关方法实现图元的旋转、缩放、切变和位移。下面是一些示例代码,演示如何对图元进行这些操作:
// 顺时针旋转30度
rectItem.setRotation(30);
// 水平方向缩小50%,垂直方向放大200%
rectItem.setScale(0.5, 2.0);
// 在水平方向上切变45度
rectItem.setShear(1, 0);
// 将图元水平方向移动100个像素,垂直方向移动50个像素
rectItem.setPos(100, 50);
上述代码中,rectItem是一个QGraphicsRectItem对象,代表一个矩形图元。通过调用该对象的相应方法,可以对图元进行旋转、缩放、切变和位移操作。
在实际使用中,可以根据需要组合使用这些方法,实现更复杂的图元变换效果。