Qt利用QDrag实现拖拽拼图功能详解

目录
  • 一、项目介绍
  • 二、项目基本配置
  • 三、UI界面设置
  • 四、主程序实现
    • 4.1 main.cpp
    • 4.1 mainwindow.h头文件
    • 4.2 mainwindow.cpp源文件
    • 4.3 PiecesList类
    • 4.4 PuzzleWidget类
  • 五、效果演示

一、项目介绍

本文介绍利用QDrag类实现拖拽拼图功能。左边是打散的图,拖动到右边进行复现,此外程序还支持手动拖入原图片。

二、项目基本配置

新建一个Qt案例,项目名称为“puzzle”,基类选择“QMainWindow”,取消选中创建UI界面复选框,完成项目创建。

三、UI界面设置

UI界面如下:

无UI界面

四、主程序实现

4.1 main.cpp

源文件main.cpp中需要预先调用loadImage函数加载图像并显示界面,代码如下:

    QApplication a(argc, argv);
    MainWindow w;
    w.loadImage(QStringLiteral(":/example.jpg"));
    w.show();
    return a.exec();

4.1 mainwindow.h头文件

头文件中声明相应的对象和槽函数:

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
    void loadImage(const QString &path);

public slots:
    void openImage();
    void setupPuzzle();

private slots:
    void setCompleted();

private:
    void setupMenus();
    void setupWidgets();

    QPixmap puzzleImage;
    PiecesList *piecesList;
    PuzzleWidget *puzzleWidget;

4.2 mainwindow.cpp源文件

源文件中对函数进行定义,首先在构造函数中运行setupMenus()函数和setupWidgets()函数并设置大小尺寸和标题:

    setupMenus();
    setupWidgets();

    setSizePolicy(QSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed));//设置大小策略
    setWindowTitle(tr("拖拽拼图"));

定义打开图像函数:

//打开图像(重新选择图像分割)
void MainWindow::openImage()
{
    const QString directory =
        QStandardPaths::standardLocations(QStandardPaths::PicturesLocation).value(0, QDir::homePath());
    QFileDialog dialog(this, tr("Open Image"), directory);//创建打开文件对话框
    dialog.setFileMode(QFileDialog::ExistingFile);//设置返回存在的文件名
    QStringList mimeTypeFilters;
    for (const QByteArray &mimeTypeName : QImageReader::supportedMimeTypes())
        mimeTypeFilters.append(mimeTypeName);
    mimeTypeFilters.sort(); //排序
    dialog.setMimeTypeFilters(mimeTypeFilters);
    dialog.selectMimeTypeFilter("image/jpeg");
    if (dialog.exec() == QDialog::Accepted)
        loadImage(dialog.selectedFiles().constFirst());
}

定义加载图像函数:

// 加载图片
void MainWindow::loadImage(const QString &fileName)
{
    QPixmap newImage;
    if (!newImage.load(fileName)) {
        QMessageBox::warning(this, tr("Open Image"),
                             tr("The image file could not be loaded."),
                             QMessageBox::Close);
        return;
    }
    puzzleImage = newImage;
    setupPuzzle();
}

拼图完成后弹出完成对话框:

//拼图完成后弹出对话框
void MainWindow::setCompleted()
{
    QMessageBox::information(this, tr("拼图完成"),
                             tr("恭喜!您已经成功拼图 \n"
                                "点击OK重新开始"),
                             QMessageBox::Ok);

    setupPuzzle();
}

建立拼图函数:

