QT图形视图系统 - 使用一个项目来学习QT的图形视图框架 - 终篇

这篇具有很好参考价值的文章主要介绍了QT图形视图系统 - 使用一个项目来学习QT的图形视图框架 - 终篇。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

QT图形视图系统 - 终篇

接上一篇,我们需要继续完成以下的效果;

先上个效果图:
资源路径:https://download.csdn.net/download/turbolove/88192114?spm=1001.2014.3001.5503

QT图形视图系统 - 使用一个项目来学习QT的图形视图框架 - 终篇,QT日常,qt,学习,开发语言

修改背景,使之整体适配

上一篇我们绘制了标尺,并且我们修改了放大缩小和对应的背景,整体看来,我们的滚动条会和背景不搭配,因此我们需要修改我们的背景,这里使用qss修改;并且我们把之前的背景也写到这个里面。

style1.qss

QGraphicsView
{
    background: #000000;
}

QScrollBar:horizontal {
    border: none;
    background: #000000;
    height: 15px;
}
QScrollBar::handle:horizontal {
    background: white;
    min-width: 20px;
}
QScrollBar::add-line:horizontal {
    border: none;
    background: #000000;
    width: 0px;
}

QScrollBar::sub-line:horizontal {
    border: none;
    background: #000000;
    width: 0px;
    subcontrol-position: left;
    subcontrol-origin: margin;
}
/*QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {*/
/*    border: 2px solid grey;*/
/*    width: 3px;*/
/*    height: 3px;*/
/*    background: white;*/
/*}*/

QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
    background: none;
}

QScrollBar:vertical {
    border: none;
    background: #000000;
    width: 15px;
    border-bottom: 1px solid red;
}
QScrollBar::handle:vertical {
    background: white;
    min-height: 20px;
}
QScrollBar::add-line:vertical {
    border: none;
    background: #000000;
    height: 0px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}

QScrollBar::sub-line:vertical {
    border: none;
    background: #000000;
    height: 0px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}
QScrollBar:up-arrow:vertical, QScrollBar::down-arrow:vertical {
    border: 2px solid grey;
    width: 3px;
    height: 3px;
    background: white;
}

QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    background: none;
}

然后我们加载这个qss即可, 将之前设置qss的地方修改成读取这个文件

QFile file(":/resources/qss/style1.qss");
file.open(QIODevice::ReadOnly);
// 设置软件背景色
setStyleSheet(QString(file.readAll()));
file.close();

绘制对应刻度的线条

QGraphicsView有两个函数,一个是绘制背景色,一个是绘制前景色。我们的样条实际上绘制的是背景色,因此我们需要重写这两个函数;

void drawForeground(QPainter* painter, const QRectF& rect) override;
void drawBackground(QPainter* painter, const QRectF& rect) override;

去掉之前再scene中添加的文字,我们接下来开始绘制

背景没有什么好说的,直接绘制成黑色的就可以

void GraphicsView::drawBackground(QPainter *painter, const QRectF &rect)
{
    painter->fillRect(rect, Qt::black);
    // QGraphicsView::drawBackground(painter, rect);
}

接下来我们通过前景色来绘制刻度线

constexpr int32_t uScale = 100000;
constexpr double dScale = 1.0 / uScale;
static std::unordered_map<int, int> gridLinesX, gridLinesY;

