Qt实现引导界面UITour

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

介绍

最近做了一款键鼠自动化,想第一次安装打开后搞一个引导界面,找了好多资料没啥参考,偶然发现qt有引导界面如下图。

Qt实现引导界面UITour,qt,开发语言

Qt整挺好,但是未找到源码,真的不想手撸,(源码找到了但是Qt整起来太复杂,没法拿来直接用,还是得撸)地地址

下图是仿照qt实现,除了qt明亮边缘的渐变其余部分均已实现,箭头完美复刻,支持上下左右。
Qt实现引导界面UITour,qt,开发语言
废话少说

直接上代码

#ifndef TOURGUIDE_H
#define TOURGUIDE_H

#include <QWidget>
#include <QPaintEvent>
#include <QPainter>
#include <QPalette>
#include <QBrush>


enum WSAD_POS {
    TOP_POS,
    DOWN_PPOS,
    LEFT_POS,
    RIGHT_POS
};
class TourGuide : public QWidget
{
    Q_OBJECT
public:
    explicit TourGuide(QWidget* w, QWidget *parent = 0);

    void onAddWidget(QWidget* w, QString title, QStringList contentList, int pos);
signals:

public slots:

protected:
    void paintEvent(QPaintEvent *event);
    void mousePressEvent(QMouseEvent *event);
private:
    //绘制箭头 WSAD绘制方向
    void drawArrows(QPainter& painter, QPoint pos, QRect rect, WSAD_POS WSAD);
private:
    QList<QWidget*> m_ListWidget;
    QList<QString> m_ListWidgetStr;
    QList<QStringList> m_ListWidgetStrList;
    QList<WSAD_POS> m_ListWidgetPos;

    int m_index = 0;

    QWidget* m_MainWindows;
    QLine targetLine;
};

#endif // TOURGUIDE_H

#include "tourguide.h"

#include <QDebug>
TourGuide::TourGuide(QWidget *w, QWidget *parent) : QWidget(parent)
{
    m_MainWindows = w;
}

void TourGuide::onAddWidget(QWidget *w, QString title, QStringList contentList, int pos)
{
    m_ListWidget << w;
    m_ListWidgetStr << title;
    m_ListWidgetStrList << contentList;

    m_ListWidgetPos << WSAD_POS(pos);
}

void TourGuide::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    if (m_index < 0 || m_index >= m_ListWidget.size())
        return;

    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);

    QWidget *currentWidget = m_ListWidget[m_index];
    if (!currentWidget)
        return;


    // 获取QWidget在主窗体的位置
    QPoint guidePos = currentWidget->mapTo(m_MainWindows, QPoint(0, 0));
    QRect rect(guidePos.x(), guidePos.y(), currentWidget->width(), currentWidget->height());
    //循环如果包含该ui就不绘制
    painter.setPen(Qt::NoPen);
    painter.setBrush(QColor(0, 0, 0, 100));

    // 当前widget的大小
    int fullWidth = this->width();
    int fullHeight = this->height();

    // 计算四周矩形区域
    QRect topRect(0, 0, fullWidth, rect.y());
    QRect bottomRect(0, rect.y() + rect.height(), fullWidth, fullHeight - (rect.y() + rect.height()));
    QRect leftRect(0, rect.y(), rect.x(), rect.height());
    QRect rightRect(rect.x() + rect.width(), rect.y(), fullWidth - (rect.x() + rect.width()), rect.height());

    // 设置笔刷
    painter.setBrush(QColor(0, 0, 0, 100));

    // 绘制四周矩形 把ui的位置进行空出来,绘制它的四个区域,仅支持规则ui,这样就不支持奇形怪状
    painter.drawRect(topRect);
    painter.drawRect(bottomRect);
    painter.drawRect(leftRect);
    painter.drawRect(rightRect);

    painter.setBrush(QColor(0, 0, 0, 0));

    QPen pen(Qt::green);

    //圈出来
    pen.setWidth(1);
    painter.setPen(pen);
    painter.drawRect(rect);

    drawArrows(painter, guidePos, currentWidget->rect(), m_ListWidgetPos.at(m_index));

    // 绘制矩形框和箭头
    // 绘制文字
    painter.setPen(Qt::white); // 设置文字颜色为白色
    QFont font = painter.font(); // 获取当前字体设置
    font.setPointSize(18); // 设置字体大小
    font.setBold(true); // 设置为粗体
    painter.setFont(font); // 应用设置后的字体
    // 获取文本的宽度和高度
    QRectF textRect = painter.boundingRect(QRectF(), Qt::AlignCenter, m_ListWidgetStr.at(m_index));

    // 计算文字应该绘制的位置,使其居中在窗口中央
    qreal x = (this->width() - textRect.width()) / 2;
    qreal y = (this->height() - textRect.height()) / 2;
    // 绘制标题文字
    painter.drawText(QPointF(x, y), m_ListWidgetStr.at(m_index));
    QStringList list = m_ListWidgetStrList.at(m_index);


    // 绘制子文字
    for (int i = 0 ; i < list.size(); ++i) {
        textRect = painter.boundingRect(QRectF(), Qt::AlignCenter, list.at(i));
        x = (this->width() - textRect.width()) / 2;
        y = (this->height() - textRect.height()) / 2 + ((i+1) * 40);
        font.setPointSize(12);
        font.setBold(false);
        painter.setFont(font); // 应用设置后的字体
        // 绘制标题文字
        painter.drawText(QPointF(x, y), list.at(i));
    }
}