void MainWindow::setupPuzzle()
{
    int size = qMin(puzzleImage.width(), puzzleImage.height());//获取图像宽度和高度的最小值
    puzzleImage = puzzleImage.copy((puzzleImage.width() - size) / 2,
        (puzzleImage.height() - size) / 2, size, size).scaled(puzzleWidget->width(),
            puzzleWidget->height(), Qt::IgnoreAspectRatio, Qt::SmoothTransformation);//缩放

    piecesList->clear();//清空List
    //切分成5*5=25张拼图
    for (int y = 0; y < 5; ++y) {
        for (int x = 0; x < 5; ++x) {
            int pieceSize = puzzleWidget->pieceSize();
            QPixmap pieceImage = puzzleImage.copy(x * pieceSize, y * pieceSize, pieceSize, pieceSize);
            piecesList->addPiece(pieceImage, QPoint(x, y));
        }
    }

    for (int i = 0; i < piecesList->count(); ++i) {
        if (QRandomGenerator::global()->bounded(2) == 1) {
            QListWidgetItem *item = piecesList->takeItem(i);
            piecesList->insertItem(0, item);
        }
    }

    puzzleWidget->clear();
}

设置菜单栏:

//设置菜单栏
void MainWindow::setupMenus()
{
    QMenu *fileMenu = menuBar()->addMenu(tr("&文件"));

    QAction *openAction = fileMenu->addAction(tr("&打开..."), this, &MainWindow::openImage);
    openAction->setShortcuts(QKeySequence::Open);   //快捷键
    QAction *exitAction = fileMenu->addAction(tr("&退出"), qApp, &QCoreApplication::quit);
    exitAction->setShortcuts(QKeySequence::Quit);   //快捷键

    QMenu *gameMenu = menuBar()->addMenu(tr("&游戏"));
    gameMenu->addAction(tr("&重启"), this, &MainWindow::setupPuzzle);
}

设置界面布局:

//设置界面布局
void MainWindow::setupWidgets()
{
    QFrame *frame = new QFrame;
    QHBoxLayout *frameLayout = new QHBoxLayout(frame);//水平布局
    puzzleWidget = new PuzzleWidget(400);//新建PuzzleWidget对象,设置图像尺寸为400

    piecesList = new PiecesList(puzzleWidget->pieceSize(), this);

    connect(puzzleWidget, &PuzzleWidget::puzzleCompleted,
            this, &MainWindow::setCompleted, Qt::QueuedConnection);

    frameLayout->addWidget(piecesList);
    frameLayout->addWidget(puzzleWidget);
    setCentralWidget(frame);//中心部件
}

4.3 PiecesList类

新建PiecesList类,并继承自QListWidget:

4.4 PuzzleWidget类

新建PuzzleWidget类,继承自QWidget:

它实现了以下几个方法。

    void dragEnterEvent(QDragEnterEvent *event) override;
    void dragLeaveEvent(QDragLeaveEvent *event) override;
    void dragMoveEvent(QDragMoveEvent *event) override;
    void dropEvent(QDropEvent *event) override;
    void mousePressEvent(QMouseEvent *event) override;
    void paintEvent(QPaintEvent *event) override;

Drag执行的流程是:

Drag是从drag->exec()开始的,此时将开启进入一个新的事件循环,然后在拖动的过程中会在下面三个事件中交替:

其中DragEnter是有拖动进入该Widget时触发的,对应的DragLeave则是拖动离开时触发的,而DragMove就是鼠标拖动的时候触发的。

最后当鼠标释放的时候将触发dragEvent,此时将决定拖拽的结果。

回头看一下Drag的触发,和大多数系统一样,一个Drag可能是从控件外触发的,即将外部的数据拖入,也可以是从控件内部触发,即手动生成一个QDrag对象。

拖动的机制:

其实拖动就是将一处的数据移动或者复制到另外一处,在QT中拖动所承载的数据使用QMimeData表示的,它可以用来表示许多Mime Type的集合。一个Mime Type即有format和data两部分组成,format即指示了如何解析对应的data。

五、效果演示

完整效果如下:

初始界面:

拼图完成后界面:

