个人实现的QT拼图游戏(开源),QT拖拽事件详解

文章目录

      • 效果图
      • 引言
        • 玩法
      • 拖拽概念
        • 基本概念
        • 如何在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. 处理拖动事件
  • 在源组件中,你需要重写mousePressEventmouseMoveEvent。这些本是处理鼠标事件的函数在此也被用来发起拖动。在鼠标移动事件中,你可以使用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. 处理放下事件
  • 在目标组件中,你需要重写几个事件处理函数以处理放下事件:dragEnterEventdragMoveEvent(可选)和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的图片
    //  计算新的图像大小,取原始图片宽高的最小值作为新的尺寸sizeint 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);// 如果拼图块放置在正确的位pieceaddInPlace(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的点击事件中直接创建了拖拽数据,那么我们只需要在listdropMimeData实现存放的逻辑就行
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();elseendRow = 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.mzph.cn/news/635046.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RHCE: 主从DNS服务器配置 (实现正反向解析)

主服务器配置: 准备工作: #关闭防火墙 [root192 ~]# systemctl stop firewalld#关闭selinux [root192 ~]# setenforce 0#查看selinux状态 [root192 ~]# getenforce Permissive#安装bind包 [root192 ~]# yum install bind -y#查询软件包下的文件 /etc/named.conf #主配置文…

美易官方:美股芯片股盘前走高

随着全球经济的逐步复苏&#xff0c;特别是科技行业的快速发展&#xff0c;芯片股作为科技板块的重要组成部分&#xff0c;在美股市场的表现尤为引人注目。近期&#xff0c;美股芯片股在盘前交易中持续走高&#xff0c;其中AMD的涨幅超过2%&#xff0c;ARM和英伟达也分别涨超1%…

【硬件安全】硬件安全模块—HSM

Perface 硬件安全模块&#xff08;英语&#xff1a;Hardware security module&#xff0c;缩写HSM&#xff09;是一种用于保障和管理强认证系统所使用的数字密钥&#xff0c;并同时提供相关密码学操作的计算机硬件设备。 硬件安全模块一般通过扩展卡或外部设备的形式直接连接…

《设计模式的艺术》笔记 - 职责链模式

介绍 职责链模式避免将请求发送者与接收者耦合在一起&#xff0c;让多个对象都有机会接收请求&#xff0c;将这些对象连接成一条链&#xff0c;并且沿着这条链传递请求&#xff0c;直到有对象处理它为止。职责链模式是一种对象行为型模式。 实现 myclass.h // // Created by …

【算法Hot100系列】跳跃游戏

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

windows系统中,通过LOAD到入csv格式的文件到neo4j中,如何写文件路径

在Neo4j中&#xff0c;使用LOAD CSV语句导入CSV文件时&#xff0c;需要确保你的文件路径是正确的。如果你使用的是Neo4j Desktop或者Neo4j Server&#xff0c;通常需要将CSV文件放在特定的导入目录下。 例如&#xff0c;如果你使用的是Neo4j Desktop&#xff0c;通常会有一个默…

Linux搭建dns主从服务器

一、实验要求 配置Dns主从服务器&#xff0c;能够实现正常的正反向解析 二、知识点 1、DNS简介 DNS&#xff08;Domain Name System&#xff09;是互联网上的一项服务&#xff0c;它作为将域名和IP地址相互映射的一个分布式数据库&#xff0c;能够使人更方便的访问互联网。…

js的节流和防抖

在JavaScript中&#xff0c;节流&#xff08;Throttling&#xff09;和防抖&#xff08;Debouncing&#xff09;是两种常用的优化高频率触发的事件或函数调用的技术。 防抖&#xff08;Debouncing&#xff09;&#xff1a; 防抖的基本思想是&#xff1a;一定时间内&#xff0…

【DP】LCR 100.三角形最小路径和

题目 法1&#xff1a;DP class Solution {public int minimumTotal(List<List<Integer>> triangle) {int n triangle.size();if (n 1) {return triangle.get(0).get(0);}int[] tmp new int[n];tmp[0] triangle.get(0).get(0);int ans Integer.MAX_VALUE;for…

磁的基本知识

