个人实现的QT拼图游戏（开源），QT拖拽事件详解

news2024/11/15 5:05:10

文章目录

      • 效果图
      • 引言
        • 玩法
      • 拖拽概念
        • 基本概念
        • 如何在Qt中使用拖放
        • 注意事项
      • 游戏关键问题
      • 总结

效果图

请添加图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/c6dd66befd314442adf07e1dec0d550c.png
在这里插入图片描述
在这里插入图片描述

引言

  • 在学习QT demo时，发现有一个拼图demo，介绍拖拽事件的。以此为蓝本加了亿点修饰，就诞生了这个游戏。
玩法
  • 游戏为拼图游戏，分为俩种模式（闯关与休闲）。
  • 闯关模式：在规定的时间内完成拼图，共有四关，有三种难度，每种难度所需的时间不一致。
  • 休闲模式：玩家可以自定义图片与难度，没有时间限制。

拖拽概念

基本概念
  • 在Qt中，拖放（Drag and Drop）是一种非常直观的方式来处理对象的移动或复制。拖放可以在单个应用程序内进行，也可以在不同应用程序之间进行。Qt为此提供了一组丰富的API来支持拖放操作。
  1. 拖动 (Drag)
  • 开始一个拖动操作，通常是当用户在一个可拖动的组件上按下鼠标按钮，并移动一定距离时。在Qt中，你需要创建一个QDrag对象，并指定要拖动的数据。
  1. 放下 (Drop)
  • 放下操作发生在拖动过程的最后，当用户释放鼠标按钮时。如果释放位置是一个可以接受放下的组件（一个设置为接受放下的QWidget或者QGraphicsItem），那么会发生放下操作。
  1. MIME 数据
  • 拖动和放下的数据是通过MIME（Multipurpose Internet Mail Extensions）类型封装的。在Qt中通常使用QMimeData对象来处理拖放的数据。
如何在Qt中使用拖放
  1. 启用组件的拖放
  • 首先，确保你的QWidget派生类允许拖放。使用setDragEnabled(true)可以使得组件可以被拖动，使用setAcceptDrops(true)使得组件可以接收放下。
  1. 处理拖动事件
  • 在源组件中，你需要重写mousePressEvent和mouseMoveEvent。这些本是处理鼠标事件的函数在此也被用来发起拖动。在鼠标移动事件中，你可以使用QDrag来开始拖动操作，并将QMimeData附加到QDrag对象。
void SourceWidget::mouseMoveEvent(QMouseEvent *event) {
    if (!(event->buttons() & Qt::LeftButton)) {
        return;
    }
    QDrag *drag = new QDrag(this);
    QMimeData *mimeData = new QMimeData;
    // 设置数据 mimeData->setData(...) 或 mimeData->setText(...)
    drag->setMimeData(mimeData);
    // 开始拖动操作
    Qt::DropAction dropAction = drag->exec(Qt::CopyAction | Qt::MoveAction);
}
  1. 处理放下事件
  • 在目标组件中，你需要重写几个事件处理函数以处理放下事件：dragEnterEvent、dragMoveEvent(可选)和dropEvent。通过这些事件，你可以确定是否接受拖动进来的数据，以及如何处理这些数据。
void TargetWidget::dragEnterEvent(QDragEnterEvent *event) {
    if (event->mimeData()->hasFormat("custom/format")) {
        event->acceptProposedAction();
    }
}
void TargetWidget::dropEvent(QDropEvent *event) {
    const QMimeData *mimeData = event->mimeData();
    // 处理放下的数据 mimeData->data(...) 或 mimeData->text()
    event->acceptProposedAction();
}
注意事项
  • 你也许会需要处理dragLeaveEvent，用来处理拖动物体离开组件时的事件。
  • 拖放事件与标准的鼠标事件是相互独立的，在处理拖放事件时不会影响鼠标事件的处理。
  • 拖放操作可以包括图片、文本、HTML等多种数据类型，基本上任何种类的数据都可以通过MIME数据进行传输。
  • 要实现跨不同应用程序的拖放，需要确保所有参与的应用程序都能理解相关的MIME类型。