void GraphicsView::drawForeground(QPainter *painter, const QRectF &rect)
{
    // fixme 这个地方需要修改成按照单位转换的
    double scale =  pow(10.0, ceil(log10(8.0 / h_ruler_->zoom())));
    double lineWidth {0};
    gridLinesX.clear(), gridLinesY.clear();
    const QColor color[4] {
            {255, 0, 0, 127}, // 0处使用红色绘制
            QColor(100, 100, 100, 50),  // Grid1
            QColor(100, 100, 100, 150), // Grid5
            QColor(100, 100, 100, 255), // Grid10
    };

    double y, x;
    draw(scale * 0.1, rect, x, y);
    draw(scale * 0.5, rect, x, y);
    draw(scale * 1.0, rect, x, y);

    gridLinesX[0] = 0;
    gridLinesY[0] = 0;

    static QVector<QLineF> lines[4];
    for (auto&& vec : lines)
        vec.clear();
    double tmp {};
    for (auto [x, colorIndex] : gridLinesX) {
        tmp = x * dScale;
        lines[colorIndex].push_back(QLineF(tmp, rect.top(), tmp, rect.bottom()));
    }
    for (auto [y, colorIndex] : gridLinesY) {
        tmp = y * dScale;
        lines[colorIndex].push_back(QLineF(rect.left(), tmp, rect.right(), tmp));
    }
    painter->save();
    painter->setRenderHint(QPainter::Antialiasing, false);
    int colorIndex {};
    for (auto&& vec : lines) {
        painter->setPen({color[colorIndex++], lineWidth});
        painter->drawLines(vec.data(), vec.size());
    }
    auto width { rect.width() };
    auto height { rect.height() };
    painter->setPen({Qt::yellow, 0.0});
    painter->drawLine(QLineF {point_.x() - width, point_.y(), point_.x() + width, point_.y()});
    painter->drawLine(QLineF {point_.x(), point_.y() - height, point_.x(), point_.y() + height});

    painter->restore();
}


void GraphicsView::draw(double sc, const QRectF& rect, double &x, double &y)
{
    if (sc >= 1.0) {
        int top = floor(rect.top());
        int left = floor(rect.left());
        y = top - top % int(sc);
        x = left - left % int(sc);
    } else {
        const double k = 1.0 / sc;
        int top = floor(rect.top()) * k;
        int left = floor(rect.left()) * k;
        y = (top - top % int(k)) / k;
        x = (left - left % int(k)) / k;
    }

    for (const auto end_ = rect.bottom(); y < end_; y += sc)
        ++gridLinesY[ceil(y * uScale)];

    for (const auto end_ = rect.right(); x < end_; x += sc)
        ++gridLinesX[ceil(x * uScale)];
}

这样我们便有了网格线

下面的函数是对ruler和鼠标移动时候的操作

void GraphicsView::updateRuler()
{
    updateSceneRect(QRectF()); //
    QPoint p = mapFromScene(QPointF());
    v_ruler_->setOrigin(p.y());
    h_ruler_->setOrigin(p.x());
    v_ruler_->setRulerZoom(qAbs(transform().m22() * 0.1));
    h_ruler_->setRulerZoom(qAbs(transform().m11() * 0.1));
    update();
}

void GraphicsView::mouseMoveEvent(QMouseEvent *event)
{
    QGraphicsView::mouseMoveEvent(event);
    v_ruler_->setCursorPos(event->pos());
    h_ruler_->setCursorPos(event->pos());
    point_ = mapToScene(event->pos());
    emit sig_mouseMove(event->pos());
    update();
}

我们之前对鼠标样式进行了修改,这个里面也不要忘记将View中的鼠标修改成十字
展示的是主要代码,并不是全部代码,如果需要全部代码请联系博主获取文章来源地址https://www.toymoban.com/news/detail-636370.html

