交互式 QGraphicsView（平移/缩放/旋转）

最新推荐文章于 2024-08-20 00:02:02 发布
最新推荐文章于 2024-08-20 00:02:02 发布
阅读量6.2k 收藏 28
点赞数 4
分类专栏： HTML5

简述
Graphics View提供了一个平台，用于大量自定义 2D 图元的管理与交互，框架包括一个事件传播架构，支持场景 Scene 中的图元 Item 进行精确的双精度交互功能。Item 可以处理键盘事件、鼠标按下、移动、释放和双击事件，同时也能跟踪鼠标移动。

和 Google 地图一样，在管理大量 Item 的时候，通常需要 View 具有交互（平移/缩放/旋转）功能。

| 版权声明：一去、二三里，未经博主允许不得转载。

交互式 QGraphicsView
便于以后复用，实现一个交互式 QGraphicsView - InteractiveView。

主要功能包括：

平移： 
方式一：鼠标左键按下，然后移动
方式二：按下上/下/左/右键分别向各个方向移动
缩放： 
方式一：鼠标滚轮向上滚动放大，向下滚动缩小
方式二：按加号键（带 Shift）进行放大，按减号键缩小
旋转：按空格键逆时针旋转，回车键顺时针旋转
效果


源码
interactive_view.h

#ifndef INTERACTIVE_VIEW_H
#define INTERACTIVE_VIEW_H

#include <QGraphicsView>

class QWheelEvent;
class QKeyEvent;

class InteractiveView : public QGraphicsView
{
    Q_OBJECT
public:
    explicit InteractiveView(QWidget *parent = 0);

    // 平移速度
    void setTranslateSpeed(qreal speed);
    qreal translateSpeed() const;

    // 缩放的增量
    void setZoomDelta(qreal delta);
    qreal zoomDelta() const;

protected:
    // 上/下/左/右键向各个方向移动、加/减键进行缩放、空格/回车键旋转
    void keyPressEvent(QKeyEvent *event) Q_DECL_OVERRIDE;
    // 平移
    void mouseMoveEvent(QMouseEvent *event) Q_DECL_OVERRIDE;
    void mousePressEvent(QMouseEvent *event) Q_DECL_OVERRIDE;
    void mouseReleaseEvent(QMouseEvent *event) Q_DECL_OVERRIDE;
    // 放大/缩小
    void wheelEvent(QWheelEvent *event) Q_DECL_OVERRIDE;

public Q_SLOTS:
    void zoomIn();  // 放大
    void zoomOut();  // 缩小
    void zoom(float scaleFactor); // 缩放 - scaleFactor：缩放的比例因子
    void translate(QPointF delta);  // 平移

private:
    Qt::MouseButton m_translateButton;  // 平移按钮
    qreal m_translateSpeed;  // 平移速度
    qreal m_zoomDelta;  // 缩放的增量
    bool m_bMouseTranslate;  // 平移标识
    QPoint m_lastMousePos;  // 鼠标最后按下的位置
    qreal m_scale;  // 缩放值
};

#endif // INTERACTIVE_VIEW_H
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
平移速度默认为 1.0，可以使用 setTranslateSpeed() 来改变。缩放的增量大小也可以使用 setZoomDelta() 改变。

interactive_view.cpp

#include <QWheelEvent>
#include <QKeyEvent>
#include "interactive_view.h"

#define VIEW_CENTER viewport()->rect().center()
#define VIEW_WIDTH  viewport()->rect().width()
#define VIEW_HEIGHT viewport()->rect().height()

InteractiveView::InteractiveView(QWidget *parent)
    : QGraphicsView(parent),
      m_translateButton(Qt::LeftButton),
      m_scale(1.0),
      m_zoomDelta(0.1),
      m_translateSpeed(1.0),
      m_bMouseTranslate(false)
{
    // 去掉滚动条
    setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
    setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
    setCursor(Qt::PointingHandCursor);
    setRenderHint(QPainter::Antialiasing);

    setSceneRect(INT_MIN/2, INT_MIN/2, INT_MAX, INT_MAX);
    centerOn(0, 0);
}

