qt5-入门-2D绘图-Graphics View 架构

参考：
Qt Graphics View Framework_w3cschool
https://www.w3cschool.cn/learnroadqt/4mvj1j53.html

C++ GUI Programming with Qt 4, Second Edition

本地环境：
win10专业版，64位，Qt 5.12

基础知识

QPainter比较适合少量绘图的情况，如果一个图里包含成千上百个单元，同时要让用户可以点击、拖动、选择，那么应该使用grahics view。
这个架构包含：一个scene（对应QGraphicsScene类），里面包含很多item（对应QGraphicsItem类）。用户要看到这个scene，需要借助view（对应QGraphicsView类）。一个scene可以对应多个view，比如不同的view可以看到scene的不同部分，或者不同的view可以看到经过不同transformation后的scene。如下图所示：
在这里插入图片描述
一个scene包含三层：foreground layer, background layer和item layer。前两个可以用QBrush修改，也可以通过重写drawBackground()和drawForeground()实现完全的控制。举个例子，如果我们想用一个pixmap作为背景，那可以用QBrush制作一个基于这个pixmap的纹理。

scene可以告诉我们哪些item冲突了，哪些被选择了，或者哪些在哪里这样的信息。item也可以嵌套，此时如果对这个item做transformation，那么它包含的item也会自动被transform。

graphics view架构提供了两种item分组方式：1是前面提到的嵌套，就是让一个item是另一个item的孩子；2是使用QGraphicsItemGroup，加入group的item不会像嵌套一样传递transformation，它们每一个都像独立的个体（类似集合？）

item有预定义的（见下图），也可以重写。
在这里插入图片描述

QGraphicsView实际是一个组件（widget），提供滚动条（如果需要），并且通过transformation改变scene的呈现效果。它默认使用Qt内置的2D绘制引擎，但是也可以用OpenGL组件（构造后调用setViewport()，用到再写）。

graphics view架构使用三种坐标系：（同时提供了三种坐标系互转的函数）

  • viewport坐标系：QGraphicsView的viewport
  • scene坐标系：是逻辑坐标系，用来放置scene顶层的item
  • item坐标系：只与item相关，用来放置子item和绘制item
    在实际操作中，我们通常只关心后两个坐标系。

简单例子

如下图所示，在窗口中绘制一条线，无论怎么放缩窗口，这条线始终居中。如果使用QPainter来画，保持居中就需要一些计算，但是用graphics view架构，代码非常短，也没有计算。
在这里插入图片描述

#include <QGraphicsScene>
#include <QGraphicsView>

QGraphicsScene *scene = new QGraphicsScene;
scene->addLine(10, 10, 150, 300);
QGraphicsView *view = new QGraphicsView(scene);
view->resize(500, 500);
view->setWindowTitle("Graphics View");
view->show();

进阶例子：自定义item

效果

在这里插入图片描述
在这里插入图片描述

例子来自ch8-Item-Based Rendering with Graphics View-diagram（实在找不到书和代码的可以私信我，虽然我觉得挺好找的）。大概是构造一个软件，用户可以放置一些Node，并且彼此相连，同时可以拖动上面的元素，并且设置一些属性。

知识储备

  • QGraphicsLineItem不是QObject的子类，如果要添加信号需要另外继承QObject（多继承）
  • graphics-view架构使用bounding rectangle技术。通过这个，可以判断某个点是否在item只中，也可以判断两个item是否碰撞，或者某个item是否需要被绘制（如果scene很大，当只需要绘制一部分时，如果某个item不在可视范围，那通过这个矩形是可以快速判断的，从而提升效率）
  • 因此如果要完全自定义item，需要重新实现boundingRect()和paint()（也许还有shape()） 。其中shape是比boundingrect更精确的形状，可以应对细粒度碰撞检测（fine-grained collision detection）的情况，特别是当外形是圆角矩形时。比如如果重写了shape()，那么当点击夹在shape和bounding rectangle之间的区域时，是不会选中item的。也可以不重写它。
  • 根据前面的知识可知，如果图形要重绘需要调用update()，那么如果bounding rectangle可能会改变，就要调用prepareGeometryChange()

设计思路