游戏关键问题

  • 游戏的总体结构是怎么样的
  • 界面主要由俩块组成，左边为一个QListView设置了继承于QAbstractListModel的代理模型，右边为一个QWidget。
  • 游戏维护了一个全局的结构体指针中，该结构体用于保存游戏的信息，如模式，难度，当前关卡等信息。
  • 游戏实现的主要难点就是拖拽的实现
  1. 如何将一张图片分割为指定的x*x的图片
    //  计算新的图像大小,取原始图片宽高的最小值作为新的尺寸size
    int size = qMin(pixmap.width(), pixmap.height());
    // 从原始图片中剪切出一个大小为 sizexsize 的部分作为新的puzzleImage,
    // 重新调整新的puzzleImage大小为puzzleWidget的imageSize,使用Qt::SmoothTransformation平滑缩放
    pixmap = pixmap.copy((pixmap.width() - size) / 2, (pixmap.height() - size) / 2, size, size)
                 .scaled(puzzleWidget->imageSize(), puzzleWidget->imageSize(), Qt::IgnoreAspectRatio, Qt::SmoothTransformation);
    // 制作每一片拼图片段。m_PieceSize图片大小，m行列数
    for (int y = 0; y < m; ++y)
    {
        for (int x = 0; x < m; ++x)
        {
            QPixmap pieceImage = pixmap.copy(x * m_PieceSize, y * m_PieceSize, m_PieceSize, m_PieceSize);
            addPiece(pieceImage, QPoint(x, y));
        }
    }
  1. 如何判断拼图是否完成
  • 在切割图片的时候，我们已经将将图片正确位置存放到图片中，只需要全局维护一个计数器，当计数器等于拼图数量时，即是完成。
    // 图片资源结构体
    struct Piece
    {
        QPixmap pixmap;
        QRect rect;
        QPoint location;
        Piece() {}
        Piece(QPixmap Vpixmap, QPoint Vlocation, QRect Vrect) : pixmap(Vpixmap), location(Vlocation), rect(Vrect) {}
        Piece(const Piece &other)
        {
            pixmap = other.pixmap;
            rect = other.rect;
            location = other.location;
        }
    };
  • 计数器的增加规则是：若是当前图片所有在矩形与存放的位置相同，计数器+1
void PuzzleWidget::addInPlace(Piece piece)
{
    if (piece.location == piece.rect.topLeft() / pieceSize())
    {
        inPlace++;
        if (inPlace == MacroDf::getCloum() * MacroDf::getCloum())
            emit puzzleCompleted();
    }
}
  1. 图片是如何出现在widget上的
  • 通过绘制实现,pieces存放的是保存的图片结构体列表,highlightedRect为高亮区域。
void PuzzleWidget::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.fillRect(event->rect(), Qt::white);

    if (highlightedRect.isValid())
    {
        painter.setBrush(QColor("#98FB98"));
        painter.setPen(Qt::NoPen);
        painter.drawRect(highlightedRect.adjusted(0, 0, -1, -1));
    }

    for (const Piece &piece : pieces)
    {
        painter.drawPixmap(piece.rect, piece.pixmap);
    }
}
  1. widget窗口上图片是如何拖动的
  • 在鼠标点击事件中，先判断当前点击的位置是否存在图片，若是有就去存好的图片链表中获取该图片的资源，创建拖动操作的数据对象
