Qt中的QGraphicView和QGraphicScene简单使用

概述：我们利用QGraphicView和QGraphicScene来实现一个简单的视频播放器，然后上面悬浮一些操作的控件，看看怎么来实现。

1、CcTestVideoPlayer类

        模拟播放器类，继承QGraphicScene

1.1 CcTestVideoPlayer.h

#pragma once

#include <QGraphicsView>
#include <QGraphicsScene>
#include <QVariant>
#include <QSharedPointer>

class CcTestVideoPlayer : public QGraphicsView
{
	Q_OBJECT

public:
	CcTestVideoPlayer(QWidget *parent = nullptr, QGraphicsScene* scene = nullptr);
	~CcTestVideoPlayer(void);

protected:
	void drawBackground(QPainter *painter, const QRectF &rect)override;

};

1.2 CcTestVideoPlayer.cpp

#include "CcTestVideoPlayer.h"

#include <QLabel>
#include <QStyle>
#include <QPainter>
#include <QPaintEngine>
#include <QGraphicsProxyWidget>
#include <QMenu>
#include <QApplication>
#include <QTimer>

CcTestVideoPlayer::CcTestVideoPlayer(QWidget *parent, QGraphicsScene* scene)
	: QGraphicsView(parent)
{
	if (scene)
	{
		scene->setParent(this);
	}
	setScene(scene ? scene : new QGraphicsScene(this));
    
    auto widget = new QWidget;
    widget->setStyleSheet("background:white;");
    widget->setFixedSize(QSize(300,420));
    
    scene->addWidget(widget)->setZValue(101);
}

CcTestVideoPlayer::~CcTestVideoPlayer()
{

}

void CcTestVideoPlayer::drawBackground(QPainter *painter, const QRectF &rect)
{
    QGraphicsView::drawBackground(painter, this->rect());
    painter->fillRect(geometry(), QBrush("#0c0b0f"));
}

2、CcTestVideoSurface 

       继承QGraphicsScene

2.1 CcTestVideoSurface.h

#pragma once

#include <QGraphicsScene>
#include <QObject>
#include <QLabel>

class CcTestVideoSurface : public QGraphicsScene
{
    Q_OBJECT
    
public:
    CcTestVideoSurface(QObject *parent = Q_NULLPTR);
    virtual ~CcTestVideoSurface(void);

    void showTips();

private:
    QLabel* m_tipsInfoLabel = nullptr;
    QWidget* m_containter = nullptr;
};

2.2  CcTestVideoSurface.cpp

#include "CcTestVideoSurface.h"

#include <QGraphicsProxyWidget>
#include <QHBoxLayout>
#include <QVBoxLayout>

CcTestVideoSurface::CcTestVideoSurface(QObject *parent)
	: QGraphicsScene(parent)
{
    m_containter = new QWidget();
    m_containter->setObjectName(QStringLiteral("tip_container"));
    m_containter->setStyleSheet("#tip_container { background-color: transparent;}");
    
    m_tipsInfoLabel = new QLabel(nullptr);
    m_tipsInfoLabel->setFixedSize(120, 38);
    m_tipsInfoLabel->setObjectName(QStringLiteral("tip"));
    m_tipsInfoLabel->setStyleSheet("#tip { background-color: rgba(10,132,254,0.6); border: none; border-radius: 15px; font-size:12px; color:#edf1fa;}");
    m_tipsInfoLabel->setAlignment(Qt::AlignCenter);
    m_tipsInfoLabel->setText("测试悬浮在view");
    auto tipLayout = new QHBoxLayout;
    tipLayout->setSpacing(0);
    tipLayout->setMargin(0);
    tipLayout->addStretch();
    tipLayout->addWidget(m_tipsInfoLabel);
    tipLayout->addStretch();
    
    auto layout = new QVBoxLayout(m_containter);
    layout->setSpacing(0);
    layout->setMargin(0);
    layout->addStretch();
    layout->addLayout(tipLayout);
    layout->addSpacing(4);
    
    addWidget(m_containter)->setZValue(102);
}

CcTestVideoSurface::~CcTestVideoSurface(void)
{
    
}

void CcTestVideoSurface::showTips()
{
    if (m_containter)
    {
        m_containter->setVisible(true);
    }
}

3、main.cpp

#include <QApplication>
#include <QWidget>
#include <QDebug>

//cc-engine里面生成的动态库
#include "CcDataManage.h"
#include "CcJsonTool.h"

#include "cc-test/CcTestVideoPlayer.h"
#include "cc-test/CcTestVideoSurface.h"

//测试graphic view

void test_qJson()
{
    //TODO: qt json 简单使用测试
    auto cmd = 1001;
    auto type = 1;
    auto content = "05:00";

    QVariantMap contentMap;
    contentMap["cmd"] = QString::number(cmd);

    QVariantMap dataMap;
    dataMap["type"] = type;
    dataMap["content"] = content;

    contentMap["data"] = dataMap;

    CcJsonTool jsonTool;
    auto str = jsonTool.toJsonFromVariantMap(contentMap);

    qDebug() << "jsonStr:" << str;

    //jsonStr
    auto JsonStr = "{\"cmd\":\"1001\",\"data\":{\"content\":\"05:00\",\"type\":1}}";
    if (jsonTool.parseJsonFromString(JsonStr))
    {
        qDebug() << "parse json str success";
    }
    else
    {
        qDebug() << "parse json str failed";
    }
}

void test_dll_manage()
{
    CcDataManage data_manage;
    qDebug() << "Get Data From cc-engine dynamic library: " << data_manage.GetCurrentJsonData();
}

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
  
    //Qt json 简单测试
    test_qJson();
    
    //一个项目多个子项目，并且子项目是动态库调用测试
    test_dll_manage();
    
    //QGraphicView和QGraphicScene简单测试
    auto videoSurface = new CcTestVideoSurface();
    videoSurface->showTips();
    auto graphicView = new CcTestVideoPlayer(nullptr, new CcTestVideoSurface());
    graphicView->setFixedSize(QSize(520, 420));
    graphicView->show();
    
    // QWidget window;
    // window.resize(650, 350);
    // window.setWindowTitle("简单的cmake构建的Qt窗口程序");
    // window.show();
  
    return app.exec();
}

4、最终的结果

5、测试的源码

CcQtApp: Qt测试demo