此处不展开完整的实现，只说明文档结构。
在这里插入图片描述
link是两个node之间的连线，也是最简单的item，因为只需要考虑起点、终点和线条颜色（线宽默认），所以使用QGraphicsLineItem的一些函数就可以写好。Node是包含文字的圆角矩形框，需要完整地绘制，包括bounding rectangle，也包括一些互动（双击快速修改文字，修改属性）。propertiesdialog是属性设置窗口，写的是窗口上那些按钮的响应。最后diagramwindow就是主窗口，写的是主窗口上那些工具的布局、QAction和元素的初始化等。

实现

这里只展示 Node 和 Link。

Link

#ifndef LINK_H
#define LINK_H

#include <QGraphicsLineItem>

QT_BEGIN_NAMESPACE
class Node;
QT_END_NAMESPACE

// QGraphicsLineItem不是QObject的子类，如果要添加信号需要另外继承QObject
// 不用额外的QColor变量记录颜色是因为颜色设置很简单,只是用一下QPen
class Link : public QGraphicsLineItem
{
public:
    Link(Node *fromNode, Node *toNode);
    ~Link();
    // 获取两个端点
    Node *fromNode() const;
    Node *toNode() const;
    // 线的颜色
    void setColor(const QColor &color);
    QColor color() const;
    // 连线操作
    void trackNodes();

private:
    Node *myFromNode;
    Node *myToNode;
};

#endif

// -------------------------------------------------------

#include <QtWidgets>

#include "link.h"
#include "node.h"

Link::Link(Node *fromNode, Node *toNode)
{
    myFromNode = fromNode;
    myToNode = toNode;

    myFromNode->addLink(this);
    myToNode->addLink(this);
    // 选中是为了可以删除
    setFlags(QGraphicsItem::ItemIsSelectable);
    // z表示离窗口的远近,-1就是放在两个node下面，这样虽然是
    // 连接两个Node中心，但是看起来好像连接的是两个最近的边缘一样
    setZValue(-1);
    // 设置线的颜色
    setColor(Qt::darkRed);
    // 连线
    trackNodes();
}

Link::~Link()
{
    myFromNode->removeLink(this);
    myToNode->removeLink(this);
}

Node *Link::fromNode() const
{
    return myFromNode;
}

Node *Link::toNode() const
{
    return myToNode;
}

void Link::setColor(const QColor &color)
{
    // 1.0是线宽
    setPen(QPen(color, 1.0));
}

QColor Link::color() const
{
    return pen().color();
}

void Link::trackNodes()
{
    /* QGraphicsLineItem::pos()返回的是相对于父的坐标，这个父可以是
     * scene(如果这个item是top-level的),也可以是item(嵌套的情况)
     * QLineF是创建一条2D线段
     * QGraphicsLineItem::setLine
    */
    setLine(QLineF(myFromNode->pos(), myToNode->pos()));
}

Node

#ifndef NODE_H
#define NODE_H

#include <QApplication>
#include <QColor>
#include <QGraphicsItem>
#include <QSet>

QT_BEGIN_NAMESPACE
class Link;
QT_END_NAMESPACE

class Node : public QGraphicsItem
{
    // 允许用tr(),不用再写QObject::tr()或者QCoreApplication::translate()
    Q_DECLARE_TR_FUNCTIONS(Node)

public:
    Node();
    ~Node();
    // 一些setter, getter
    void setText(const QString &text);
    QString text() const;
    void setTextColor(const QColor &color);
    QColor textColor() const;
    void setOutlineColor(const QColor &color);
    QColor outlineColor() const;
    void setBackgroundColor(const QColor &color);
    QColor backgroundColor() const;

    void addLink(Link *link);
    void removeLink(Link *link);

    QRectF boundingRect() const;
    QPainterPath shape() const;
    void paint(QPainter *painter,
               const QStyleOptionGraphicsItem *option, QWidget *widget);

protected:
    // 双击以快速修改text
    void mouseDoubleClickEvent(QGraphicsSceneMouseEvent *event);
    // 处理node被移动的情况，此时需要更新相关的Link
    // itemChange是在图形项的任何属性变化时都会被调用，而 mouseMoveEvent 只在鼠标移动时才会触发
    QVariant itemChange(GraphicsItemChange change,
                        const QVariant &value);

private:
    QRectF outlineRect() const;
    int roundness(double size) const;

    QSet<Link *> myLinks;
    QString myText;
    QColor myTextColor;
    QColor myBackgroundColor;
    QColor myOutlineColor;
};

#endif

// -------------------------------------------------------

#include <QtWidgets>

#include "link.h"
#include "node.h"