磁的基本知识。 一、磁铁及其基本性质。 1、磁铁的概念。 具有吸引铁、钴、镍等金属能力的物质叫做磁体&#xff0c;俗称磁铁、吸铁石。被吸引的铁、钴、镍等物质叫做铁磁性材料。磁铁吸引铁磁性材料的性质叫做磁性。 2、磁铁的分类。 磁铁可分为天然磁铁和人造磁铁两种。天然…

准备注销CSDN了,再也不用了

动不动就是“外包干了2个月&#xff0c;技术明显…”推荐在首页&#xff0c;看到就烦&#xff0c;彻彻底底的垃圾堆&#xff0c;一个相同的标题滑不到底&#xff0c;点进去就是面试题、推销&#xff0c;牛头不对马嘴&#xff0c;真垃圾&#xff08;画个圈圈&#xff09;&#x…

C语言再学习 -- C语言搭建TCP服务器/客户端

TCP/UDP讲过~ 参看&#xff1a;UNIX再学习 – TCP/UDP 客户机/服务器 参看&#xff1a;UNIX再学习 – 网络IPC&#xff1a;套接字 这里记录一下可用的TCP服务器和客户端代码。 参看&#xff1a;用C语言搭建TCP服务器/客户端 一、TCP服务器 #include <stdio.h> #includ…

postman导入https证书

进入setting配置中Certificates配置项 点击“Add Certificate”,然后配置相关信息 以上配置完毕&#xff0c;如果测试出现“SSL Error:Self signed certificate” 则将“SSL certificate verification”取消勾选

uni-app使用HBuilderX打包Web项目

非常简单&#xff0c;就是容易忘记 一、找到manifest.json配置Web配置 二、源码视图配置 "h5" : {"template" : "","domain" : "xxx.xx.xx.xxx","publicPath" : "./","devServer" : {&quo…

C# tcp客户端字符串(图片名称)+ 图片数据打包,发送到服务端;服务端接收到数据后解析数据包

在C#中&#xff0c;要将字符串和图片数据打包发送到服务端&#xff0c;并在服务端解析这些数据&#xff0c;可以按照以下步骤进行&#xff1a; 客户端打包数据 1、创建一个自定义的数据结构来保存字符串和图片数据。 2、将字符串转换为字节数组。 3、将图片数据转换为字节数组。…

01 MyBatisPlus快速入门

1. MyBatis-Plus快速入门 版本 3.5.31并非另起炉灶 , 而是MyBatis的增强 , 使用之前依然要导入MyBatis的依赖 , 且之前MyBatis的所有功能依然可以使用.局限性是仅限于单表操作, 对于多表仍需要手写 项目结构&#xff1a; 先导入依赖&#xff0c;比之前多了一个mybatis-plus…

学习python仅收藏此一篇就够了(闭包,装饰器)

闭包 在函数嵌套的前提下&#xff0c;内部函数使用了外部函数的变量&#xff0c;并且外部函数返回了内部函数&#xff0c;我们把这个使用外部函数变量的内部函数称为闭包。 简单闭包 内部函数使用外部变量 def outer(name):def inner(name1):print(f"<{name}>&l…

x-cmd pkg | aliyun - 阿里云 CLI

目录 简介首次用户技术特点竞品和相关作品进一步阅读 简介 aliyun 是基于阿里云 OpenAPI 的管理工具&#xff0c;用于与阿里云服务交互&#xff0c;管理阿里云资源。 首次用户 使用 x env use aliyun 即可自动下载并使用 在终端运行 eval "$(curl https://get.x-cmd.com…

Jetson之路

119换源之觞&#xff1a;版本一定要对耶耶耶&#xff01;所有问题解决&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;Ubuntu20.04 错误提醒&#xff1a;无法修正错误_aptitude : 依赖: libapt-pkg5.0 (> 1…

(初研) Sentence-embedding fine-tune notebook

由于工作需要&#xff0c;需要对embedding模型进行微调&#xff0c;我调用了几种方案&#xff0c;都比较繁琐。先记录一个相对简单的方案。以下内容并不一定正确&#xff0c;请刷到的大佬给予指正&#xff0c;不胜感激&#xff01;&#xff01;&#xff01; 一.对BGE模型&…