void PuzzleWidget::mousePressEvent(QMouseEvent *event)
{
    // 获取鼠标点击位置的方块
    QRect square = targetSquareMove(event->pos());
    // 查找方块是否有图片
    int found = findPiece(square);

    if (found == -1)
        return;
    // 移除找到的拼图块
    Piece piece = pieces.takeAt(found);
    // 如果拼图块的位置与方块的顶点位置一致，表示该拼图块为正确位置，移除时更新完成计数位
    if (piece.location == square.topLeft() / pieceSize())
        inPlace--;

    update(square);
    // 将拼图块的图像和位置信息存入数据流
    QByteArray itemData;
    QDataStream dataStream(&itemData, QIODevice::WriteOnly);

    dataStream << piece.pixmap << piece.location << piece.rect;
    // 创建拖动操作的数据对象
    QMimeData *mimeData = new QMimeData;
    mimeData->setData("DJ-NB", itemData);
    // 创建拖动操作
    QDrag *drag = new QDrag(this);
    drag->setMimeData(mimeData);
    drag->setHotSpot(event->pos() - square.topLeft());
    drag->setPixmap(piece.pixmap);
    // 判断拖动操作的结果是否为Qt::IgnoreAction，表示拖拽失败，将拼图块放回原位置
    if (drag->exec(Qt::MoveAction) == Qt::IgnoreAction) // 拖放到其他应用程序。我们使用Qt::IgnoreAction来限制它。
    {
        pieces.insert(found, piece);
        update(targetSquareMove(event->pos()));

        if (piece.location == QPoint(square.x() / pieceSize(), square.y() / pieceSize()))
            inPlace++;
    }
}
  1. 图片是如何拖入widget以及交换图片的
  • 在dropEvent事件中，先检查数据格式是否正确，再判断当前要放入的位置是否存在图片，不存在图片直接加入到列表中就行，若是存在，则需要交换俩个图片的信息，同时要判断计数位。
void PuzzleWidget::dropEvent(QDropEvent *event)
{
    // 检查事件是否含有我们需要的数据格式
    if (event->mimeData()->hasFormat("DJ-NB"))
    {
        // 接受事件默认的复制动作
        event->setDropAction(Qt::MoveAction);
        event->accept();
        auto square = targetSquareMove(event->pos()); // 目标位置
        int existingPieceIndex = findPiece(square);   // 寻找目标位置是否有拼图块

        // 从拖放事件的数据中读取拼图块的信息
        QByteArray pieceData = event->mimeData()->data("DJ-NB");
        QDataStream dataStream(&pieceData, QIODevice::ReadOnly);
        // 将拼图块添加到列表中或与现有拼图块交换
        if (existingPieceIndex == -1)
        {
            // 目标位置没有拼图块，直接放置新拼图块
            Piece piece;
            piece.rect = targetSquareMove(event->pos());
            dataStream >> piece.pixmap >> piece.location;
            // 将拼图块添加到列表中
            pieces.append(piece);
            // 清除高亮的区域并更新拼图块的区域
            highlightedRect = QRect();
            update(piece.rect);
            // 如果拼图块放置在正确的位置
            addInPlace(piece);
        }
        else
        {
            // 目标位置已有拼图块，和拖入的拼图块互换位置
            // 起始位置资源
            Piece piece;
            dataStream >> piece.pixmap >> piece.location >> piece.rect;
            // 目标位置资源
            Piece rPic = pieces[existingPieceIndex];
            // 删除掉原有的，以便重新写入新值
            if (rPic.location == rPic.rect.topLeft() / pieceSize())
                inPlace--;
            pieces.takeAt(existingPieceIndex);
            // 数据交互
            Piece tempPiece = piece;
            piece.location = rPic.location;
            piece.pixmap = rPic.pixmap;
            rPic.location = tempPiece.location;
            rPic.pixmap = tempPiece.pixmap;
            // 存放俩组数据
            pieces.append(piece);
            pieces.append(rPic);
            // 重绘涉及的区域
            highlightedRect = QRect();
            update(piece.rect);
            update(rPic.rect);
            // 如果拼图块放置在正确的位piece
            addInPlace(rPic);
            addInPlace(piece);
        }
    }
    else
    {
        highlightedRect = QRect();
        // 不是我们支持的数据格式，保留默认行为
        event->ignore();
    }
}
  1. list以拖入widget中的图片如何删除，更新链表视图的
  • 在继承与QAbstractListModel的代理中的removeRows函数实现
bool PiecesModel::removeRows(int row, int count, const QModelIndex &parent)
{
    if (parent.isValid())
        return false;

    if (row >= piece.size() || row + count <= 0)
        return false;
    // 修剪beginRow和endRow,限制在有效范围内。
    int beginRow = qMax(0, row);
    int endRow = qMin(row + count - 1, piece.size() - 1);
    // 调用beginRemoveRows()告知视图将移除行,开始行beginRow和结束行endRow。
    beginRemoveRows(parent, beginRow, endRow);
    // 循环移除
    while (beginRow <= endRow)
    {
        piece.removeAt(beginRow);
        ++beginRow;
    }
    // 调用endRemoveRows()告知视图完成移除行。
    endRemoveRows();
    return true;
}
  1. 如何将widget拖回list中
  • 上述中我们在widget的点击事件中直接创建了拖拽数据，那么我们只需要在list的dropMimeData实现存放的逻辑就行