void TourGuide::mousePressEvent(QMouseEvent *event)
{
    if (event->type() == QMouseEvent::MouseButtonPress) {
        this->update();
        qDebug() << m_index;
        if (m_index < m_ListWidget.size()) {
            m_index++;
        }
        else {
            this->close();
        }
    }
}

void TourGuide::drawArrows(QPainter &painter, QPoint pos, QRect rect, WSAD_POS WSAD)
{
    QPoint f1Start;
    QPoint f1Stop;
    QPoint f2Start;
    QPoint f2Stop;
    QPoint f3Start;
    QPoint f3Stop;
    if (WSAD == TOP_POS) {
        // 绘制箭头
        f1Start = QPoint(pos.x() + (rect.width() / 2), pos.y() - 5);
        f1Stop = QPoint(pos.x() + (rect.width() / 2) - 6, pos.y() - 12);
        //绘制两边的线
        f2Start = QPoint(pos.x() + (rect.width() / 2), pos.y() - 5);
        f2Stop = QPoint(pos.x() + (rect.width() / 2) + 6, pos.y() - 12);

        //绘制中间的线
        f3Start = QPoint(pos.x() + (rect.width() / 2), pos.y() - 5);
        f3Stop = QPoint(pos.x() + (rect.width() / 2), pos.y() - 20);
    }
    else if (WSAD == DOWN_PPOS) {
        // 绘制箭头
        f1Start = QPoint(pos.x() + (rect.width() / 2), pos.y() + rect.height() + 5);
        f1Stop = QPoint(pos.x() + (rect.width() / 2) - 6, pos.y() + rect.height() + 12);
        //绘制两边的线
        f2Start = QPoint(pos.x() + (rect.width() / 2), pos.y() + rect.height() + 5);
        f2Stop = QPoint(pos.x() + (rect.width() / 2) + 6, pos.y() + rect.height() + 12);

        //绘制中间的线
        f3Start = QPoint(pos.x() + (rect.width() / 2), pos.y() + rect.height() + 5);
        f3Stop = QPoint(pos.x() + (rect.width() / 2), pos.y() + rect.height() + 20);
    }
    else if (WSAD == LEFT_POS) {
        // 绘制箭头
        f1Start = QPoint(pos.x() - 5, pos.y() + (rect.height() / 2));
        f1Stop = QPoint(pos.x() - 12, pos.y() + 5);
        //绘制两边的线
        f2Start = QPoint(pos.x() - 5, pos.y() + (rect.height() / 2));
        f2Stop = QPoint(pos.x() - 12, pos.y() + (rect.height() / 2) + 6);

        //绘制中间的线
        f3Start = QPoint(pos.x() - 5, pos.y() + rect.height() / 2);
        f3Stop = QPoint(pos.x() - 20, pos.y() + rect.height() / 2);
    }
    else if (WSAD == RIGHT_POS) {
        // 绘制箭头
        f1Start = QPoint(pos.x() + rect.width() + 5, pos.y() + (rect.height() / 2));
        f1Stop = QPoint(pos.x() + rect.width() + 12, pos.y() + 5);
        //绘制两边的线
        f2Start = QPoint(pos.x() + rect.width() + 5, pos.y() + (rect.height() / 2));
        f2Stop = QPoint(pos.x() + rect.width() + 12, pos.y() + (rect.height() / 2) + 6);

        //绘制中间的线
        f3Start = QPoint(pos.x() + rect.width() + 5, pos.y() + rect.height() / 2);
        f3Stop = QPoint(pos.x() + rect.width() + 20, pos.y() + rect.height() / 2);
    }

    QPen pen(Qt::green);
    pen.setWidth(2);
    painter.setPen(pen);
    painter.drawLine(f1Start, f1Stop);
    painter.drawLine(f2Start, f2Stop);
    painter.drawLine(f3Start, f3Stop);
}