到了这里,关于QT图形视图系统 - 使用一个项目来学习QT的图形视图框架 - 终篇的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 界面开发框架Qt新手入门教程:Dir视图使用实例

    Qt 是目前最先进、最完整的跨平台C++开发工具。它不仅完全实现了一次编写,所有平台无差别运行,更提供了几乎所有开发过程中需要用到的工具。如今,Qt已被运用于超过70个行业、数千家企业,支持数百万设备及应用。 点击获取Qt Widget组件下载 本示例演示了树形视图的用

    2024年02月08日
    浏览(51)
  • 全志 Tina Linux 图形系统 框架介绍 最全介绍 MiniGUI、QT5、EFL、GTK+(WebkitGtk、Midori)、DirectFB、Wayland

    本文档将介绍 Allwinner Tina Linux 中已经移植好的窗口系统,以及怎么使用,包括 MiniGUI、QT5、EFL、GTK+(WebkitGtk、Midori)、DirectFB、Wayland,整体结构 如下: 适用范围:Tina Linux v3.5及以上版本。 2.1 MiniGUI说明. 目前Tina中移植了MiniGUI3.2的核心库以及其组件,下表列出MiniGUI相关包说

    2024年01月25日
    浏览(47)
  • 使用Qt Designer为您的Qt for Python项目创建基于Qt Widgets的图形界面的两种方法

    本页介绍如何使用Qt Designer为您的Qt for Python项目创建基于Qt Widgets的图形界面。Qt Designer是一个图形UI设计工具,可以作为独立的二进制文件(pyside6-designer)提供,也可以嵌入到Qt Creator IDE中。它在Qt Creator中的使用在Using Qt Designer中描述。 设计存储在.ui文件中,这是一种基于

    2024年02月07日
    浏览(48)
  • 【C++要笑着学】OpenFrameworks 框架介绍 | oF 文件结构 | 图形基础 | 使用 ProjectGenerator 创建项目

      💭 写在前面: 本章我们将介绍一个非常好用的跨平台的 C++ 开源框架 —— openFrameworks。它是一个开源的跨平台的 C++工具包,方便开发者创建出一个更简单和直观的框架,擅长开发图像和动画。     本篇博客全站热榜排名: 8 📜 本章目录: 0x00 openFrameworks 介绍 0x01 开启

    2024年02月04日
    浏览(84)
  • 【QT性能优化】QT性能优化之QT6框架高性能模型视图代理框架千万级数据表分页查询优化

    QT性能优化之QT6框架高性能模型视图代理框架千万级数据表分页查询优化 简介 本文介绍了QT模型视图代理框架中的QT表格控件和QT数据库模块中的QT数据库查询模型结合使用的一个应用实践案例:QT高性能表格控件分页展示千万行数据。本文介绍了这个应用实践案例的运行效果

    2024年02月14日
    浏览(52)
  • QT--3.创建一个简单的图形界面

    qt的移植性非常强。 1.创建一个工程 2.项目选择Application,然后选择Qt Widgets Application,最后选择choose。 注意:创建项目的名称和路径是不能有中文的!!!! 点击下一步后,就可以自动生成工程 .pro文件 点击forms,双击点击ui文件 在组件属性设计里面选择长度宽度800x600 用到的

    2024年02月03日
    浏览(52)
  • Vue框架学习记录之环境安装与第一个Vue项目

    首先是Node.js的安装,安装十分简单,只需要去官网下载安装包后,一路next即可。 Node.js是一个开源的、跨平台的 JavaScript 运行时环境 下载地址,有两个版本,一个是推荐的,一个是最新的,现在博主学习的话就直接安装最新的即可。 验证是否安装成功,只需要在cmd窗口中输

    2024年02月09日
    浏览(35)
  • WPF 使用MVVM框架创建一个项目

    步骤如下: 1、打开Visual Studio 2017(或其他版本),选择新建项目 2、选择WPF应用(.Net Framework),同时给项目命名,并选择项目存放路径,最后点击确定 3、右键点击解决方案名称,点击“管理NuGet程序包”,点击浏览,在输入框中输入mvvmlight,点击MvvmLight进行安装,安装过程

    2024年02月05日
    浏览(65)
  • [QT编程系列-3]:C++图形用户界面编程,QT框架快速入门培训 - 2- QT程序的运行框架:HelloWorld、常见控件、对象树原理

    目录 2. QT程序的运行框架 2.1 Hello World程序框架 2.2 QT Designer初识 2.3 用QT Designer设计用户登录界 上述示例代码中,首先根据应用程序的需求使用 QCoreApplication 或 QApplication 定义 app 对象。如果你的应用程序需要图形界面,则使用 QApplication,否则使用 QCoreApplication。然后,你可以

    2024年02月15日
    浏览(52)
  • QT 项目视图(QListView&QTreeView&QTableView)和项目部件(QListWidget&QTreeWidget&QTableWidget)详解

    目录 一、Qt 项目视图(Item Views)         1.QListView 2.QTreeView 3.QTableView 二、Qt 项目部件(Item Widgets) 1.QListWidget 2.QTreeWidget 3.QTableWidget 一、Qt 项目视图(Item Views)          控件名称依次解释如下: List View:清单视图 Tree View: 树视图 Table View:表视图 Column View: 列视图 Undo Vie

    2024年01月20日
    浏览(47)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包