// 平移速度
void InteractiveView::setTranslateSpeed(qreal speed)
{
    // 建议速度范围
    Q_ASSERT_X(speed >= 0.0 && speed <= 2.0,
               "InteractiveView::setTranslateSpeed", "Speed should be in range [0.0, 2.0].");
    m_translateSpeed = speed;
}

qreal InteractiveView::translateSpeed() const
{
    return m_translateSpeed;
}

// 缩放的增量
void InteractiveView::setZoomDelta(qreal delta)
{
    // 建议增量范围
    Q_ASSERT_X(delta >= 0.0 && delta <= 1.0,
               "InteractiveView::setZoomDelta", "Delta should be in range [0.0, 1.0].");
    m_zoomDelta = delta;
}

qreal InteractiveView::zoomDelta() const
{
    return m_zoomDelta;
}

// 上/下/左/右键向各个方向移动、加/减键进行缩放、空格/回车键旋转
void InteractiveView::keyPressEvent(QKeyEvent *event)
{
    switch (event->key()) {
    case Qt::Key_Up:
        translate(QPointF(0, -2));  // 上移
        break;
    case Qt::Key_Down:
        translate(QPointF(0, 2));  // 下移
        break;
    case Qt::Key_Left:
        translate(QPointF(-2, 0));  // 左移
        break;
    case Qt::Key_Right:
        translate(QPointF(2, 0));  // 右移
        break;
    case Qt::Key_Plus:  // 放大
        zoomIn();
        break;
    case Qt::Key_Minus:  // 缩小
        zoomOut();
        break;
    case Qt::Key_Space:  // 逆时针旋转
        rotate(-5);
        break;
    case Qt::Key_Enter:  // 顺时针旋转
    case Qt::Key_Return:
        rotate(5);
        break;
    default:
        QGraphicsView::keyPressEvent(event);
    }
}

// 平移
void InteractiveView::mouseMoveEvent(QMouseEvent *event)
{
    if (m_bMouseTranslate){
        QPointF mouseDelta = mapToScene(event->pos()) - mapToScene(m_lastMousePos);
        translate(mouseDelta);
    }

    m_lastMousePos = event->pos();

    QGraphicsView::mouseMoveEvent(event);
}

void InteractiveView::mousePressEvent(QMouseEvent *event)
{
    if (event->button() == m_translateButton) {
        // 当光标底下没有 item 时，才能移动
        QPointF point = mapToScene(event->pos());
        if (scene()->itemAt(point, transform()) == NULL)  {
            m_bMouseTranslate = true;
            m_lastMousePos = event->pos();
        }
    }

    QGraphicsView::mousePressEvent(event);
}

void InteractiveView::mouseReleaseEvent(QMouseEvent *event)
{
    if (event->button() == m_translateButton)
        m_bMouseTranslate = false;

    QGraphicsView::mouseReleaseEvent(event);
}

// 放大/缩小
void InteractiveView::wheelEvent(QWheelEvent *event)
{
    // 滚轮的滚动量
    QPoint scrollAmount = event->angleDelta();
    // 正值表示滚轮远离使用者（放大），负值表示朝向使用者（缩小）
    scrollAmount.y() > 0 ? zoomIn() : zoomOut();
}

// 放大
void InteractiveView::zoomIn()
{
    zoom(1 + m_zoomDelta);
}

// 缩小
void InteractiveView::zoomOut()
{
    zoom(1 - m_zoomDelta);
}

// 缩放 - scaleFactor：缩放的比例因子
void InteractiveView::zoom(float scaleFactor)
{
    // 防止过小或过大
    qreal factor = transform().scale(scaleFactor, scaleFactor).mapRect(QRectF(0, 0, 1, 1)).width();
    if (factor < 0.07 || factor > 100)
        return;

    scale(scaleFactor, scaleFactor);
    m_scale *= scaleFactor;
}

