图片展示控件QGraphicsView、QGraphicsScene、QGraphicsItem的使用Demo

简介

/*
 * 图片展示控件
 * Graphics View Framework的使用Demo
 * QGraphicsView、QGraphicsScene、QGraphicsItem的使用Demo
 * 支持图片的旋转与缩放，自动缩放至接触边框
*/

效果展示

坐标系示意图

Graphics View Framework的使用需要特别注意QGraphicsView、QGraphicsScene、QGraphicsItem的坐标系及其转换方法，下图为本程序的示意图。

黑色表示视图View的坐标系

蓝色表示场景scene的坐标系

紫色表示图元Item的坐标系

源码

pictureDisplayWidget.h

/** 图片展示控件* Graphics View Framework的使用Demo* QGraphicsView、QGraphicsScene、QGraphicsItem的使用Demo* 支持图片的旋转与缩放，自动缩放至接触边框
*/#pragma once
#include <QWidget>class QGraphicsScene;
class QGraphicsView;
class QGraphicsTextItem;
class QGraphicsPixmapItem;
class QGraphicsRectItem;
class QGraphicsLineItem;
class QSlider;
class QPushButton;
class PictureDisplayWidget : public QWidget
{Q_OBJECTpublic:explicit PictureDisplayWidget(QWidget *parent = nullptr);~PictureDisplayWidget();public slots:void slot_SliderValueChanged(int value);void slot_btnClicked(bool checked = false);private:void showInfo();void setImage(const QString& strImagesPath);void shrinkImageSizeToInsideFramRect(const std::function<void (void)>& op);void enlargeImageSizeToInsideFramRect();private:QGraphicsView* m_view;QGraphicsScene* m_scene;QGraphicsTextItem* m_infoTextItem;QGraphicsRectItem* m_framRectItem;QList<QGraphicsLineItem*> m_framLineList;QGraphicsPixmapItem* m_pixmapItem;QSlider* m_rotateSlider;QSlider* m_imageSizeSlider;QPushButton* m_btn1;QPushButton* m_btn2;QPushButton* m_btn3;QPushButton* m_btn4;
};

pictureDisplayWidget.cpp