到此这篇关于Qt利用QDrag实现拖拽拼图功能详解的文章就介绍到这了,更多相关Qt QDrag拖拽拼图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • QT实战之打开最近文档功能的实现

    目录 一.项目介绍 二.项目基本配置 三.UI界面设置 四.主程序实现 4.1 mainwindow.h头文件 4.2 mainwindow.cpp源文件 4.3 main.cpp 五.效果演示 一.项目介绍 本文介绍利用Qt实现打开最近文档功能,并实现基本的新建.打开.保存.退出.帮助等功能. 二.项目基本配置 新建一个Qt案例,项目名称为“RecentTest”,基类选择“QMainWindow”,取消选中创建UI界面复选框,完成项目创建. 三.UI界面设置 无UI界面 四.主程序实现 4.

  • Qt股票组件之自选股列表拖拽、右键常用菜单功能的实现

    一.开头嘴一嘴 本文带领大家来看看自选股列表的实现. 如果有需要的朋友可以加我好友,有偿提供源码.或者也可以进一步提供功能定制 封装的控件,或者demo都是没有样式的,所以看着会比较丑一些,不过加样式也是分分钟...这里咱可以先看功能,需要即可定制 本篇文章的自选股和大多数炒股软件一样,每一条自选都是支持拖拽的,拖拽时鼠标会跟随一个拖拽映像,并且鼠标移动时,会有拖拽提示,告知我们鼠标释放时拖拽项将会被插入到哪个位置.除过拖拽之外,自选股列表还支持右键菜单,都是一样常用的操作. 右键菜单包括置顶.

  • Qt无边框窗口拖拽和阴影的实现方法

    无边框窗口的实现 只需要一行代码即可实现 this->setWindowFlags(Qt::FramelessWindowHint); 代码及运行效果: 无边框窗口能拖拽实现 先要去QWidget里面找到 鼠标事件 函数 理一下 坐标的位置 情况: 左上角:屏幕的左上角 中间的窗口:程序的窗口 箭头:鼠标位置 坐标位置满足: x = y - z 在Designer里面拖一个Widget出来叫shadowWidget shadowWidget的颜色为灰色,我们选个自己喜欢的背景色方便查看 接下来我

  • Qt实战案例之如何利用QProcess类实现启动进程

    目录 一.项目介绍 二.项目基本配置 三.UI界面设计 4.1widget.h头文件 4.2widget.cpp源文件 五.效果演示 Qt提供了一个QProcess类用于启动外部程序并与之通信,启动一个新的进程的操作非常简单,只需要将待启动的程序名称和启动参数传递给start()函数即可. 一.项目介绍 利用QProcess类实现启动进程的功能(以记事本程序为例). 二.项目基本配置 新建一个Qt案例,项目名称为“ProcessTest”,基类选择“QWidget”,点击选中创建UI界面复选框,

  • QT实战之打开最近图片功能的实现

    目录 一.项目介绍 二.项目基本配置 三.UI界面设置 四.主程序实现 4.1 mainwindow.h头文件 4.2 mainwindow.cpp源文件 五.效果演示 一.项目介绍 本文介绍利用Qt和QSettings实现打开最近图片功能. 二.项目基本配置 新建一个Qt案例,项目名称为“RecentPhotoTest”,基类选择“QMainWindow”,取消选中创建UI界面复选框,完成项目创建. 三.UI界面设置 无UI界面 四.主程序实现 4.1 mainwindow.h头文件 头文件中

  • Qt自定义图形实现拖拽效果

    本文实例为大家分享了Qt自定义图形实现拖拽效果的具体代码,供大家参考,具体内容如下 在这里自定义图形是通过QPaintEvent事件绘画的图形,也可以通过自定义控件的方式添加到qt中. 首先定义类来自定义图形,这里通过paintEvent事件来实现(主要就是绘画一个图形) void QEventView::paintEvent(QPaintEvent *event) { resize(115+m_iLen,36); QPainter painter(this); painter.setRende

  • Qt利用QDrag实现拖拽拼图功能详解

    目录 一.项目介绍 二.项目基本配置 三.UI界面设置 四.主程序实现 4.1 main.cpp 4.1 mainwindow.h头文件 4.2 mainwindow.cpp源文件 4.3 PiecesList类 4.4 PuzzleWidget类 五.效果演示 一.项目介绍 本文介绍利用QDrag类实现拖拽拼图功能.左边是打散的图,拖动到右边进行复现,此外程序还支持手动拖入原图片. 二.项目基本配置 新建一个Qt案例,项目名称为“puzzle”,基类选择“QMainWindow”,取消选中创建

  • 基于javascript的拖拽类封装详解

    效果图如下 github地址如下: github地址 使用方法 引入js和对应的css import Drag from '../../static/dragger.js' import './assets/css/dragger.css' 之后,实例化 new Drag({ id: 'box-dragger', showAngle: true, isScale: false, showBorder: false }) new Drag({ id: 'box-dragger2', canZoom

  • React实现卡片拖拽效果流程详解

    前提摘要: 学习宋一玮 React 新版本 + 函数组件 &Hooks 优先 开篇就是函数组件+Hooks 实现的效果如下: 学到第11篇了 照葫芦画瓢,不过老师在讲解的过程中没有考虑拖拽目标项边界问题,我稍微处理了下这样就实现拖拽流畅了 下面就是主要的代码了,实现拖拽(src/App.js): 核心在于标记当前项,来源项,目标项,并且在拖拽完成时对数据处理,更新每一组数据(useState): /** @jsxImportSource @emotion/react */ // 上面代码是使用e

  • Qt利用QJson实现解析数组的示例详解

    目录 前言 第一步:进行数据转换 第二步:将字符串转成QJsonDocument格式 第三步:解析json数据 前言 现在有这样一个json结构,需要使用QJson来解析,结构如下: "code": "0001", "descrip": "文本描述1详细描述", "id": "1", "title": "文本1标题", "type&quo

  • DragChartPanel可拖拽曲线应用详解

    DragChartPanel  是java cs架构中的一种图形展现的开源组件. 业务需求需要用到DragChartPanel  ,这是一种根据jtable表格中的数据给与展示的图形组件.它和其他图形组件区别再与它可以进行拖拽,用户通过它不仅可以看出数据变化的曲线,而且可以通过拖拽修改表格中的数据. 下面展示一下它的效果图: 丑归丑,但是很实用呀. 下面展示它的代码 初始化坐标格图: chartpanel1 = new DragChartPanel(this); chartpanel1.setX

  • 利用Vue3实现拖拽定制化首页功能

    目录 前期准备 开始 方法一 方法二 方案三 最终实现结果 总结 前期准备 Vue3 Ts VueDragable (4版本以上) 期望 拖拽组件 组件可以按需加载导入 开始 首先呢,我们先看下VueDragable的文档效果 文档的效果是这种基于列表的一个拖拽排序,那么回归到我们期望我们是想通过动态引入组件来进行拖拽排序,那么在完成拖拽定制化之前,首先要讲的是动态组件,在使用Vue2时候相信我们不陌生我们可以通过Component is来动态引入,如: <template> <div

  • Android ViewDragHelper实现京东、淘宝拖拽详情功能的实现

    先上效果图,如果大家感觉不错,请参考实例代码,效果图如下所述: 要实现这个效果有三种方式: ① 手势 ② 动画 ③ ViewDragHelper 这里我使用的是ViewDragHelper类. public class ViewDragLayout extends ViewGroup { //垂直方向的滑动速度 private static final int VEL_THRESHOLD = 300; //垂直方向的滑动距离 private static final int DISTANCE_T

  • QT实现多文件拖拽获取路径的方法

    本文实例为大家分享了QT实现多文件拖拽获取路径的具体代码,供大家参考,具体内容如下 功能 将多个文件拖拽进界面中,显示文件的路径. 实现 1.启用窗体放下操作 this->setAcceptDrops(true);//启用放下操作 2.重写dragEnterEvent()函数,用于筛选拖拽事件 void dragEnterEvent(QDragEnterEvent *e); void MainWindow::dragEnterEvent(QDragEnterEvent *e) {     //对

随机推荐