Qt之QGraphicsView图像操作

QGraphicsView图像操作：旋转、放大、缩小、移动、图层切换

1 摘要

GraphicsView框架结构主要包含三个主要的类QGraphicsScene(场景)、QGraphicsView(视图)、QGraphicsItem(图元)。QGraphicsScene本身不可见，是一个存储图元的容器，必须通过与之相连的QGraphicsView视图来显示及与外界进行交互，主要提供图元的操作接口、传递事件和管理各个图元状态，提供无变换的绘制功能(如打印)；QGraphicsView提供一个可视的窗口，用于显示场景中的图元，一个场景中可以有多个视图。QGraphicsItem是场景中各个图元的基础类，QT提供了常用图形图元的标准类，如矩形(QGraphicsRectItem)、椭(QGraphicsEllipseItem)、文本(QGraphicsTextItem)。

2 QGraphicsScene 场景

QGraphicsScene场景是QGraphicsItem对象的容器，主要功能如下：
•提供一个快速的接口，用于管理大量图元。
•向每个图元传递事件
•管理图元的状态，如:选中、焦点处理
•提供未进行坐标转换的渲染功能，主要用于打印

通过函数QGraphicsScene::addItem()可以加入一个图元到场景中。图元可以通过多个函数进行检索：QGraphicsScene::items()及重载函数可以返回和点、矩形、多边形或向量路径相交的所有图元。QGraphicsScene::itemAt()返回指定点的最顶层图元。所有图元查找函数按照递减栈顺序返回图元，第一个返回的图元位置最顶层，最后一个返回的图元位于最底层。
QGraphicsScene的事件传播体系将场景事件发送给图元，同时也管理图元之间的事件传播。如果场景收到了在某一点的鼠标单击事件，场景会把事件传给在这一点的最顶层图元。QGraphicsScene负责管理一些图元的状态，如图元选择和焦点。通过QGraphicsScene::setSeletionArea()函数选择多个图元，选择区域可以是任意的形状，使用 QPainterPath表示；要得到当前选择的图元列表可以使用 QGraphicsScene::selectedItems()函数；QGraphicsScene还管理图元的键盘输入焦点状态，可以通过QGraphicsScene::setFocusItem()函数或者QGraphicsItem::setFoucs()函数来设置图元的焦点；获得当前具有焦点的图元使用函数QGraphicsScene::foucsItem()。可以使用 QGraphicsScene::render()函数在绘图设备上绘制场景。

3 思维导图实现

3.1 实现效果图

•打开图像：通过工具栏的 “Open Image” 按钮选择并加载图像。
•矩形选择框：按下鼠标左键并拖动以绘制矩形选择框，松开鼠标后，位于选择框内的图形项将被选中。
•放大和缩小：使用工具栏的 “Zoom In” 和 “Zoom Out” 按钮进行缩放。
•旋转：通过工具栏的 “Rotate Left” 和 “Rotate Right” 按钮旋转图像
•图层切换：通过不同的图像图层切换显示图像置顶。
在这里插入图片描述

在这里插入图片描述

鼠标滚动放大

void wheelEvent(QGraphicsSceneWheelEvent *event)//鼠标滚轮事件
{if((event->delta() > 0)&&(m_scaleValue >= 100))//最大放大到原始图像的50倍{return;}else if((event->delta() < 0)&&(m_scaleValue <= m_scaleDafault))//图像缩小到自适应大小之后就不继续缩小{ResetItemPos();//重置图片大小和位置，使之自适应控件窗口大小}else{qreal qrealOriginScale = m_scaleValue;if(event->delta() > 0)//鼠标滚轮向前滚动{m_scaleValue*=1.1;//每次放大10%}else{m_scaleValue*=0.9;//每次缩小10%}setScale(m_scaleValue);if(event->delta() > 0){moveBy(-event->pos().x()*qrealOriginScale*0.1, -event->pos().y()*qrealOriginScale*0.1);//使图片缩放的效果看起来像是以鼠标所在点为中心进行缩放的}else{moveBy(event->pos().x()*qrealOriginScale*0.1, event->pos().y()*qrealOriginScale*0.1);//使图片缩放的效果看起来像是以鼠标所在点为中心进行缩放的}}
}

通过滚轮局部放大，放大根据鼠标焦点位置进行局部放大，以湖南为局部中心进行放大，效果如下图
在这里插入图片描述
通过滚轮局部放大，放大根据鼠标焦点位置进行局部放大，以北京为局部中心进行放大，效果如下图

图像旋转实现

void ImageEditor::rotateLeft() {if (!layers.isEmpty()) {QGraphicsPixmapItem *currentLayer = layers[layerSelector->currentIndex()];QPointF center = currentLayer->boundingRect().center();currentLayer->setTransformOriginPoint(center);currentLayer->setRotation(currentLayer->rotation() - 15); // 左旋转 15 度}
}void ImageEditor::rotateRight() {if (!layers.isEmpty()) {QGraphicsPixmapItem *currentLayer = layers[layerSelector->currentIndex()];QPointF center = currentLayer->boundingRect().center();currentLayer->setTransformOriginPoint(center);currentLayer->setRotation(currentLayer->rotation() + 15); // 右旋转 15 度}
}

在这里插入图片描述

图层切换

void ImageEditor::changeLayer(int index) {// 取消所有图层的选中状态for (auto layer : layers)