bool PiecesModel::dropMimeData(const QMimeData *data, Qt::DropAction action, int row, int column, const QModelIndex &parent)
{
    // 检查mime数据是否包含正确的格式:"DJ-NB"
    if (!data->hasFormat("DJ-NB"))
        return false;
    // 检查拖放操作:
    if (action == Qt::IgnoreAction)
        return true;
    // 只允许插入第一列:
    if (column > 0)
        return false;
    // 判断插入行的尾部位置endRow:
    int endRow;
    // 如果是根节点:
    if (!parent.isValid())
    {
        if (row < 0)
            endRow = piece.size();
        else
            endRow = qMin(row, piece.size());
    }
    else // 如果是子节点:
    {
        endRow = parent.row();
    }
    // 解析mime数据,读取 pixmap 图片和位置 location:
    QByteArray encodedData = data->data("DJ-NB");
    QDataStream stream(&encodedData, QIODevice::ReadOnly);
    // 通过 begin/endInsertRows函数更新模型,插入数据:
    while (!stream.atEnd())
    {
        QPixmap pixmap;
        QPoint location;
        QRect rect;
        // 从数据流中读数据
        stream >> pixmap >> location >> rect;
        Piece pie(pixmap, location, rect);
        // 若是以存在则返回不加入
        for (auto point : piece)
        {
            if (point.location == location)
            {
                return false;
            }
        }
        beginInsertRows(QModelIndex(), endRow, endRow);
        piece.insert(endRow, pie);
        endInsertRows();
        ++endRow;
    }
    return true;
}
  1. widget中如何判断当前位置，以及图片中的矩形数据怎么存放
  • 通过鼠标的点击获取的点，得到以图片为大小的当前位置左上角坐标，矩形大小也是每张图片的大小
const QRect PuzzleWidget::targetSquareMove(const QPoint &position) const
{
    // point除以一个数是往前进位，这会导致坐标出现问题，所以要用Int处理
    int x = position.x() / pieceSize();
    int y = position.y() / pieceSize();
    auto pointNew = QPoint(x, y);
    auto point = pointNew * pieceSize();
    auto resultRect = QRect(point.x(), point.y(), pieceSize(), pieceSize());
    return resultRect;
}

总结

  • 这个游戏的用了周末俩天时间做完，后面用了一天修了点BUG，细节还是很多的，像计时器如何使用，富文本内容如何显示，弹窗的事件处理等，主要还是用于理解拖拽事件，当然你也可以直接去看QT 的demo，那个没我这么复杂，搜drag就行，不过它那个有几个明显的问题，我这都优化了。
  • 知识理应共享，大家相互学习，源码在此哦。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1397720.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

小白进阶之字符串处理

小白进阶之字符串处理

#include <cstdio> #include <cstring> int main() {char str[105];int count0,len0;scanf("%s",str);//输入字符lenstrlen(str);//求字符长for(int i0;i<len;i){if(str[i]A)//匹配计数count;}printf("%d",count); }#include <cstdio>…
阅读更多...
【算法实验5】

【算法实验5】

实验5-1 最短下降路径问题 【样例输入】 3 2 1 3 6 5 4 7 8 9 【样例输出】 13 #include<bits/stdc.h> using namespace std; const int N 105; int n; int g[N][N]; int f[N][N]; int res 1e95; int main() {cin>>n;for(int i 1; i < n; i )for(int …
阅读更多...
2.C语言——控制语句

2.C语言——控制语句

控制语句 1.分支语句/判断语句if 语句if...else 语句if...else if...else语句 switch语句 2.循环语句 while 语句 do...while 语句 for 语句 3.转向语句 break continue go to 1.分支语句/判断语句 if 语句 if(boolean_expression) { /* 如果布尔表达式为真将执行的语句 */ } …
阅读更多...
禅道-项目从0到1的过程18开源版本使用