// 平移
void InteractiveView::translate(QPointF delta)
{
    // 根据当前 zoom 缩放平移数
    delta *= m_scale;
    delta *= m_translateSpeed;

    // view 根据鼠标下的点作为锚点来定位 scene
    setTransformationAnchor(QGraphicsView::AnchorUnderMouse);
    QPoint newCenter(VIEW_WIDTH / 2 - delta.x(),  VIEW_HEIGHT / 2 - delta.y());
    centerOn(mapToScene(newCenter));

    // scene 在 view 的中心点作为锚点
    setTransformationAnchor(QGraphicsView::AnchorViewCenter);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
这里，主要重写了键盘及鼠标事件，具体说明请参考注释！
--------------------- 
作者：一去丶二三里 
来源：CSDN 
原文：https://blog.csdn.net/liang19890820/article/details/53543017 
版权声明：本文为博主原创文章，转载请附上博文链接！

 

https://blog.csdn.net/liang19890820/article/details/53543017

wishfly
关注
专栏目录
qgraphicsview鼠标移动图片_交互式QGraphicsView（平移/缩放/旋转）-阿里云开发者社区...
weixin_39955351的博客
12-19 587
简述Graphics View提供了一个平台用于大量自定义 2D 图元的管理与交互框架包括一个事件传播架构支持场景 Scene 中的图元 Item 进行精确的双精度交互功能。Item 可以处理键盘事件、鼠标按下、移动、释放和双击事件同时也能跟踪鼠标移动。和 Google 地图一样在管理大量 Item 的时候通常需要 View 具有交互平移/缩放/旋转功能。交互式 QGraphicsView便于以后...
QGraphicsView以鼠标点实现放大缩小、拖拽
12-22
实现图像的缩小、放大、拖拽功能
QGraphicsView（平移/缩放/旋转）
10-16
qt5工程，实现类似于图片浏览器功能，QGraphicsView（平移/缩放/旋转）；参考某大神的做法；
Qt中的QGraphicsView、QGraphicsScene与QGraphicsItem：图形视图框架介绍
最新发布
m0_66847953的博客
08-20 939
Qt中的QGraphicsView、QGraphicsScene与QGraphicsItem：图形视图框架介绍
交互式QGraphicsView（平移/缩放/旋转）
tianyu的专栏 - Linux site:blog.csdn.net/wishfly
08-31 877
Graphics View提供了一个平台，用于大量自定义 2D 图元的管理与交互，框架包括一个事件传播架构，支持场景 Scene 中的图元 Item 进行精确的双精度交互功能。Item 可以处理键盘事件、鼠标按下、移动、释放和双击事件，同时也能跟踪鼠标移动。 和 Google 地图一样，在管理大量 Item 的时候，通常需要 View 具有交互（平移/缩放/旋转）功能。
Qt的QGraphicsView框架
friendbaby的专栏
10-11 5074
Graphics View提供了一个界面，它既可以管理大数量的定制2D graphical items，又可与它们交互，有一个view widget可以把这些项绘制出来，并支持旋转与缩放。这个柜架也包含一个事件传播结构，对于在scene中的这些items,它具有双精度的交互能力。
QGraphicsView实现图片放大、缩小、鼠标拖动、以鼠标点放大缩小
qq_35662333的博客
03-25 2575
【代码】QGraphicsView实现图片放大、缩小、鼠标拖动、以鼠标点放大缩小。
QGraphicsItem、QGraphicsView、QGraphicsScene封装
04-02
- **缩放与平移**：QGraphicsView支持缩放和平移操作，用户可以通过设置缩放因子和调整视口来改变视图。 - **渲染优化**：通过启用缓存和视口更新策略，可以优化性能，尤其是在处理大量图形元素时。 - **自定义...
QGraphicsView.7z
07-16
QGraphicsView允许开发者实现高度定制的交互式图形界面，广泛应用于地图应用、图表绘制、游戏开发等领域。 QGraphicsView的工作原理是通过将图形元素表示为QGraphicsItem对象，并将它们添加到QGraphicsScene中。每...
QGraphicsView框架下，图元的操作（缩放，平移，旋转）
热门推荐
EddyXie的博客
06-12 1万+
关于QGraphicsView框架的结构和技术细节，就不多做介绍了，向大家推荐两篇博客，有兴趣的可以自己看一下： https://blog.csdn.net/abcvincent/article/details/71773700 https://blog.51cto.com/9291927/1879128 这里我们讲一下QGraphicsView框架下，图元的操作 QGraphicsVie...
实现qt QGraphicsView放大缩小功能的类
08-04
实现qt QGraphicsView放大缩小功能的类，不用继承QGraphicsView，只需要在该类中设置要实现放大缩小的QGraphicsView对象即可。
Qt绘图 QGraphicsView
07-06
使用 QGraphicsView、QGraphicsScene、QGraphicsItem进行简单的缩放，移动，旋转
QGraphicsView的缩放
yuchunhai321的博客
08-21 4513
方法一： 不带ui界面 因为要实现一个功能是，拖动view所在的窗口，可以显示scene中所有的信息，在网上找了很多资料，都是在缩放后通过scrollView进行拖动的，但是这个拖动是有问题的，只是拖动对应的scrollView中的数据，这不是我要进行拖动可以看到出来viewport中的数据，还包括很多无法显示的scene的其他部分 代码如下： .h #ifndef MAINWINDOW...
QGraphicsView（缩放，平移，旋转）
qq_42816652的博客
04-10 341
东西不多直接上代码，一共一个类两函数，两函数还有一个是构造。
QGraphicsView实现局部缩放，平移，并且能进行选中数据
家俊的博客
07-20 1744
前一段时间项目上有个小功能，是加载大批量数据，并且进行绘图显示。以前使用的方法是使用opnegl来进行渲染，效果是有的，但是怎么说呢。总觉得有点大材小用。opengl渲染时，是使用显卡的，不排除有些机器没有显卡。那可能程序就会奔溃。 最新的使用方法是使用graphicview结合paintevent进行绘制图像。 这是绘制图像的代码，通过从文件中读取数据。 qreal scaleFactor = this->matrix().m11(); sence->clear(); QIma
Qt 之 QGraphicsView 放大缩小
云胡
11-22 4610
一、概述 实现通过鼠标滚轮来对 QGraphicsView 视图进行放大和缩小。 二、步骤 新建一个类继承 QGraphicsView，重写 wheelEvent 鼠标滚轮事件。 头文件引入 #include <QWheelEvent> 三、代码 void GraphicsView::wheelEvent(QWheelEvent *event) { // 获取鼠标滚轮的距离 int wheelDeltaValue = event->delta(); // 向
Qt绘图之QGraphicsScene QGraphicsView QGraphicsItem详解
weixin_30471561的博客
09-16 1709
Graphics View提供了一个界面，它既可以管理大数量的定制2D graphical items，又可与它们交互，有一个view widget可以把这些项绘制出来，并支持旋转与缩放。这个柜架也包含一个事件传播结构，对于在scene中的这些items,它具有双精度的交互能力。Items能处理键盘事件，鼠标的按，移动、释放、双击事件，也可以跟踪鼠标移动。Graphics View使用BSP树来提...
qgraphicsview控件
01-30
QGraphicsView是Qt框架中用于显示QGraphicsScene中图形项的控件。通过QGraphicsView，用户可以方便地查看和交互QGraphicsScene中的元素。QGraphicsView具有强大的功能，可以进行平移、缩放和旋转等操作，并且可以接收鼠标和键盘事件来对QGraphicsScene进行操作。 在使用QGraphicsView时，可以通过设置视图的属性来调整显示效果，比如网格、对齐线等。而且QGraphicsView是支持双缓冲的，可以避免闪烁的问题，显示效果更加平滑。 使用QGraphicsView可以实现很多图形化的功能，比如绘制各种图形、动画、交互式界面等。它还可以和其他控件结合起来，比如和QScrollBar一起实现滚动效果、和QGraphicsScene一起实现图形项的显示等。 QGraphicsView可以广泛应用在各种需要图形化显示的场景中，比如绘图软件、地图软件、图表展示等。它的强大功能和灵活性使得开发者可以轻松实现各种复杂的图形化需求。 总之，QGraphicsView是一个功能强大、灵活多样的控件，在Qt框架中扮演着重要的角色，为开发者提供了方便的图形化显示和交互操作的解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值