Node::Node()
{
    myTextColor = Qt::darkGreen;
    myOutlineColor = Qt::darkBlue;
    myBackgroundColor = Qt::white;

    setFlags(ItemIsMovable | ItemIsSelectable);
}

Node::~Node()
{
    // 删除node时候要删掉所有关联的link
    foreach (Link *link, myLinks)
        delete link;
}

void Node::setText(const QString &text)
{
    // 表示bounding rectangle可能会改变
    prepareGeometryChange();
    myText = text;
    // 重绘
    update();
}

QString Node::text() const
{
    return myText;
}

// color类的setter getter就不展示了，注意setter需要调用update()重绘

void Node::addLink(Link *link)
{
    myLinks.insert(link);
}

void Node::removeLink(Link *link)
{
    myLinks.remove(link);
}

QRectF Node::boundingRect() const
{
    const int Margin = 1;
    // 左上右下
    // 表示对outlineRect()返回的矩形进行调整，向左、上、右、下各移动Margin像素
    // margin的取值应该至少是pen宽度的一半
    return outlineRect().adjusted(-Margin, -Margin, +Margin, +Margin);
}

QPainterPath Node::shape() const
{
    QRectF rect = outlineRect();

    QPainterPath path;
    path.addRoundRect(rect, roundness(rect.width()),
                      roundness(rect.height()));
    return path;
}

void Node::paint(QPainter *painter,
                 const QStyleOptionGraphicsItem *option,
                 QWidget * /* widget */)
{
    QPen pen(myOutlineColor);
    if (option->state & QStyle::State_Selected) {
        pen.setStyle(Qt::DotLine);
        pen.setWidth(2);
    }
    painter->setPen(pen);
    painter->setBrush(myBackgroundColor);

    QRectF rect = outlineRect();
    painter->drawRoundRect(rect, roundness(rect.width()),
                           roundness(rect.height()));

    painter->setPen(myTextColor);
    painter->drawText(rect, Qt::AlignCenter, myText);
}

void Node::mouseDoubleClickEvent(QGraphicsSceneMouseEvent *event)
{
    QString text = QInputDialog::getText(event->widget(),
                           tr("Edit Text"), tr("Enter new text:"),
                           QLineEdit::Normal, myText);
    if (!text.isEmpty())
        setText(text);
}

QVariant Node::itemChange(GraphicsItemChange change,
                          const QVariant &value)
{
    // 每次拖动Node，位置就发生变化了，此时需要重新画线
    if (change == ItemPositionHasChanged) {
        foreach (Link *link, myLinks)
            link->trackNodes();
    }
    return QGraphicsItem::itemChange(change, value);
}

QRectF Node::outlineRect() const
{
    const int Padding = 8;
    QFontMetricsF metrics = static_cast<QFontMetricsF>(qApp->font());
    QRectF rect = metrics.boundingRect(myText);
    rect.adjust(-Padding, -Padding, +Padding, +Padding);
    // 转换坐标是为了让text放在中心，本来默认的坐标是左上角(0,0)
    rect.translate(-rect.center());
    return rect;
}

