Qt实现思维导图功能（二）
2024-06-02 20:18:01
前文链接：Qt实现思维导图功能（一）
百度网盘体验地址：
链接：https://pan.baidu.com/s/1-be0tDJokpZeqhMEuHQntA
提取码：4d1w
注：UI窗体风格参考软件：爱莫流程图
效果图
1、动态演示效果：
2、静态展示图片：
前文BUG维护
| 序号 | 问题 |
|---|---|
| 1 | 维护删除按钮未跟随文本宽度变化的问题 |
| 2 | 删除节点可能奔溃：删除节点时，没有从父节点属性中移除与被删除节点的连线 |
| 3 | 鼠标未双击进入编辑时，任然可以输入文本的问题 |
| 4 | 未过滤鼠标右键双击进入编辑文本状态的问题 |
| 5 | 双击文本节点，遇到“-”等分隔符时，未全部选中文本的问题 |
新增功能如下
| 序号 | 简述 | 具体功能 |
|---|---|---|
| 1 | 快捷键 | Tab键新建子节点、Del键删除节点 |
| 2 | 节点高亮 | 选中节点时，该节点至根节点路径高亮 |
| 3 | 编辑菜单 | 新建、编辑 |
| 5 | 调整菜单 | 清空、整理、放大、缩小、折叠 |
| 6 | 风格菜单 | 高亮、线型、主题、大纲（待做） |
| 7 | 文件菜单 | 导入（待优化）、保存（待优化）、导出（待做） |
| 8 | 回撤菜单 | 撤销（待做）、回撤（待做） |
| 9 | 节点操作 | 上级、同级、下级、清空、删除、上移、下移 |
新增UI如下
| 序号 | 简述 | 具体功能 |
|---|---|---|
| 1 | 简约提示菜单 | 简单的悬浮提示效果，例如：”放大“菜单 |
| 2 | 选中提示菜单 | 拥有选中/未选中两种状态，例如：“高亮”菜单 |
| 3 | 切换提示菜单 | 拥有两种功能相互切换状态，例如：”折叠/展开“菜单 |
| 4 | 侧滑菜单栏 | 窗口位置动态变化，形成左侧滑动效果 |
| 5 | 侧滑菜单栏菜单 | 简单的悬浮提示效果 |
| 6 | 侧滑菜单栏显隐按钮 | 按钮宽度动态变化，图标动态旋转 |
| 7 | 侧滑功能窗口 | 窗口位置动态变化，形成左/右侧边滑动效果 |
| 8 | 侧滑功能窗口功能项 | 常态阴影、悬浮态高亮效果 |
UI提示菜单代码
1、UML类图
2、代码
ToolTipButtonBase基类，提供信息位置类型设置、提示信息文本和提示信息三态图片设置；
enterEvent事件和leaveEvent事件负责设置提示信息的显隐，paintEvent事件负责绘图。
#pragma once/** 思维导图-提示按钮基类*/#include <QPushButton>class ToolTipButtonBase : public QPushButton
{
public:enum PositionType{RIGHT, // 右侧BOTTOM, // 下侧LEFT, // 左侧TOP // 上侧 };ToolTipButtonBase(QWidget *parent = nullptr);virtual ~ToolTipButtonBase();// 获取提示信息位置类型PositionType positionType();// 设置图片void setPixmap(const QPixmap &pixmap, const QPixmap &hoverPixmap, const QPixmap &disablePixmap);// 设置提示信息文本和位置类型void setToolTip(const QString &text, PositionType posType);protected:virtual void paintEvent(QPaintEvent *event) override;virtual void enterEvent(QEvent *event) override;virtual void leaveEvent(QEvent *event) override;protected:QString m_toolTip; // 提示信息文本PositionType m_posType; // 提示信息位置QPixmap m_pixmap; // 常态图片QPixmap m_hoverPixmap; // 悬浮态图片QPixmap m_disablePixmap; // 禁用态图片QColor m_color; // 文本颜色QColor m_hoverColor; // 文本悬浮颜色QColor m_disableColor; // 文本禁用颜色QColor m_bgColor; // 背景颜色QColor m_bgHoverColor; // 背景悬浮颜色QColor m_bgDisableColor; // 背景禁用颜色bool m_hover; // 悬浮bool m_disable; // 使能状态
};
#include "ToolTipButtonBase.h"
#include "../ToolTip/FuncToolTip.h"
#include <QPainter>ToolTipButtonBase::ToolTipButtonBase(QWidget *parent /*= nullptr*/): QPushButton(parent)
{m_posType = RIGHT; // 提示信息位置m_color = QColor(51, 51, 51); // 文本颜色m_hoverColor = QColor(57, 130, 252); // 文本悬浮颜色m_disableColor = QColor("#bfbfbf"); // 文本禁用颜色m_bgColor = Qt::white; // 背景颜色m_bgHoverColor = QColor(238, 244, 255); // 背景悬浮颜色m_bgDisableColor = Qt::white; // 背景禁用颜色m_hover = false; // 悬浮m_disable = false; // 使能状态
}ToolTipButtonBase::~ToolTipButtonBase()
{}ToolTipButtonBase::PositionType ToolTipButtonBase::positionType()
{return m_posType;
}void ToolTipButtonBase::setPixmap(const QPixmap &pixmap, const QPixmap &hoverPixmap, const QPixmap &disablePixmap)
{m_pixmap = pixmap;m_hoverPixmap = hoverPixmap;m_disablePixmap = disablePixmap;update();
}void ToolTipButtonBase::setToolTip(const QString &text, PositionType posType)
{m_toolTip = text;m_posType = posType;FuncToolTip::setToolTipVisible(false); // ①FuncToolTip::setToolTipInfo(this, m_toolTip);FuncToolTip::setToolTipVisible(true); // ②update();// 备注：若不设置①②两行代码，则提示窗口不更新文本。。。
}void ToolTipButtonBase::paintEvent(QPaintEvent *event)
{int width = this->width();int height = this->height();QPainter painter(this);painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);// 绘制背景painter.setPen(Qt::NoPen);painter.setBrush(!isEnabled() ? m_bgDisableColor : (m_hover ? m_bgHoverColor : m_bgColor));painter.drawRect(rect());// 绘制图片painter.drawPixmap(width * 0.3, height * 0.16, width * 0.4, height * 0.34, !isEnabled() ? m_disablePixmap : (m_hover ? m_hoverPixmap : m_pixmap));// 绘制文本painter.setPen(QPen(!isEnabled() ? m_disableColor : (m_hover ? m_hoverColor : m_color)));painter.drawText(QRect(0, height * 0.62, width, height * 0.26), Qt::AlignCenter, text());
}void ToolTipButtonBase::enterEvent(QEvent *event)
{m_hover = true;FuncToolTip::setToolTipInfo(this, m_toolTip);FuncToolTip::setToolTipVisible(true);
}void ToolTipButtonBase::leaveEvent(QEvent *event)
{m_hover = false;FuncToolTip::setToolTipVisible(false);
}
简约提示菜单
#pragma once/** 思维导图-菜单功能提示按钮*/#include "../FuncWidget/ToolTipButtonBase.h"class MenuToolTipButton : public ToolTipButtonBase
{
public:MenuToolTipButton(QWidget *parent = nullptr);~MenuToolTipButton();void setPixmap(const QPixmap &pixmap);protected:virtual void paintEvent(QPaintEvent *event) override;
};
#include "MenuToolTipButton.h"
#include <QPainter>MenuToolTipButton::MenuToolTipButton(QWidget *parent /*= nullptr*/): ToolTipButtonBase(parent)
{m_bgHoverColor = QColor(243, 243, 243);m_bgDisableColor = Qt::white;
}MenuToolTipButton::~MenuToolTipButton()
{}void MenuToolTipButton::setPixmap(const QPixmap &pixmap)
{m_pixmap = pixmap;update();
}void MenuToolTipButton::paintEvent(QPaintEvent *event)
{int width = this->width();int height = this->height();QPainter painter(this);painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);// 绘制背景painter.setPen(Qt::NoPen);painter.setBrush(m_hover ? m_bgHoverColor : m_bgColor);painter.drawRect(rect());// 绘制图片painter.drawPixmap(width * 0.3, height * 0.16, width * 0.4, height * 0.34, m_pixmap);// 绘制文本painter.setPen(QPen(m_disable ? m_disableColor : m_color));painter.drawText(QRect(0, height * 0.62, width, height * 0.26), Qt::AlignCenter, text());
}
选中提示菜单
#pragma once/** 思维导图-菜单功能提示：状态选中按钮*/#include "MenuToolTipButton.h"class MenuToolTipCheckButton : public MenuToolTipButton
{
public:MenuToolTipCheckButton(QWidget *parent = nullptr);~MenuToolTipCheckButton();void setPixmap(const QPixmap &pixmap, const QPixmap &checkedPixmap);protected:virtual void paintEvent(QPaintEvent *event) override;
};
#include "MenuToolTipCheckButton.h"
#include <QPainter>MenuToolTipCheckButton::MenuToolTipCheckButton(QWidget *parent /*= nullptr*/): MenuToolTipButton(parent)
{}MenuToolTipCheckButton::~MenuToolTipCheckButton()
{}void MenuToolTipCheckButton::setPixmap(const QPixmap &pixmap, const QPixmap &checkedPixmap)
{m_pixmap = pixmap;m_hoverPixmap = checkedPixmap;update();
}void MenuToolTipCheckButton::paintEvent(QPaintEvent *event)
{int width = this->width();int height = this->height();QPainter painter(this);painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);// 绘制背景painter.setPen(Qt::NoPen);painter.setBrush(m_hover ? m_bgHoverColor : m_bgColor);painter.drawRect(rect());// 绘制图片painter.drawPixmap(width * 0.3, height * 0.16, width * 0.4, height * 0.34, isChecked() ? m_hoverPixmap : m_pixmap);// 绘制文本painter.setPen(QPen(isChecked() ? m_hoverColor : m_color));painter.drawText(QRect(0, height * 0.62, width, height * 0.26), Qt::AlignCenter, text());
}
切换提示菜单
#pragma once/** 思维导图-菜单功能提示：文本切换按钮*/#include "MenuToolTipButton.h"class MenuToolTipChangeButton : public MenuToolTipButton
{
public:MenuToolTipChangeButton(QWidget *parent = nullptr);~MenuToolTipChangeButton();void setButtonText(const QString &text, const QString &changeText);void setPixmap(const QPixmap &pixmap, const QPixmap &changePixmap);void change();bool changed();protected:virtual void paintEvent(QPaintEvent *event) override;private:QString m_text; // 文本QString m_changeText; // 切换文本bool m_change; // 切换
};
#include "MenuToolTipChangeButton.h"
#include "../ToolTip/FuncToolTip.h"
#include <QPainter>MenuToolTipChangeButton::MenuToolTipChangeButton(QWidget *parent /*= nullptr*/): MenuToolTipButton(parent)
{m_change = false; // 切换connect(this, &QPushButton::clicked, this, [&]() {m_change = !m_change;setToolTip(m_change ? m_changeText : m_text, m_posType);update();});
}MenuToolTipChangeButton::~MenuToolTipChangeButton()
{}void MenuToolTipChangeButton::setButtonText(const QString &text, const QString &changeText)
{m_text = text;m_changeText = changeText;update();
}void MenuToolTipChangeButton::setPixmap(const QPixmap &pixmap, const QPixmap &changePixmap)
{m_pixmap = pixmap;m_hoverPixmap = changePixmap;
}void MenuToolTipChangeButton::change()
{m_change = !m_change;setToolTip(m_change ? m_changeText : m_text, m_posType);FuncToolTip::setToolTipVisible(false);
}bool MenuToolTipChangeButton::changed()
{return m_change;
}void MenuToolTipChangeButton::paintEvent(QPaintEvent *event)
{int width = this->width();int height = this->height();QPainter painter(this);painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);// 绘制背景painter.setPen(Qt::NoPen);painter.setBrush(m_hover ? m_bgHoverColor : m_bgColor);painter.drawRect(rect());// 绘制图片painter.drawPixmap(width * 0.3, height * 0.16, width * 0.4, height * 0.34, m_change ? m_hoverPixmap : m_pixmap);// 绘制文本painter.setPen(QPen(m_disable ? m_disableColor : m_color));painter.drawText(QRect(0, height * 0.62, width, height * 0.26), Qt::AlignCenter, m_change ? m_changeText : m_text);
}
Qt实现思维导图功能（二）相关推荐
- Qt实现思维导图功能（三）
前文链接:Qt实现思维导图功能(二) 思维导图文件导入与导出 本文主要涉及文件拖拽窗口的实现和CRC32校验码的生成方法 百度网盘体验地址: 链接:https://pan.baidu.com/s/1Z ...
- Qt之使用GraphicsView框架实现思维导图功能
一.简述 我们常见的思维导图类型XMind软件,功能十分强大,提供了各式各样的导图样式.形式,那我们可以用Qt实现思维导图的功能吗,答案肯定是可以的,用图说明. 1.静态方式 读取本地数据的方式进行展 ...
- 思维导图（二）：绘制规则
思维导图有其自身的规则和技巧,对于初学者来说,掌握这些规则和技巧是非常必要的.只有在理解并熟练掌握这些技巧之后,绘图者才可以根据自己的意愿去发展属于自己的思维导图技巧和规则. 关键词使用规则 规则 1 ...
- 【前端GUI】——网站设计的重要知识点总结思维导图（二）
[前端GUI]--网站设计的重要知识点总结&思维导图(二) 前言:设计具有艺术性,但与艺术不同,艺术的服务对象是画家本人,设计的服务对象是用户.在网站设计中设计者要学会合理利用"眼眺 ...
- 计算机网络基础知识总结及思维导图（二）物理层
文章目录 二.物理层 2.1 基本概念 2.2 物理层下面的传输媒体 2.2.1 导引型传输媒体 2.2.2 非导引型传输媒体 2.3 信道复用技术 2.4 宽带接入技术 思维导图 二.物理层 2.1 ...
- JavaScript学习思维导图（二）
这是我在学习JavaScript时做的思维导图,用的wps做的思维导图,导出图片,因为不是会员,所以带有水印,仅供参考,谢谢. 1.JavaScript 中的Math,Date,定时器 2.JavaS ...
- 【MySQL】数据安全性讨论思维导图
一 前言 和团队内部的同事一起沟通,讨论了MySQL 数据库系统数据安全性问题,主要针对MySQL丢数据库的场景 ,主从不一致的场景 ,还有业务层面使用不得当导致主备库数据结构不一样的情况, ...
- linux账号和权限管理思维导图,Linux系统支持的思维导图软件有哪些？
原标题:Linux系统支持的思维导图软件有哪些? 思维导图是一种把抽象概念图像化的思维方式,对于打破惯性思维,锻炼全局思考观念,开发大脑潜能都有非常好的效果.如今思维导图日益流行,可依旧有些看官对思维 ...
- XMind 2022 for Mac(思维导图软件)V12.0.3中文免费版
最近新发现的免费MAC站 macbv 站推荐(com 前言 XMind 2022已经是我们日常都会用到的一款思维导图的软件了,下文就是对Xmind的一些介绍 一.XMind for mac是什么? 它 ...
最新文章
- 1024 | 不加班，带你们一起薅当当的羊毛！
- 《预训练周刊》第27期：谷歌发布最新看图说话模型、GitHub：平台上30%的新代码受益于AI助手Copilot...
- 云计算之路：数据库迁移方案
- java 依赖算法_java – Maven 2 – 从传递依赖版本定义依赖版本
- Scala数组遍历：使用for和foreach
- Android代码片段:设备信息
- 高级php面试题及部分答案
- Leetcode--424. 替换后的最长重复字符
- 排序算法—归并排序（思维导图思路整理）
- Mysql replace 与 insert on duplicate效率分析
- 快闪ppt音乐_冬日午后南昌路，音乐快闪引人驻足
- 计算机及信息系统管理规范,系统运维管理 计算机信息系统运营和维护管理规范方案.doc...
- IE5的兼容问题——记录给自己看的
- ESP32 WIFI MESH 网络个人学习笔记整理
- 2015年11月27日 野外生存（一）刀
- 【Mac版word转PPT技巧】谁说Word转PPT在Mac电脑中不能实现？
- 谷歌开发者大会焦点：TensorFlow.js可制作微信小程序，Android 10原生支持5G，TF2.0大更新...
- 【面试-八股文】万字app测试 面试题，助你吊打面试官系列
- printf(%s\n,*s);与printf(%s\n,s);的区别
- 2018一瞬即逝，奋斗的日子也需要停下来，总结反思，2019也许不会更好，但不会差。