#include "pictureDisplayWidget.h"
#include <QGraphicsItem>
#include <QGraphicsScene>
#include <QGraphicsView>
#include <QSlider>
#include <QDebug>
#include <QScrollBar>
#include <QPushButton>
#include <QVBoxLayout>static qreal sliderValueToPixmapScale(int value)
{return value*0.02;
}
static int pixmapScaleToSliderValue(qreal scale)
{return scale/0.02;
}PictureDisplayWidget::PictureDisplayWidget(QWidget *parent): QWidget(parent)
{setWindowTitle("Graphics View Framework的使用Demo");QVBoxLayout* verticalLayout = new QVBoxLayout(this);//创建场景m_scene = new QGraphicsScene;QRectF sceneRect(-200, -200, 400, 400);m_scene->setSceneRect(sceneRect); //设置view显示的场景框//添加左上角文本图元m_infoTextItem = m_scene->addText("", QFont("Times", 12, QFont::Bold));m_infoTextItem->setDefaultTextColor(Qt::yellow);m_infoTextItem->setPos(-200, -200); //设置文本图元位于场景框左上角，该坐标是场景坐标系的坐标m_infoTextItem->setZValue(5); //设置z轴值，使得图元在最上层//添加场景矩形边框图元，用于图片缩小时的碰撞检测m_framRectItem = m_scene->addRect(sceneRect, QPen(Qt::red, 1));//添加场景矩形边框的四条边线图元，用于图片放大时的碰撞检测QPen framLinePen(Qt::blue, 1);//int gap = 1;//QRectF framLineRect = sceneRect.adjusted(gap, gap, -gap, -gap);QRectF framLineRect(sceneRect);m_framLineList.append(m_scene->addLine(QLineF(framLineRect.topLeft(), framLineRect.topRight()), framLinePen));m_framLineList.append(m_scene->addLine(QLineF(framLineRect.topRight(), framLineRect.bottomRight()), framLinePen));m_framLineList.append(m_scene->addLine(QLineF(framLineRect.bottomRight(), framLineRect.bottomLeft()), framLinePen));m_framLineList.append(m_scene->addLine(QLineF(framLineRect.bottomLeft(), framLineRect.topLeft()), framLinePen));//添加图片图元m_pixmapItem = m_scene->addPixmap(QPixmap());//创建视图m_view = new QGraphicsView(m_scene, this);m_view->setMinimumSize(m_scene->sceneRect().width() + m_view->verticalScrollBar()->width(),m_scene->sceneRect().height() + m_view->horizontalScrollBar()->height());m_view->setBackgroundBrush(QBrush(Qt::gray));m_view->show();verticalLayout->addWidget(m_view);//添加图片旋转角度条m_rotateSlider = new QSlider(Qt::Horizontal, this);m_rotateSlider->setTickInterval(1);m_rotateSlider->setMinimum(0);m_rotateSlider->setMaximum(360);m_rotateSlider->setTickPosition(QSlider::TicksBelow);verticalLayout->addWidget(m_rotateSlider);connect(m_rotateSlider, &QSlider::valueChanged, this, &PictureDisplayWidget::slot_SliderValueChanged);//添加图片缩放条m_imageSizeSlider = new QSlider(Qt::Horizontal, this);//m_imageSizeSlider->setTickInterval(1);m_imageSizeSlider->setMinimum(30);m_imageSizeSlider->setMaximum(70);m_imageSizeSlider->setValue(50);m_imageSizeSlider->setTickPosition(QSlider::TicksBelow);verticalLayout->addWidget(m_imageSizeSlider);connect(m_imageSizeSlider, &QSlider::valueChanged, this, &PictureDisplayWidget::slot_SliderValueChanged);//添加按钮m_btn1 = new QPushButton("1", this);m_btn2 = new QPushButton("2", this);m_btn3 = new QPushButton("3", this);m_btn4 = new QPushButton("4", this);verticalLayout->addWidget(m_btn1);verticalLayout->addWidget(m_btn2);verticalLayout->addWidget(m_btn3);verticalLayout->addWidget(m_btn4);connect(m_btn1, &QPushButton::clicked, this, &PictureDisplayWidget::slot_btnClicked);connect(m_btn2, &QPushButton::clicked, this, &PictureDisplayWidget::slot_btnClicked);connect(m_btn3, &QPushButton::clicked, this, &PictureDisplayWidget::slot_btnClicked);connect(m_btn4, &QPushButton::clicked, this, &PictureDisplayWidget::slot_btnClicked);//初始化setImage(":/images/1.png");showInfo();resize(700, 650);
}PictureDisplayWidget::~PictureDisplayWidget()
{}void PictureDisplayWidget::slot_btnClicked(bool checked)
{Q_UNUSED(checked);QPushButton* sender = static_cast<QPushButton*>(this->sender());QString strImagesPath(":/images/1.png");if (sender == m_btn1){strImagesPath = ":/images/1.png";}else if (sender == m_btn2){strImagesPath = ":/images/1.jpeg";}else if (sender == m_btn3){strImagesPath = ":/images/1.jpg";}else if (sender == m_btn4){m_rotateSlider->setValue(0);strImagesPath = ":/images/OIP-C.jfif";}setImage(strImagesPath);
}void PictureDisplayWidget::setImage(const QString& strImagesPath)
{//修改图片大小，使图片大小与场景边框尺寸一致m_pixmapItem->setPixmap(QPixmap(strImagesPath).scaled(m_scene->sceneRect().size().toSize(), Qt::KeepAspectRatio));//设置图元变换(旋转)的原点为图元边框的中心点m_pixmapItem->setTransformOriginPoint(m_pixmapItem->boundingRect().center());QPointF itemBoundingRectCenterPoint = m_pixmapItem->boundingRect().center();qDebug() << m_pixmapItem->boundingRect() << itemBoundingRectCenterPoint; //返回的是图元坐标系坐标//以pixmapItem边界矩形左上角为(0,0)进行移动---关键m_pixmapItem->setPos(0-itemBoundingRectCenterPoint.x(), 0-itemBoundingRectCenterPoint.y());qDebug() << "pos:" << m_pixmapItem->pos();//返回的是父项坐标系坐标qDebug() << "scenePos:" << m_pixmapItem->scenePos();//返回的是场景坐标系坐标qDebug() << "sceneBoundingRectPathPoint:" << m_pixmapItem->mapToScene(m_pixmapItem->boundingRect());//返回的是场景坐标系坐标//缩小图元，使其在场景边框内shrinkImageSizeToInsideFramRect([](){//qDebug() << "setImage-->shrinkImageSizeToInsideFramRect";});//放大图元，使其填满场景边框enlargeImageSizeToInsideFramRect();
}//超出边界矩形时，自动缩小图片尺寸
void PictureDisplayWidget::shrinkImageSizeToInsideFramRect(const std::function<void (void)>& op)
{if (m_imageSizeSlider){//不断缩小图元大小，直至其完全包含在场景边框内int imageSizeSliderValue = m_imageSizeSlider->value();while (!m_pixmapItem->collidesWithItem(m_framRectItem, Qt::ContainsItemShape)) //碰撞检测{m_imageSizeSlider->setValue(--imageSizeSliderValue);op();}}
}//自动放大图片尺寸，至触碰边界线
void PictureDisplayWidget::enlargeImageSizeToInsideFramRect()
{// for (int i = 0; i < m_framLineList.size(); ++i) {//     qDebug() << "ContainsItemShape " << i << ": "<< m_pixmapItem->collidesWithItem(m_framLineList.at(i), Qt::ContainsItemShape);//     qDebug() << "IntersectsItemShape " << i << ": "<< m_pixmapItem->collidesWithItem(m_framLineList.at(i), Qt::IntersectsItemShape);//     qDebug() << "ContainsItemBoundingRect " << i << ": "<< m_pixmapItem->collidesWithItem(m_framLineList.at(i), Qt::ContainsItemBoundingRect);//     qDebug() << "IntersectsItemBoundingRect " << i << ": "<< m_pixmapItem->collidesWithItem(m_framLineList.at(i), Qt::IntersectsItemBoundingRect);//     qDebug() << "--------------------------------";// }if (m_imageSizeSlider){//不断放大图元，直至其碰撞到任意一条边线或者达到最大缩放比int count = 0;do{bool bCollidesLine = false;foreach (auto framLine, m_framLineList){if (bCollidesLine = m_pixmapItem->collidesWithItem(framLine, Qt::IntersectsItemShape)) //碰撞检测{break;}}if (bCollidesLine){break; //当图元碰撞到任意一条边线时退出}int imageSizeSliderValue = m_imageSizeSlider->value();m_imageSizeSlider->setValue(++imageSizeSliderValue); //不断放大图元if (m_imageSizeSlider->value() < imageSizeSliderValue){break; //当图元放大无效时退出}} while (++count < m_imageSizeSlider->maximum());}
}void PictureDisplayWidget::slot_SliderValueChanged(int value)
{QSlider* sender = static_cast<QSlider*>(this->sender());if (sender == m_rotateSlider){m_pixmapItem->setRotation(value);//旋转并检测当超出边界矩形时，自动缩小图片尺寸shrinkImageSizeToInsideFramRect(std::bind(&QGraphicsItem::setRotation, m_pixmapItem, value));//自动放大图片尺寸，至触碰边界线enlargeImageSizeToInsideFramRect();}else if (sender == m_imageSizeSlider){qreal oldScale = m_pixmapItem->scale(); //记录原缩放比m_pixmapItem->setScale(sliderValueToPixmapScale(value)); //设置图元缩放比//当碰撞检测到pixmapItem不完全在边界矩形内时，恢复原缩放比if (!m_pixmapItem->collidesWithItem(m_framRectItem, Qt::ContainsItemShape)){m_pixmapItem->setScale(oldScale);m_imageSizeSlider->setValue(pixmapScaleToSliderValue(oldScale));}}showInfo();
}//左上角信息打印
void PictureDisplayWidget::showInfo()
{QString infoText = QString("rotate:%1\r\nimageSize:%2").arg(m_rotateSlider->value()).arg(m_imageSizeSlider->value());m_infoTextItem->setPlainText(infoText);
}