禅道-项目从0到1的过程18开源版本使用

目录 一、禅道的下载安装12版本开源版 1.1、禅道 在计算机网络行业&#xff0c;禅道是一种开源的项目管理软件。它提供了敏捷开发、测试管理、bug跟踪、需求管理、团队协作等功能&#xff0c;适用于敏捷开发团队和软件开发项目管理。禅道软件旨在帮助团队更好地管理项目、提高…
阅读更多...
读元宇宙改变一切笔记10_支付方式

读元宇宙改变一切笔记10_支付方式

1. 元宇宙中的经济 1.1. 元宇宙被设想为一个平行世界&#xff0c;人们将在那里花大量的时间工作和生活 1.1.1. 元宇宙的实现程度部分取决于它是否建立在一个繁荣的经济体系之上 1.2. 元宇宙中的经济将大体遵循现实世界的经济模式 1.2.1. 激烈的竞争、大量营利性企业的存在、…
阅读更多...
yolov8的目标检测、实例分割、关节点估计的原理解析

yolov8的目标检测、实例分割、关节点估计的原理解析

1 YOLO时间线 这里简单列下yolo的发展时间线&#xff0c;对每个版本的提出有个时间概念。 2 yolov8 的简介 工程链接&#xff1a;https://github.com/ultralytics/ultralytics 2.1 yolov8的特点 采用了anchor free方式&#xff0c;去除了先验设置可能不佳带来的影响借鉴General…
阅读更多...
树莓派也可以部署基于YOLO的目标检测

树莓派也可以部署基于YOLO的目标检测

YOLO目标检测结果 在本文的第一部分中&#xff0c;我测试了YOLO&#xff08;You Only Look Once&#xff09;这一流行的目标检测库的“复古”版本。只使用OpenCV运行深度学习模型&#xff0c;而不使用“沉重”的框架如PyTorch或Keras&#xff0c;对于低功耗设备来说是有前途的&…
阅读更多...
Python | 六、哈希表 Hash Table（列表、集合、映射）

Python | 六、哈希表 Hash Table（列表、集合、映射）

哈希表基础 哈希表是一类数据结构&#xff08;哈希表包含数组、集合和映射&#xff0c;和前两篇文章叙述的字符串、链表平级&#xff09;哈希表概念&#xff1a;类似于Python里的字典类型&#xff0c;哈希表把关键码key值通过哈希函数来和哈希表上的索引对应起来&#xff0c;之…
阅读更多...
DNA序列修正*

DNA序列修正*

