Qt实现思维导图功能(二)

这篇具有很好参考价值的文章主要介绍了Qt实现思维导图功能(二)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前文链接:Qt实现思维导图功能1『核心树』

百度网盘体验地址:
链接:https://pan.baidu.com/s/1-be0tDJokpZeqhMEuHQntA 
提取码:4d1w
注:UI窗体风格参考软件:爱莫流程图

效果图
1、动态演示效果:
Qt实现思维导图功能(二)

2、静态展示图片:
Qt实现思维导图功能(二)
Qt实现思维导图功能(二)

前文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类图
Qt实现思维导图功能(二)
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());
}

切换提示菜单文章来源地址https://www.toymoban.com/news/detail-426568.html

#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实现思维导图功能(二)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue实现思维导图

    介绍 前景: 仿幕布实现思维导图效果 技术实现: jsmind 完整代码 :vue-jsmind 参考文章: 在vue中使用jsmind组织架构或思维导图 实现效果: 功能描述: 编辑、删除、插入、拖拽、展开/收起节点 分布结构切换(向左、向右和两边分布) 节点类型筛选 导出图片 鼠标左键拖拽 缩

    2023年04月13日
    浏览(47)
  • 【第十八节:微信小程序 常用功能-登录】微信小程序入门,以思维导图的方式展开18

    若图片看不清,可私信给五木大大要高清大图哈。      效果               wxml页面         view class=\\\"login-container\\\"nn    view class=\\\"login\\\" wx:if=\\\"{{ !logged }}\\\"nn        view class=\\\"app-info\\\"nn            image class=\\\"app-logo\\\" src=\\\"../../images/logo.png\\\" /nn            text class

    2024年01月17日
    浏览(44)
  • 使用chatgpt一分钟帮你实现思维导图

    前言 本篇基础篇课程,实操起来很简单,但却非常的实用。利用好这个功能,工作效率或能提升10倍! 本篇内容的主题:利用ChatGPT,一分钟帮你实现详尽的思维导图。 创作内容大纲 格式转化 结合Xmind 创作内容大纲 想到一个课题,然后人工梳理出内容大纲,是个挺费精力的

    2024年02月02日
    浏览(29)
  • 最新AI系统ChatGPT网站源码/支持GPT4.0/GPT联网功能/支持ai绘画/mj以图生图/支持思维导图生成

    使用Nestjs和Vue3框架技术,持续集成AI能力到系统! 同步mj图片重新生成指令 同步 Vary 指令 单张图片对比加强 Vary(Strong) | Vary(Subtle) 同步 Zoom 指令 单张图片无限缩放 Zoom out 2x | Zoom out 1.5x 新增GPT联网提问功能、签到功能 系统用户端页面 ​ ​ ​ 系统演示 源码 以下教程使用

    2024年02月14日
    浏览(43)
  • 思维导图怎么做?一份完整的思维导图绘制教程来了!

    在信息爆炸的时代,如何高效地整理和消化信息是每个人都需要面对的问题。思维导图作为一种能够高效组织和呈现信息的工具,凭借其直观、易理解的特性,备受学生、教师、企业管理者、商业团队等许多人的青睐。那么,如何制作思维导图呢?让我们一起来看看。 思维导

    2024年02月15日
    浏览(21)
  • 高等数学(下)思维导图

    2024年02月11日
    浏览(43)
  • 操作系统思维导图

    复习提纲 1.操作系统的作用 1.用户和计算机硬件系统之间的接口 2.计算机系统资源的管理者 3.实现对计算机资源的抽象 2.操作系统的种类 1.单道批处理系统 2.多道批操作系统 3.分时系统 4.实时系统 3.操作系统的基本特性 1.并发 2.并行 3.共享 1.互斥访问 2.同时访问 4.虚拟 5.异步

    2024年02月07日
    浏览(27)
  • 英语语法基础--思维导图

    思维导图通常用于可视化和整理信息,而英文语法非常广泛且复杂,无法在一个简单的思维导图中完整表示。然而,我可以提供一个简化版本的英文语法思维导图,列出一些主要的语法概念和部分示例。 请注意,这只是一个基本的概述,英文语法要复杂得多。以下是思维导图

    2024年02月09日
    浏览(31)
  • Ribbon学习思维导图

    参考资料 1、OpenFeign与Ribbon源码分析总结与面试题 2、万字剖析OpenFeign整合Ribbon实现负载均衡的原理 3、扒一扒Nacos、OpenFeign、Ribbon、loadbalancer组件协调工作的原理 4、OpenFeign原来是这么基于Ribbon来实现负载均衡的

    2024年02月03日
    浏览(41)
  • java思维导图 - -13张思维导图带你快速入门 --

    java!!!!!!!!! 13张思维导图带你快速入门 --满满干货(建议收藏) –怒肝一周,只求一赞!!! 囊括了java大部分的知识点,今天分享给大家,希望能帮助到各位友友! 分为电脑端和手机端! 手机端隐藏了部分分支,便于观看 电脑端是完整版,根据需求自行选择。

    2024年02月02日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包