• 使用QT QGraphicsView图形框架实现画图功能

    QGraphicsView、QGraphicsScene、QGraphicsItem是QT图形框架三个重要元素，通过QGraphicsItem创建图元，但是实际应用中，通常使用继承QGraphicsItem而来的QGraphicsObject。图元添加到QGraphicsScene中可以显示出来或者进行用户交互操作。QGraphicsView的作用是，将Scene中的部分或者全部显示出来，可以拖动或放大缩小，Scene和View的关系如下图所示。

     基本使用流程为：首先创建一个继承QWidget的类，用于盛放和显示View，包括成员：QGridLayout、QGraphicsScene、QGraphicsView。MyGraphicsView是继承自QGraphicsView的自定义View，用于替代QGraphicsView。

    1. #include 
    2. #include 
    3. #include 
    4. #include 
    5. #include 
    6. #include 
    7. #include 
    8. #include 
    9. #include "mygraphicsview.h"
    10. #include "mygraphicsobject.h"
    11.  
    12. class DxfWnd : public QWidget
    13. {
    14.     Q_OBJECT
    15. public:
    16.     explicit DxfWnd(QWidget *parent = nullptr);
    17.  
    18.     void Demo();
    19.     void LoadXYZ(const QString &t_strFile);
    20.  
    21.     MyGraphicsView *m_view;
    22.  
    23. private:
    24.     QGridLayout *layout;
    25.     QGraphicsScene *m_scene;
    26.  
    27.     QList m_listPositionItem;
    28.  
    29. private slots:
    30.     void RecvRatioFromGraphicsView(double, double, double, double);
    31.  
    32. };
    33.  
    34. #endif // DXFWND_H

    构造函数

    1. DxfWnd::DxfWnd(QWidget *parent) : QWidget(parent)
    2. {
    3.     layout = new QGridLayout();
    4.     this->setLayout(layout);
    5.     m_view = new MyGraphicsView(); // 定义一个视图
    6.  
    7.     connect(m_view, &MyGraphicsView::SendRatio2DxfWnd, this, &DxfWnd::RecvRatioFromGraphicsView);
    8.  
    9.     Demo();
    10. }

    在类中定义成员函数，创建图元，创建Scene，创建View，讲图元添加到Scene，将Scene添加到View，将View添加到QLayout中，实现图形的显示。

    1. void DxfWnd::Demo(){
    2.     m_scene = new QGraphicsScene();   // 定义一个场景，设置背景色为白色
    3.     m_scene->setBackgroundBrush(Qt::white);
    4.     QPen pen;   // 定义一个画笔，设置画笔颜色和宽度
    5.     pen.setColor(QColor(0, 160, 230));
    6.     pen.setWidth(1);
    7.  
    8.     QGraphicsRectItem *rectItem = new QGraphicsRectItem();   // 定义一个矩形图元
    9.     rectItem->setRect(476415,3888005, 80, 80);
    10.     rectItem->setPen(pen);
    11.     rectItem->setBrush(QBrush(QColor(255, 0, 255)));
    12.     rectItem->setFlag(QGraphicsItem::ItemIsMovable);
    13.  
    14.     m_scene->addItem(rectItem);
    15.     LoadXYZ("D:/QT_temp/layout_test/data/0.xyz");
    16.  
    17. //    MyGraphicsObject *gi = new MyGraphicsObject();
    18. //    gi->setPos(476415,3888005);
    19. //    gi->SetValue(12.34);
    20. //    m_scene->addItem(gi);
    21.  
    22.  
    23.     m_view->setFixedSize(400, 300);
    24.     m_view->setScene(m_scene);
    25.     m_view->setDragMode(QGraphicsView::RubberBandDrag); //设置view橡皮筋框选区域
    26.  
    27.     layout->addWidget(m_view);
    28. }

    对于大量图元的管理，可以创建一个QVector，MyGraphicsObject是继承自QGraphicsObject的自定义图元（见上一篇博客）。通过QVector对图元进行显示或隐藏的设置，提升View的刷新速度。

    1. void DxfWnd::LoadXYZ(const QString &t_strFile){
    2.     // 读取数据
    3.     QVector vectorPoint;
    4.     QFile file(t_strFile);
    5.     if (file.open(QIODevice::ReadOnly | QIODevice::Text)) {
    6.         QTextStream in(&file);
    7.         while (!in.atEnd()) {
    8.  
    9.             // 读取一行
    10.             QString line = in.readLine();
    11.             QStringList strList = line.split(',');
    12.  
    13.             // to QVector3D
    14.             if(strList.size() == 3) {
    15.                 QVector3D point;
    16.                 point.setX(strList.at(0).toDouble());
    17.                 point.setY(strList.at(1).toDouble());
    18.                 point.setZ(strList.at(2).toDouble());
    19.                 vectorPoint.append(point);
    20.             }
    21.         }
    22.     }
    23.     // Scene中加载
    24.     for(auto const point : vectorPoint) {
    25.         auto pPositionItem = new MyGraphicsObject();
    26.         pPositionItem->setPos(point.x(), point.y());
    27.         pPositionItem->SetValue(point.z());
    28.         m_scene->addItem(pPositionItem);
    29.         m_listPositionItem.append(pPositionItem);
    30.     }
    31. }
    32.  
    33. void DxfWnd::RecvRatioFromGraphicsView(double p0x, double p0y, double p2x, double p2y){
    34.     if(p2x - p0x > 1000 || p2y - p0y > 1000){
    35.         for(int i=0; isize(); i++) {
    36.             if(i % 10 == 0) {
    37.                 m_listPositionItem.at(i)->show();
    38.             }
    39.             else{
    40.                 m_listPositionItem.at(i)->hide();
    41.             }
    42.         }
    43.     }
    44.     else{
    45.         for(int i=0; isize(); i++) {
    46.             m_listPositionItem.at(i)->show();
    47.         }
    48.     }
    49. }

    在实际使用中，通常使用继承QGraphicsView的自定义View，可以进行鼠标操作等用户交互操作的管理。

    1. #ifndef MYGRAPHICSVIEW_H
    2. #define MYGRAPHICSVIEW_H
    3.  
    4. #include 
    5. #include 
    6. #include 
    7. #include 
    8. #include 
    9. #include 
    10. #include 
    11. #include 
    12. #include 
    13.  
    14. enum MODE{selectMode, drawMode, deleteMode};
    15.  
    16. class MyGraphicsView : public QGraphicsView
    17. {
    18.     Q_OBJECT
    19. public:
    20.     MyGraphicsView();
    21.  
    22. private:
    23.     QPointF centerAnchor;
    24.     QPointF posAnchor;
    25.     bool viewMove = false;
    26.     double m_scaleValue = 1;
    27.     MODE mode = selectMode;
    28.  
    29.     QGraphicsItem *selectedItem = nullptr;
    30.  
    31.     void GetScale();
    32.  
    33.     QVector point2LineCache;
    34.  
    35. public slots:
    36.     void slot_rotateLeft();// { rotate(-30); }
    37.     void slot_rotateRight();// { rotate(30); }
    38.     void slot_reset();
    39.     void ActiveDrawLine();
    40.     void CancelDrawLine();
    41.     void DeleteItem();
    42.     void StopDeleteMode();
    43.  
    44. protected:
    45.     virtual void mousePressEvent(QMouseEvent *event);
    46.     virtual void mouseReleaseEvent(QMouseEvent *event);
    47.     virtual void wheelEvent(QWheelEvent *event);
    48.     virtual void mouseMoveEvent(QMouseEvent *event);
    49.     void view_zoomIn();//  { scale(1.2, 1.2); }
    50.     void veiw_zoomOut();// { scale(1/1.2, 1/1.2); }
    51.  
    52. signals:
    53.     void SendRatio2DxfWnd(double, double, double, double);
    54. };
    55.  
    56. #endif // MYGRAPHICSVIEW_H

    mousePressEvent定义了鼠标点击操作

    1. void MyGraphicsView::mousePressEvent(QMouseEvent *event)
    2. {
    3.     if( event->button() == Qt::RightButton)
    4.     {
    5.         QMenu *mouseLeftMenu = new QMenu(this);
    6.         QAction* rotateLeft = new QAction(tr("rotateLeft"), this);
    7.         QAction* rotateRight = new QAction(tr("rotateRight"), this);
    8.         QAction* draw = new QAction(tr("drawLine"), this);
    9.         QAction* cancel = new QAction(tr("stopDrawLine"), this);
    10.         QAction* zoomReset = new QAction(tr("zoomReset"), this);
    11.         QAction* deleteItem = new QAction(tr("delete"), this);
    12.         QAction* cancelDeleteMode = new QAction(tr("stopDelete"), this);
    13.  
    14.         mouseLeftMenu->addAction(zoomReset);
    15. //        mouseLeftMenu->addAction(rotateLeft);
    16. //        mouseLeftMenu->addAction(rotateRight);
    17.         if (mode == selectMode){
    18.             mouseLeftMenu->addAction(draw);
    19.             mouseLeftMenu->addAction(deleteItem);
    20.         }
    21.         else if(mode == drawMode){
    22.             mouseLeftMenu->addAction(cancel);
    23.         }
    24. //        mouseLeftMenu->addAction(zoomOut);
    25.         else if (mode == deleteMode){
    26.             mouseLeftMenu->addAction(cancelDeleteMode);
    27.         }
    28.  
    29.         mouseLeftMenu->move(cursor().pos());
    30.         mouseLeftMenu->show();
    31.  
    32.         connect(rotateLeft, SIGNAL(triggered()), this, SLOT(slot_rotateLeft()));
    33.         connect(rotateRight, SIGNAL(triggered()), this, SLOT(slot_rotateRight()));
    34.         connect(draw, SIGNAL(triggered()), this, SLOT(ActiveDrawLine()));
    35.         connect(cancel, SIGNAL(triggered()), this, SLOT(CancelDrawLine()));
    36.         connect(zoomReset, SIGNAL(triggered()), this, SLOT(slot_reset()));
    37.         connect(deleteItem, SIGNAL(triggered()), this, SLOT(DeleteItem()));
    38.         connect(cancelDeleteMode, SIGNAL(triggered()), this, SLOT(StopDeleteMode()));
    39.     }
    40.     else if(event->button() == Qt::MiddleButton)
    41.     {
    42.         mode = selectMode;
    43.         viewMove = true;
    44.         GetScale();
    45. //        centerAnchor = mapToScene(event->pos()) - event->pos() + QPointF(width() / 2, height() / 2);
    46.         centerAnchor = mapToScene(QPoint(width() / 2, height() / 2));
    47.         posAnchor = event->pos();
    48.     }
    49.     else if(event->button() == Qt::LeftButton){
    50.         if(mode == drawMode){
    51.             point2LineCache.append(mapToScene(event->pos()));
    52.             if (point2LineCache.size() == 2){
    53.                 QLineF *line = new QLineF(point2LineCache[0], point2LineCache[1]);
    54.                 scene()->addLine(*line);
    55.                 point2LineCache.pop_front();
    56.  
    57.                 scene()->update();
    58.             }
    59.         }
    60.         else{
    61.             QGraphicsItem *selectedItem = this->itemAt(event->pos());
    62.             if(selectedItem){
    63.                 scene()->removeItem(selectedItem);
    64.             }
    65.         }
    66.     }
    67. }

    点击右键，会弹出菜单

    点击左键，进行画线、删除等操作。

    点击滚轮，进行View显示范围的移动（配合mouseMoveEvent实现View拖动）。

     

    centerAnchor = mapToScene(QPoint(width() / 2, height() / 2));

    该语句功能是得到画面中心在Scene中的坐标。

    posAnchor = event->pos();

    是获取鼠标在View中的坐标（注意存在Scene坐标系和View坐标系两个坐标系，View坐标系是像素距离坐标系，Scene坐标系是图元所在的实际坐标系）。

    1. void MyGraphicsView::mouseMoveEvent(QMouseEvent *event){
    2.     if(viewMove){
    3.         QPointF offsetPos = event->pos() - posAnchor;
    4. //        setTransformationAnchor(QGraphicsView::AnchorUnderMouse);
    5.         GetScale();
    6.         centerOn(centerAnchor - offsetPos * m_scaleValue);
    7.     }
    8. }

    在mouseMoveEvent中，得到鼠标移动后的位置，计算鼠标移动了多少距离，乘画面比例（即1像素距离等于多少实际距离），得到View的中心应该移动多少实际距离。

    centerOn(centerAnchor - offsetPos * m_scaleValue);

    该函数是将View的中心放置在一个新的Scene点上，即实现了可视范围的拖动。

    wheelEvent实现放大缩小

    1. void MyGraphicsView::wheelEvent(QWheelEvent *event){
    2.     auto test = this->mapToScene( this->viewport()->geometry() );
    3.     double p0x = test[0].x();
    4.     double p0y = test[0].y();
    5.     double p2x = test[2].x();
    6.     double p2y = test[2].y();
    7.  
    8.     if(event->delta() > 0){                    // 当滚轮远离使用者时
    9.         view_zoomIn();                // 进行放大
    10.     }else{                                     // 当滚轮向使用者方向旋转时
    11.         veiw_zoomOut();               // 进行缩小
    12.     }
    13.  
    14.     emit SendRatio2DxfWnd(p0x, p0y, p2x, p2y);
    15. }
    16.  
    17. void MyGraphicsView::view_zoomIn()
    18. {
    19.     this->scale(1.2, 1.2);
    20. }
    21. void MyGraphicsView::veiw_zoomOut()
    22. {
    23.     this->scale(1/1.2, 1/1.2);
    24. }

    计算1像素距离代表多少实际距离，通过如下函数实现。

    1. void MyGraphicsView::GetScale(){
    2.     auto test = this->mapToScene( this->viewport()->geometry() );
    3.     double p0x = test[0].x();
    4.     double p2x = test[2].x();
    5.  
    6.     m_scaleValue = (p2x - p0x) / this->width();
    7. }

    mapToScene函数得到View四个角点在Scene坐标系中的实际坐标，width（）函数获取View的像素宽度。

    自定义View全部成员函数如下

    1. #include "mygraphicsview.h"
    2.  
    3. MyGraphicsView::MyGraphicsView()
    4. {
    5.     setMouseTracking(true);
    6. }
    7.  
    8. void MyGraphicsView::mousePressEvent(QMouseEvent *event)
    9. {
    10.     if( event->button() == Qt::RightButton)
    11.     {
    12.         QMenu *mouseLeftMenu = new QMenu(this);
    13.         QAction* rotateLeft = new QAction(tr("rotateLeft"), this);
    14.         QAction* rotateRight = new QAction(tr("rotateRight"), this);
    15.         QAction* draw = new QAction(tr("drawLine"), this);
    16.         QAction* cancel = new QAction(tr("stopDrawLine"), this);
    17.         QAction* zoomReset = new QAction(tr("zoomReset"), this);
    18.         QAction* deleteItem = new QAction(tr("delete"), this);
    19.         QAction* cancelDeleteMode = new QAction(tr("stopDelete"), this);
    20.  
    21.         mouseLeftMenu->addAction(zoomReset);
    22. //        mouseLeftMenu->addAction(rotateLeft);
    23. //        mouseLeftMenu->addAction(rotateRight);
    24.         if (mode == selectMode){
    25.             mouseLeftMenu->addAction(draw);
    26.             mouseLeftMenu->addAction(deleteItem);
    27.         }
    28.         else if(mode == drawMode){
    29.             mouseLeftMenu->addAction(cancel);
    30.         }
    31. //        mouseLeftMenu->addAction(zoomOut);
    32.         else if (mode == deleteMode){
    33.             mouseLeftMenu->addAction(cancelDeleteMode);
    34.         }
    35.  
    36.         mouseLeftMenu->move(cursor().pos());
    37.         mouseLeftMenu->show();
    38.  
    39.         connect(rotateLeft, SIGNAL(triggered()), this, SLOT(slot_rotateLeft()));
    40.         connect(rotateRight, SIGNAL(triggered()), this, SLOT(slot_rotateRight()));
    41.         connect(draw, SIGNAL(triggered()), this, SLOT(ActiveDrawLine()));
    42.         connect(cancel, SIGNAL(triggered()), this, SLOT(CancelDrawLine()));
    43.         connect(zoomReset, SIGNAL(triggered()), this, SLOT(slot_reset()));
    44.         connect(deleteItem, SIGNAL(triggered()), this, SLOT(DeleteItem()));
    45.         connect(cancelDeleteMode, SIGNAL(triggered()), this, SLOT(StopDeleteMode()));
    46.     }
    47.     else if(event->button() == Qt::MiddleButton)
    48.     {
    49.         mode = selectMode;
    50.         viewMove = true;
    51.         GetScale();
    52. //        centerAnchor = mapToScene(event->pos()) - event->pos() + QPointF(width() / 2, height() / 2);
    53.         centerAnchor = mapToScene(QPoint(width() / 2, height() / 2));
    54.         posAnchor = event->pos();
    55.     }
    56.     else if(event->button() == Qt::LeftButton){
    57.         if(mode == drawMode){
    58.             point2LineCache.append(mapToScene(event->pos()));
    59.             if (point2LineCache.size() == 2){
    60.                 QLineF *line = new QLineF(point2LineCache[0], point2LineCache[1]);
    61.                 scene()->addLine(*line);
    62.                 point2LineCache.pop_front();
    63.  
    64.                 scene()->update();
    65.             }
    66.         }
    67.         else{
    68.             QGraphicsItem *selectedItem = this->itemAt(event->pos());
    69.             if(selectedItem){
    70.                 scene()->removeItem(selectedItem);
    71.             }
    72.         }
    73.     }
    74. }
    75.  
    76. void MyGraphicsView::mouseMoveEvent(QMouseEvent *event){
    77.     if(viewMove){
    78.         QPointF offsetPos = event->pos() - posAnchor;
    79. //        setTransformationAnchor(QGraphicsView::AnchorUnderMouse);
    80.         GetScale();
    81.         centerOn(centerAnchor - offsetPos * m_scaleValue);
    82.     }
    83. }
    84.  
    85. void MyGraphicsView::mouseReleaseEvent(QMouseEvent *event){
    86.     viewMove = false;
    87. }
    88.  
    89. void MyGraphicsView::wheelEvent(QWheelEvent *event){
    90.     auto test = this->mapToScene( this->viewport()->geometry() );
    91.     double p0x = test[0].x();
    92.     double p0y = test[0].y();
    93.     double p2x = test[2].x();
    94.     double p2y = test[2].y();
    95.  
    96.     if(event->delta() > 0){                    // 当滚轮远离使用者时
    97.         view_zoomIn();                // 进行放大
    98.     }else{                                     // 当滚轮向使用者方向旋转时
    99.         veiw_zoomOut();               // 进行缩小
    100.     }
    101.  
    102.     emit SendRatio2DxfWnd(p0x, p0y, p2x, p2y);
    103. }
    104.  
    105. void MyGraphicsView::GetScale(){
    106.     auto test = this->mapToScene( this->viewport()->geometry() );
    107.     double p0x = test[0].x();
    108.     double p2x = test[2].x();
    109.  
    110.     m_scaleValue = (p2x - p0x) / this->width();
    111. }
    112.  
    113. void MyGraphicsView::view_zoomIn()
    114. {
    115.     this->scale(1.2, 1.2);
    116. }
    117. void MyGraphicsView::veiw_zoomOut()
    118. {
    119.     this->scale(1/1.2, 1/1.2);
    120. }
    121. void MyGraphicsView::slot_rotateLeft()
    122. {
    123.     this->rotate(-30);
    124. }
    125. void MyGraphicsView::slot_rotateRight()
    126. {
    127.     this->rotate(30);
    128. }
    129. void MyGraphicsView::slot_reset()
    130. {
    131.     QRectF rectItem = scene()->itemsBoundingRect();
    132.     QRectF rectView = this->rect();
    133.     qreal ratioView = rectView.height() / rectView.width();
    134.     qreal ratioItem = rectItem.height() / rectItem.width();
    135.     if (ratioView > ratioItem)
    136.     {
    137.         rectItem.moveTop(rectItem.width()*ratioView - rectItem.height());
    138.         rectItem.setHeight(rectItem.width()*ratioView);
    139.  
    140.         rectItem.setWidth(rectItem.width() * 1.2);
    141.         rectItem.setHeight(rectItem.height() * 1.2);
    142.     }
    143.     else
    144.     {
    145.         rectItem.moveLeft(rectItem.height()/ratioView - rectItem.width());
    146.         rectItem.setWidth(rectItem.height()/ratioView);
    147.  
    148.         rectItem.setWidth(rectItem.width() * 1.2);
    149.         rectItem.setHeight(rectItem.height() * 1.2);
    150.     }
    151.  
    152.     this->fitInView(rectItem, Qt::KeepAspectRatio);
    153. }
    154. void MyGraphicsView::ActiveDrawLine(){
    155.     mode = drawMode;
    156. }
    157. void MyGraphicsView::CancelDrawLine(){
    158.     mode = selectMode;
    159.     point2LineCache.clear();
    160. }
    161. void MyGraphicsView::DeleteItem(){
    162.     mode = deleteMode;
    163. }
    164. void MyGraphicsView::StopDeleteMode(){
    165.     mode = selectMode;
    166. }

    利用一个结构体

    enum MODE{selectMode, drawMode, deleteMode};

    来表示当前鼠标是什么状态。

  • 相关阅读:
    npm安装vuecli出错的处理方法
    git push报错解决
    说说 React 性能优化的手段有哪些？
    机器学习（三）多项式回归
    条码二维码读取设备在医疗设备自助服务的重要性
    分析 java.util.LinkedHashMap
    【动手学深度学习】学习笔记
    一文深入springboot，springboot的实战实践文档（PDF）
    Openssl数据安全传输平台019：外联接口类的封装以及动态库的制作 - Bug未解决，感觉不是代码的问题
    Spring事务源码解读
  • 原文地址：https://blog.csdn.net/qq_41816368/article/details/127118311