题目 import java.util.HashMap; import java.util.Map; import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();sc.nextLine();char[] sq1 sc.next().toCharArray();sc.nextLine(…
阅读更多...
ROS第 10 课 服务数据的自定义与使用

ROS第 10 课 服务数据的自定义与使用

文章目录 第 10 课 服务数据的自定义与使用1.自定义服务数据2.服务数据的使用2.1 创建服务器和客户端代码2.2 运行服务器和客户端节点 第 10 课 服务数据的自定义与使用 1.自定义服务数据 注意&#xff1a;在自定义服务数据之前&#xff0c;需要先创建工作空间和功能包&#x…
阅读更多...
【Linux第二课-权限】操作系统、Linux用户、Linux权限、Linux文件类型、粘滞位

【Linux第二课-权限】操作系统、Linux用户、Linux权限、Linux文件类型、粘滞位

目录 操作系统shell外壳为什么有shell外壳shell外壳是什么shell外壳工作原理 Linux用户root用户与非root用户root用户与普通用户的切换普通用户 --> root用户root用户 --> 普通用户普通用户 --> 普通用户对一条指令提升为root权限进行执行 Linux权限Linux中的权限角色…
阅读更多...
STM32（--001） Win10、Win11 上的驱动安装说明

STM32（--001） Win10、Win11 上的驱动安装说明

一、USB线插到 CMSIS-DAP 接口上&#xff0c;将自动识别到两个设备 ① CMSIS-DAP&#xff1a;用于烧录代码、在线硬件仿真; 在Keil里烧录&#xff0c;无需通过FlyMCU; ② USB转TTL&#xff1a;用于开发板与电脑间串口通信 &#xff0c;即USART1, TX-PA9、RX-PA10; 接口备注&a…
阅读更多...
Java 流程控制 - 分支、循环

Java 流程控制 - 分支、循环

顺序控制 程序从上到下逐行执行&#xff0c;中间没有任何判断和跳转。 public class Test{//正确形式int a 1;int b a;// 错误形式int c d 1;int d 2; }块作用域 块&#xff08;即复合语句&#xff09;是指由一对大括号括起来的若干条简单的 Java 语句。块确定了变量的…
阅读更多...
JVM性能调优-垃圾收集器G1详解

JVM性能调优-垃圾收集器G1详解

目录 G1收集器(-XX:UseG1GC) G1垃圾收集分类 YoungGC MixedGC Full GC G1收集器参数设置 G1垃圾收集器优化建议 什么场景适合使用G1 G1收集器(-XX:UseG1GC) G1 (Garbage-First)是一款面向服务器的垃圾收集器,主要针对配备多颗处理器及大容量内存的机器. 以极高概率满足…
阅读更多...
redis未授权访问全漏洞复现

redis未授权访问全漏洞复现

redis未授权访问全漏洞复现 Redis 有关的漏洞具有明显的时间分段性&#xff0c;在15年11月之前&#xff0c;主要是未授权导致的数据泄露&#xff0c;获得一些账号密码。另外还可以 DoS&#xff08;参考&#xff1a;Sangfor VMP redis unauthorized access vulnerability&#…
阅读更多...
UI开发布局-HarmonyOS应用UI开发布局

UI开发布局-HarmonyOS应用UI开发布局

UI页面的构建不用再像Android开发过程中在.xml文件中书写&#xff0c;可直接在页面上使用声明式UI的方式按照布局进行排列&#xff0c;构建应用的页面。 如下代码使用Row、Column构建一个页面布局&#xff0c;在页面布局中添加组件Text、Button&#xff0c;共同构成页面&#…
阅读更多...
Git学习笔记（第5章）：Git团队协作机制

Git学习笔记（第5章）：Git团队协作机制

目录 5.1 团队内协作 5.2 跨团队协作 Git进行版本控制都是在本地库操作的。若想使用Git进行团队协作&#xff0c;就必须借助代码托管中心。 5.1 团队内协作 问题引入&#xff1a;成员1&#xff08;大佬&#xff09;利用Git在宿主机上初始化本地库&#xff0c;完成代码的整体…
阅读更多...
016-Vue-黑马2023：前后端分离开发(在线接口文档)，前端工程化、Element、vue编写一个完成页面、Vue路由、vue打包部署到nginx

016-Vue-黑马2023：前后端分离开发(在线接口文档)，前端工程化、Element、vue编写一个完成页面、Vue路由、vue打包部署到nginx

第三节 前后端分离开发 1、介绍 开发模式 前后端混合开发&#xff1a;传统开发模式 前后端分离开发&#xff1a;当前最为主流的开发模式 页面原型需求案例&#xff1a;分析出接口文档 离线开发文档示例&#xff1a; 2、YAPI&#xff08;官网已停用&#xff09; 202…
阅读更多...
服务注册流程解析

服务注册流程解析

本文主要介绍服务注册的基本流程 起手式 接上面的继续说&#xff0c;服务注册是一门至高无上的武学&#xff0c;招式千变万化 &#xff0c;九曲十八弯打得你找不到北。可正所谓这顺藤摸瓜&#xff0c;瓜不好找&#xff0c;可是这藤长得地方特别显眼。那么今天&#xff0c;就让…
阅读更多...
【极问系列】springBoot集成elasticsearch出现Unable to parse response body for Response

【极问系列】springBoot集成elasticsearch出现Unable to parse response body for Response

【极问系列】 springBoot集成elasticsearch出现Unable to parse response body for Response 如何解决&#xff1f; 一.问题 #springboot集成elasticsearch组件,进行增删改操作的时候报异常Unable to parse response body for Response{requestLineDELETE /aurora-20240120/…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023