调用方式

    m_T = new TourGuide(this, this);
    m_T->onAddWidget(ui->pushButton, "这是第1个按钮", QStringList() << "他是第1个", 0);
    m_T->onAddWidget(ui->pushButton_2, "这是第2个按钮", QStringList() << "他是第2个", 1);
    m_T->onAddWidget(ui->pushButton_3, "这是第3个按钮", QStringList() << "他是第3个", 2);
    m_T->onAddWidget(ui->pushButton_4, "这是第4个按钮", QStringList() << "他是第4个", 3);
    m_T->setFixedSize(this->size());

1.优化半透明色绘制,由于前期采用双for循环绘制,导致刷新效率降低,现采用计算四周区域进行绘制,但是这样会带来仅支持规则区域,正方形,长方形,如果是不规则ui还得用for循环来判断,如果想实现那就要再写个算法来优化,例如如果是圆形那就计算出它的四边区域位置然后将他空出一个正方形然后进行for循环修补。文章来源地址https://www.toymoban.com/news/detail-621908.html

到了这里,关于Qt实现引导界面UITour的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 16-3_Qt 5.9 C++开发指南_使用QStyle 设置界面外观_实现不同系统下的界面效果的匹配

    Qt 是一个跨平台的类库,相同的界面组件在不同的操作系统上显示效果是不一样的。QStyle是封装了 GUI 界面组件外观的抽象类,Qt 定义了 QStyle 类的一些子类,应用于不同的操作系统如QWindowsStyle和QMacStyle 等。这些样式是 QtGUI 模块自带的,在不同的平台上编译运行的程序具有缺

    2024年02月13日
    浏览(52)
  • QT界面开发杂记(五)

    QString转char* c_str()没有‘\\0’结尾可能导致一些错误可以使用以下方法解决: QString xmlPath = \\\"path\\\"; const char cXmlName[1024] = {0}; memcpy((void*)cXmlName,xmlPath.toStdString().c_str(),xmlPath.size()); char*转QString  

    2024年02月04日
    浏览(68)
  • 使用Qt开发一个登录界面

    在许多应用程序中,我们需要提供一个登录界面来让用户输入用户名和密码,并验证其身份。在本文中,我们将介绍如何使用Qt创建一个简单的登录界面,并演示如何获取用户输入和执行身份验证操作。 首先,我们需要创建一个QWidget部件,并设置其布局为垂直布局。然后,我

    2024年02月13日
    浏览(39)
  • 【Qt设计开发】GUI界面设计开发

      本文是我在学习QT的GUI界面设计过程当中的心得和学习笔记,在学习时已经有C, C++,Python的基础。文章附上了学习的代码,仅供大家参考。如果有问题,有错误欢迎大家留言。此外,博主还有另外几篇文章,分别关于 Python基础知识 、 Python的具体应用 、 C语言指针结构体

    2024年02月02日
    浏览(51)
  • qt图形化界面开发DAY4

    2024年01月23日
    浏览(34)
  • 界面开发框架Qt - 组合小部件映射器示例

    Qt 是目前最先进、最完整的跨平台C++开发工具。它不仅完全实现了一次编写,所有平台无差别运行,更提供了几乎所有开发过程中需要用到的工具。如今,Qt已被运用于超过70个行业、数千家企业,支持数百万设备及应用。 Combo Widget Mapper(组合小部件映射器)示例展示了如何

    2023年04月14日
    浏览(46)
  • 【QT开发专题-天气预报】16.更新 UI 界面

    本专栏将会在未来 4 个月内,完成以下几个 Qt 项目: 《天气预报》 《文本编辑器》 《俄罗斯方块》 《绘图板》 《网络聊天室》 《串口助手》 完成时间预计在 2022-12-31 ,文章数目在 50 篇左右,更新完毕之后,价格恢复到 ¥299 专栏优势: 每个项目都是从零新建工程开始

    2023年04月08日
    浏览(66)
  • YOLOv5+QT5界面应用开发

    YOLOv5+QT5的UI界面开发 最终界面图: 本文章基于python3.7的Annaconda中虚拟环境开发: 1.1 配置YOLOv5环境 https://github.com/ultralytics/yolov5 下载yolov5程序后,虚拟环境下运行: activate v5 pip install -r requirements.txt 1.2 配置QT环境 pip install pyqt5 pyqt5-tools 使用pyqt5自带的图形界面设计工具:de

    2023年04月19日
    浏览(45)
  • QT QPluginLoader 插件开发 ui界面打包dll

     将项目模块化,每一个模块单独开发,模块的组成形成最终的主程序, 点击左侧按钮就会弹出对应的插件应用,每一个子窗口都是单独的dll 插件, 灵活,升级,下载,卸载。 效果:     打开QT Creator 新建插件开发项目  下一步后选择 Qt Plugin 开发 添加依赖库,在.pro里  

    2024年02月11日
    浏览(44)
  • qt 实现登录界面

       

    2024年01月23日
    浏览(43)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包