int Node::roundness(double size) const
{
    const int Diameter = 12;
    return 100 * Diameter / int(size);
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/586342.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

蓝桥杯如何准备国赛？

蓝桥杯如何准备国赛？

目录 一、赛前准备 1、如何刷题&#xff0c;刷哪些题&#xff1f; 2、记录&#xff08;主要看个人习惯&#xff09; CSDN博客 写注释 3、暴力骗分 4、从出题人的角度出发&#xff0c;应该如何骗分 二、赛中注意事项 一、赛前准备 1、如何刷题&#xff0c;刷哪些题&…
阅读更多...
Ubuntu 24.04安装搜狗输入法-解决闪屏问题

Ubuntu 24.04安装搜狗输入法-解决闪屏问题

问题描述 在Ubuntu 24.04 LTS系统中按照官方安装指导《Ubuntu20.04安装搜狗输入法步骤》安装搜狗输入法后&#xff1a; 会出现屏幕闪烁&#xff0c;无法正常使用的问题&#xff1b;系统搜索框和gnome-text-editor无法使用搜狗输入法&#xff1b; 原因分析 闪屏可能是Ubuntu…
阅读更多...
ESP32-C3第二路串口（非调试）串口打通（1）

ESP32-C3第二路串口（非调试）串口打通（1）

1. 概述与引脚复用 《ESP32-C3 系列芯片技术规格书》中提到&#xff0c;ESP32-C3系列芯片中有两路串口。 第1路串口就是常用的调试串口&#xff0c;在笔者使用的ESP32-C3-DevKitC-02开发板中&#xff0c;这一路串口通过CP2102 USB转UART桥芯片与电脑的USB口相连接&#xff0c;…
阅读更多...
c4d渲染动画只能渲染1帧怎么回事?c4d云渲染解决1秒停止

c4d渲染动画只能渲染1帧怎么回事?c4d云渲染解决1秒停止

当您在C4D中尝试渲染动画时&#xff0c;如果只渲染出了一个静止的帧&#xff0c;这通常意味着您的设置中存在一些问题。动画本身是由一系列连续的静态图像&#xff08;帧&#xff09;组成的&#xff0c;如果只生成了一帧&#xff0c;那么显然是渲染设置出现了错误。为了解决这个…
阅读更多...
如何利用快解析远程访问NAS、FTP、Web服务

如何利用快解析远程访问NAS、FTP、Web服务

什么是内网、外网&#xff1f; 所谓内网就是内部建立的局域网络或办公网络。一家公司或一个家庭有多台计算机&#xff0c;他们利用不同网络布局将这一台或多台计算机或其它设备连接起来构成一个局部的办公或者资源共享网络&#xff0c;我们就称它为内部网络&#xff0c;也叫内…
阅读更多...
微服务之SpringCloud AlibabaSeata处理分布式事务

微服务之SpringCloud AlibabaSeata处理分布式事务

一、概述 1.1背景 一次业务操作需要跨多个数据源或需要跨多个系统进行远程调用&#xff0c;就会产生分布式事务问题 but 关系型数据库提供的能力是基于单机事务的&#xff0c;一旦遇到分布式事务场景&#xff0c;就需要通过更多其他技术手段来解决问题。 全局事务&#xff1a;…
阅读更多...
计算机网络4——网络层4内部路由选择协议

计算机网络4——网络层4内部路由选择协议

文章目录 一、有关路由选择协议的几个基本概念1、理想的路由算法2、分层次的路由选择协议 二、内部网关协议 RIP1、协议 RIP 的工作原理2、特点3、距离向量算法4、坏消息传播慢 三、内部网关协议 OSPF1、基本特点2、OSPF 的五种分组类型 本节将讨论几种常用的路由选择协议&…
阅读更多...
【Mac】mac 安装 prometheus 报错 prometheus: prometheus: cannot execute binary file

【Mac】mac 安装 prometheus 报错 prometheus: prometheus: cannot execute binary file

1、官网下载 Download | Prometheus 这里下载的是prometheus-2.51.2.linux-amd64.tar.gz 2、现象 解压之后启动Prometheus 启动脚本&#xff1a; nohup ./prometheus --config.fileprometheus.yml > prometheus.out 2>&1 & prometheus.out日志文件&#xff…
阅读更多...
【C++】：类和对象(下)

【C++】：类和对象(下)

目录 一&#xff0c;再谈构造函数1.初始化列表2. 隐式类型转换的过程及其优化3. 隐式类型转换的使用4. explcit关键字5. 单参数和多参数构造函数的隐式类型转换 二&#xff0c;static成员1.静态成员变量2.静态成员函数 三&#xff0c;友元3.1 友元函数3.2 友元类 四&#xff0c…
阅读更多...
Vue ui 创建vue项目，详细使用攻略。

Vue ui 创建vue项目，详细使用攻略。

1.安装及启动 1.1 Vue ui 使用前提是全局安装vue.js 命令如下 npm install vue -g 1.2 安装过Vue.js 之后 随便在自己系统的一个地方打开命令面板 1.3 使用命令启动vue ui面板创建项目 vue ui 如图运行后显示这种就是启动成功&#xff0c;成功之后会弹出页面或者直接访问你的…
阅读更多...
QT5制做两个独立窗口

QT5制做两个独立窗口

目录 增加第二个窗口 主窗口文件添加一个私有成员为子窗口 定义两个槽函数和 关联按钮和子窗口和主窗口 添加子窗口成员 子窗口处理函数 补充回顾 增加第二个窗口 1、 2、 3 主窗口文件添加一个私有成员为子窗口 在mainwidget.h文件 同时添加两个槽&#xff1b;来处理…
阅读更多...
Visual studio 2019 编程控制CH341A芯片的USB设备

Visual studio 2019 编程控制CH341A芯片的USB设备

1、硬件 买了个USB可转IIC、或SPI、或UART的设备&#xff0c;主芯片是CH341A 主要说明USB转SPI的应用&#xff0c;绿色跳线帽选择IIC&SPI&#xff0c;用到CS0、SCK、MOSI、MISO这4个引脚 2、软件 2.1、下载CH341A的驱动 点CH341A官网https://www.wch.cn/downloads/CH34…
阅读更多...
人工智能工具的强大之处：我用过的最好用的AI工具

人工智能工具的强大之处：我用过的最好用的AI工具

人工智能工具的强大之处&#xff1a;我用过的最好用的AI工具 在当今科技迅速发展的时代&#xff0c;人工智能(AI)工具已经成为我们日常生活和工作中不可或缺的一部分。从语音助手到自动化内容创建工具&#xff0c;再到数据分析软件&#xff0c;AI的应用领域广泛且深远。本篇博…
阅读更多...
【antd + vue】InputNumber 数字输入框 输入限制

【antd + vue】InputNumber 数字输入框 输入限制

一、需求说明 只能输入数字和小数点&#xff0c;保留小数点后两位&#xff1b;最多输入6位&#xff1b;删除所有内容时&#xff0c;默认为0&#xff1b; 二、问题说明 问题1&#xff1a;使用 precision 数值精度 时&#xff0c;超出规定小数位数时会自动四舍五入&#xff1b;…
阅读更多...
LLM应用：让大模型prompt总结生成Mermaid流程图

LLM应用：让大模型prompt总结生成Mermaid流程图

生成内容、总结文章让大模型Mermaid流程图展示&#xff1a; mermaid 美人鱼, 是一个类似 markdown&#xff0c;用文本语法来描述文档图形(流程图、 时序图、甘特图)的工具&#xff0c;您可以在文档中嵌入一段 mermaid 文本来生成 SVG 形式的图形 Prompt 示例&#xff1a;用横向…
阅读更多...
PDF 正确指定页码后，挂载的书签页码对不上

PDF 正确指定页码后，挂载的书签页码对不上

这个问题与我的另一篇中方法一样 如何让一个大几千页的打开巨慢的 PDF 秒开-CSDN博客 https://blog.csdn.net/u013669912/article/details/138166922 另做一篇原因是一篇文章附带一个与该文章主题不相关的问题时&#xff0c;不利于被遇到该问题的人快速搜索发现以解决其遇到的…
阅读更多...
深度学习口型驱动Visemenet使用小结

深度学习口型驱动Visemenet使用小结

说明 我前一篇博客《使用共振峰提取元音音素/从声音生成口型动画》探索了使用共振峰分析元音&#xff0c;然后从元音音素映射到视位的口型驱动方案。当时我就在想&#xff0c;如果能用深度学习法方法从音频直接生成音素流&#xff0c;然后转换成对应视位&#xff0c;不就很容易…
阅读更多...
Vue项目打包APK----Vue发布App

Vue项目打包APK----Vue发布App

时隔多年我又来跟新了&#xff0c;今天给大普家及下前端Vue傻瓜式发布App&#xff0c;话不多说直接上干货。 首先准备开发工具HBuilder X&#xff0c;去官网直接下载即可&#xff0c;算了直接给你们上地址吧HBuilderX-高效极客技巧。 打开软件&#xff0c;文件-->新建--&g…
阅读更多...
ARM学习（27）链接库依赖学习（二）dlopen failed：library xxxx.so

ARM学习（27）链接库依赖学习（二）dlopen failed：library xxxx.so

笔者继续学习一下链接的依赖库。 1、起因 Android下面需要需要一个日志解码库&#xff0c;所以笔者就编译了一个parse.so来进行解码&#xff0c; 编译器&#xff1a;Clang&#xff0c;基于llvm后端的编译器平台&#xff1a;交叉编译&#xff0c;linux -> aarch64 linux An…
阅读更多...
Java | Leetcode Java题解之第62题不同路径

Java | Leetcode Java题解之第62题不同路径

题目&#xff1a; 题解&#xff1a; class Solution {public int uniquePaths(int m, int n) {long ans 1;for (int x n, y 1; y < m; x, y) {ans ans * x / y;}return (int) ans;} }
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站