系列文章目录

通过Qt实现手势识别控制软件操作相关系列技术方案

（一）Qt 将某控件、图案绘制在最前面的方法，通过QGraphicsScene模块实现
（二）Qt QGraphicsScene模块实现圆点绘制在所有窗体的最前方，实现圆点的“彩色拖尾”效果以及“选中方框”效果
（三）Qt 动态手势识别“握拳”
（四）Qt 动态手势识别“手掌随动”+“握拳选择”
（五）Qt 动态手势识别“左右滑动”以及实现翻页效果

---

前言

  在用Qt做一些应用的时候，有可能遇到和“绘制顺序”相关的问题，即要控制一些控件之间的显示前后问题，在常用的QWidget体系中，设置前后位置是主要是通过raise()，underStack()，hide()函数，但这种操作对本人遇到的问题可能不太好办。
  本人需要处理的问题，可以直接看本博客的图1的效果，即“实现有一个黑点在八个黄色的QWidget子部件前方自由移动”的效果，黑点要完全在黄色方块之前出现。
  如果按照常规对当前的QWidget对象重写paintEvent函数的做法，去绘制那个黑点，那么可能会得到图2的效果。
  本文要做的是去实现图1而不是图2的效果。

---

一、效果

  为了简便演示，本人在ui文件中直接布置8个方块，为了说明一些问题，左边四块方块为完全不透明的方块，右边四块方块为半透明方块。

图1 黑点完全在黄色框上方绘制

图2 黑点在黄色框下方绘制

二、代码实现

1.工程文件夹结构

  本项目工程结构如下图，和显示相关的类如下：一个Widget界面类用于最底层的容器，一个BackWidget界面类用于实现业务逻辑代码。BackWidget占据Widget的整幅界面。

  这里还有一个UdpServer类是用来确定“黑色圆点”的当前位置的，与显示问题没有直接关系，因此本篇博客不展开详细说明，有兴趣的博友可以移步此篇博客。

2.BackWidget类

2.1 backwidget.h

#ifndef BACKWIDGET_H
#define BACKWIDGET_H

#include <QWidget>
#include <QPainter>
#include <QDebug>
#include <QGraphicsScene>
#include <QGraphicsEllipseItem>
#include <QGraphicsView>

namespace Ui {
class BackWidget;
}

class BackWidget : public QWidget
{
    Q_OBJECT

public:
    explicit BackWidget(QWidget *parent = nullptr);
    ~BackWidget();

    void paintEvent(QPaintEvent *event);
    void draw_point(QPainter& painter, const QPointF& point);
    void draw_point(const QPointF& point);

    void showEvent(QShowEvent* event);
    void resizeEvent(QResizeEvent* event);

    QGraphicsScene* scene;
    QGraphicsEllipseItem* circleItem;
    QGraphicsView* view;

public slots:
    void point_update(QList<QPointF>* points);

private:
    Ui::BackWidget *ui;
    QList<QPointF>* pointsInWidget;
};

#endif // BACKWIDGET_H

2.2 backwidget.cpp

  对绘制黑点这块，通过修改输入参数的形式实现函数的重载（方式比较简单，没仔细考虑，介意的人可以自己改函数名称），下面两个函数，只能运行一条，另一条注释掉。

	//QWiget方式绘制
    draw_point(painter, point);
    
	//用QGraphicsScene方式绘制
    draw_point(point);

#include "backwidget.h"
#include "ui_backwidget.h"

BackWidget::BackWidget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::BackWidget)
{
    ui->setupUi(this);
    pointsInWidget = new QList<QPointF>;


    scene = new QGraphicsScene(this);
    circleItem = new QGraphicsEllipseItem;
    scene->addItem(circleItem);

    view = new QGraphicsView(scene, this);
    view->setGeometry(0, 0, width(), height());
    view->setStyleSheet("background: transparent");
    view->setRenderHint(QPainter::Antialiasing);
    view->setViewportUpdateMode(QGraphicsView::FullViewportUpdate);
}

BackWidget::~BackWidget()
{
    delete ui;
}


void BackWidget::point_update(QList<QPointF>* points)
{
    delete pointsInWidget;
    pointsInWidget = new QList<QPointF>(*points);
    delete points;

    update();
}


void BackWidget::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event)

    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);

    uint i =0;
    for (const QPointF& point : *pointsInWidget)
    {
        if(i==9)
        {	
        	//QWiget方式绘制
            draw_point(painter, point);
            
			//用QGraphicsScene方式绘制
            draw_point(point);
        }

        i++;
    }
}


void BackWidget::showEvent(QShowEvent* event)
{
    QWidget::showEvent(event);
    view->show();
}

void BackWidget::resizeEvent(QResizeEvent* event)
{
    QWidget::resizeEvent(event);
    view->setGeometry(0, 0, width(), height());
}


void BackWidget::draw_point(const QPointF& point)
{
    circleItem->setRect(QRectF(point.x() * width() - 15, point.y() * height() - 15, 80, 80));

    QBrush brush(Qt::black);
    circleItem->setBrush(brush);
    scene->update();
}


void BackWidget::draw_point(QPainter& painter, const QPointF& point)
{
    painter.setBrush(QBrush(Qt::black));
    painter.drawEllipse(QPointF(point.x()*width(),point.y()*height()), 40, 40);
}

---

总结

  本文为，Qt 将某控件、图案绘制在最前面的方法，通过QGraphicsScene模块实现的方法。
  系列文章：
（一）Qt 将某控件、图案绘制在最前面的方法，通过QGraphicsScene模块实现
（二）Qt QGraphicsScene模块实现圆点绘制在所有窗体的最前方，实现圆点的“彩色拖尾”效果以及“选中方框”效果
（三）Qt 动态手势识别“握拳”
（四）Qt 动态手势识别“手掌随动”+“握拳选择”
（五）Qt 动态手势识别“左右滑动”以及实现翻页效果
  本系列文章所有代码获取请与本人私信联系。