QGraphics类型学习使用【Qt】【C++】

ops/2024/10/24 1:20:49/

QGraphics类型学习使用

  • 需求
  • 过程
  • 全部完整代码

  首先已知，QGraphicsView，QGraphicsScene, QGraphicsItem，分别称为：视图，场景，图元，图表就是各种各样的元素，图片元素，线条元素，等等，场景就是容纳图元的一个容器，场景不会显示出来,这句话很关键。若是想将其显示到屏幕上，需要将场景设置到视图中，由视图负责显示。

需求

  利用QGraphics家族类成员实现将图片显示出来，并对图片进行旋转，伸缩等操作。
以下是完成后的结果图：

过程

  首先创建了项目，并将图片添加进qrc资源文件（不添加也行，不影响）:
在这里插入图片描述
  代码如下：

#include "widget.h"Widget::Widget(QWidget *parent): QWidget(parent)
{QPixmap *pm = new QPixmap("://earth.jpg");QGraphicsView *view = new QGraphicsView(this);QGraphicsScene *scene = new QGraphicsScene;QGraphicsPixmapItem *pixmap = new QGraphicsPixmapItem(*pm);setGeometry({300,300, 800, 600});view->resize(pixmap->pixmap().width(),pixmap->pixmap().height());scene->addItem(pixmap);view->setScene(scene);QVBoxLayout *vLayout = new QVBoxLayout;QSlider *s1 = new QSlider(Qt::Horizontal);QSlider *s2 = new QSlider(Qt::Horizontal);vLayout->addWidget(s1);vLayout->addWidget(s2);QHBoxLayout *hLayout = new QHBoxLayout(this);hLayout->addWidget(view);hLayout->addLayout(vLayout);
}Widget::~Widget()
{
}

在这里插入图片描述
  可以看到只显示的图片的一部分，根据下面和右边的滚动条知道可以通过滑动来展示图片，
在这里插入图片描述
  溯源可知，由于QGraphicsView继承自QAbstractScrollArea,顾名思义，它的父类具有滚动功能，具体不深究，知道是因为那个部分带来的滚动条即可。
  但是我们的目的是显示所有图片的细节，可以放大图片：

#include "widget.h"Widget::Widget(QWidget *parent): QWidget(parent)
{QPixmap *pm = new QPixmap("://earth.jpg");QPixmap newPm = pm->scaled(pm->width() / 1.5, pm->height() / 1.5);QGraphicsView *view = new QGraphicsView(this);QGraphicsScene *scene = new QGraphicsScene;QGraphicsPixmapItem *pixmap = new QGraphicsPixmapItem(newPm);setGeometry({500,500, pixmap->pixmap().width()+100,pixmap->pixmap().height()});view->resize(pixmap->pixmap().width(),pixmap->pixmap().height()- 100);scene->addItem(pixmap);view->setScene(scene);QVBoxLayout *vLayout = new QVBoxLayout;QSlider *s1 = new QSlider(Qt::Horizontal);QSlider *s2 = new QSlider(Qt::Horizontal);vLayout->addWidget(s1);vLayout->addWidget(s2);QHBoxLayout *hLayout = new QHBoxLayout(this);hLayout->addWidget(view);hLayout->addLayout(vLayout);
}Widget::~Widget()
{
}

得到：
在这里插入图片描述

  将右侧滚动条大小进行调整，整体大小进行调整：

#include "widget.h"Widget::Widget(QWidget *parent): QWidget(parent)
{QPixmap *pm = new QPixmap("://earth.jpg");QPixmap newPm = pm->scaled(pm->width() / 1.5, pm->height() / 1.5);QGraphicsView *view = new QGraphicsView;QGraphicsScene *scene = new QGraphicsScene;QGraphicsPixmapItem *pixmap = new QGraphicsPixmapItem(newPm);setGeometry({500,500, pixmap->pixmap().width()+100,pixmap->pixmap().height()});view->resize(pixmap->pixmap().width(),pixmap->pixmap().height()- 100);scene->addItem(pixmap);view->setScene(scene);QVBoxLayout *vLayout = new QVBoxLayout;QSlider *s1 = new QSlider(Qt::Horizontal);QSlider *s2 = new QSlider(Qt::Horizontal);QHBoxLayout *gbox1 = new QHBoxLayout;QHBoxLayout *gbox2 = new QHBoxLayout;QLabel *label1 = new QLabel("旋转:");QLabel *label2 = new QLabel("伸缩:");gbox1->addWidget(label1);gbox1->addWidget(s1);gbox2->addWidget(label2);gbox2->addWidget(s2);vLayout->addLayout(gbox1);vLayout->addLayout(gbox2);QHBoxLayout *hLayout = new QHBoxLayout(this);hLayout->addWidget(view);hLayout->addLayout(vLayout);
}Widget::~Widget()
{
}

在这里插入图片描述
  接下来就可以设置旋转和缩放的槽函数了，两种方式：

  • 旋转视图：
void Widget::rotate(int value)
{view->rotate(value);update();
}
  • 旋转图元：
void Widget::rotate(int value)
{pixmap->setRotation(value);update();
}

此时发现问题：旋转中心点是左上角：
在这里插入图片描述

这是因为，在两种旋转函数中：

  • rotate: 旋转原点是以中心点为基准进行旋转的。
  • setRotation: 旋转原点是以左上角为基准进行旋转的。

所以需要修改旋转原点：
setTransformOriginPoint：这个函数通常用于设置QGraphicItem及其子类的变换中心点，可作为旋转，伸缩时的中心点。
所以：

void Widget::rotate(int value)
{pixmap->setTransformOriginPoint(pixmap->pixmap().width()/2, pixmap->pixmap().height()/2);pixmap->setRotation(value);update();
}

在这里插入图片描述
发现旋转没有一圈，设置一下滚动条的范围即可：s1->setRange(0,360);

接下来实现伸缩：

void Widget::scale(int value)
{pixmap->setTransformationMode(Qt::SmoothTransformation);pixmap->setScale(value);update();
}

运行后：
在这里插入图片描述
发现伸缩大小比例不对，将滚动条的范围设置为一个合适的范围：
s2->setRange(0,2);,设置后运行：
在这里插入图片描述
  发现slider的步长太大，但是我们需要的是0.1级别的调整，查询发现slider
  设置步长的函数为setSingleStep(int)，只能设置最小为1的步长，因此我们重新调整，将范围设置为：s2->setRange(0,20);

void Widget::scale(int value)
{pixmap->setTransformationMode(Qt::SmoothTransformation);pixmap->setScale(value*1.0/10);update();
}

运行后发现;
在这里插入图片描述
  第1点是期望伸缩中心点是在图片的中心点，但是实际上是在图片左上角进行伸缩的，所以需要修该一下：pixmap->setTransformOriginPoint(pixmap->pixmap().width()/2, pixmap->pixmap().height()/2);
其实也就是将在这里插入图片描述
  rotate函数里面的这个setTransformOriginPoint放到构造函数中。

  第2点就是伸缩的时候是从slider的值改变的第一个量伸缩的，我们期待的是从当前值进行伸缩，接下来进行修改：
  因为涉及到缩小和放大，我们可以将slider的初始值设置为10，进过变换也就是1，即没有伸缩过的图片：
s2->setValue(10);
  slider位于中间，向左缩小，向右放大：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
  自此代码简单完成。是自己学习路上的过程笔记，知识浅薄，或许不具备学习来使用。

全部完整代码

// widget.h
#ifndef WIDGET_H
#define WIDGET_H#include <QWidget>
#include <QGraphicsView>
#include <QGraphicsScene>
#include <QGraphicsPixmapItem>
#include <QPixmap>
#include <QVBoxLayout>
#include <QHBoxLayout>
#include <QSlider>
#include <QGroupBox>
#include <QLabel>
class Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();
private:QGraphicsView *view;QGraphicsPixmapItem *pixmap;QGraphicsScene *scene;private slots:void rotate(int);void scale(int);};
#endif // WIDGET_H
// widget.cpp
#include "widget.h"Widget::Widget(QWidget *parent): QWidget(parent)
{QPixmap *pm = new QPixmap("://earth.jpg");QPixmap newPm = pm->scaled(pm->width() / 1.5, pm->height() / 1.5);view = new QGraphicsView;scene = new QGraphicsScene;pixmap = new QGraphicsPixmapItem(newPm);setGeometry({500,500, pixmap->pixmap().width()+100,pixmap->pixmap().height()});view->resize(pixmap->pixmap().width(),pixmap->pixmap().height()- 100);scene->addItem(pixmap);view->setScene(scene);QVBoxLayout *vLayout = new QVBoxLayout;QSlider *s1 = new QSlider(Qt::Horizontal);s1->setRange(0,360);QSlider *s2    = new QSlider(Qt::Horizontal);s2->setRange(0,20);s2->setValue(10);QHBoxLayout *gbox1 = new QHBoxLayout;QHBoxLayout *gbox2 = new QHBoxLayout;QLabel *label1 = new QLabel("旋转:");QLabel *label2 = new QLabel("伸缩:");gbox1->addWidget(label1);gbox1->addWidget(s1);gbox2->addWidget(label2);gbox2->addWidget(s2);vLayout->addLayout(gbox1);vLayout->addLayout(gbox2);QHBoxLayout *hLayout = new QHBoxLayout(this);hLayout->addWidget(view);hLayout->addLayout(vLayout);pixmap->setTransformOriginPoint(pixmap->pixmap().width()/2, pixmap->pixmap().height()/2);connect(s1, SIGNAL(valueChanged(int)), this, SLOT(rotate(int)));connect(s2, SIGNAL(valueChanged(int)), this, SLOT(scale(int)));
}Widget::~Widget()
{
}void Widget::rotate(int value)
{pixmap->setTransformOriginPoint(pixmap->pixmap().width()/2, pixmap->pixmap().height()/2);pixmap->setRotation(value);update();
}void Widget::scale(int value)
{pixmap->setTransformationMode(Qt::SmoothTransformation);pixmap->setScale(value*1.0/10);update();
}

         新人创作不易，你的点赞和关注都是对我莫大的鼓励，再次感谢您的观看。


http://www.ppmy.cn/ops/127966.html

相关文章

“避免序列化灾难：掌握实现 Serializable 的真相！（二）”

“避免序列化灾难：掌握实现 Serializable 的真相！（二）”

文章目录 一、什么是序列化&#xff1f;二、Serializable 是如何起作用的&#xff1f;三、为什么不自动序列化所有对象&#xff1f;四、Java 序列化的底层原理序列化的核心步骤&#xff1a; 五、反序列化的原理六、总结&#xff1a;为什么必须实现 Serializable 才能序列化&…
阅读更多...
ARM嵌入式学习--第四天

ARM嵌入式学习--第四天

汇编与C混合编程 -汇编指令中调用C语言 .global _start _start:mov r0,#5mov r1,#3bl add stop:b stop int add(int a,int b) {int c a b;return c; } 无优化情况&#xff1a;&#xff08;反汇编之后&#xff0c;发现多了很多很多指令&#xff0c;运行之后结果是错误的&a…
阅读更多...
k8s部署Kafka集群超详细讲解

k8s部署Kafka集群超详细讲解

准备部署环境 Kubernetes集群信息 NAMEVERSIONk8s-masterv1.29.2k8s-node01v1.29.2k8s-node02v1.29.2 Kafka&#xff1a;3.7.1版本&#xff0c;apche版本 Zookeeper&#xff1a;3.6.3版本 准备StorageClass # kubectl get sc NAME PROVISIONER RECLA…
阅读更多...
旅游攻略网站毕业设计计算机毕设基于SpringBootSSM框架

旅游攻略网站毕业设计计算机毕设基于SpringBootSSM框架

目录 1.摘要 2 引言 2.1 开发目标 2.2 项目内容 2.3 项目背景与目的 3. 技术选型 3.1 JAVA 简介 3.2 MySQL 介绍 ‌4. 功能描述与创新点 4.1 功能描述 ‌4.2创新点设计 4.3 功能图展示 5. 数据库设计 6. 项目任务与要求 1.摘要 本文旨在设计并实现一个功能全面、…
阅读更多...
C++代码操作指令的定义

C++代码操作指令的定义

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、最简单的函数二、栈设计StackEntry 类std::vector 容器std::vector<StackEntry>的特点std::vector<StackEntry>的操作成员枚举 Type&#xff1…
阅读更多...
RabbitMQ service is already present - only updating service parameters

RabbitMQ service is already present - only updating service parameters

Windows下卸载RabbitMQ之后，然后重新注册RabbitMQ服务的时候，报错以下信息： D:\software\rabbitmq-server-4.0.2\rabbitmq_server-4.0.2\sbin>D:\software\rabbitmq-server-4.0.2\rabbitmq_server-4.0.2\sbin\rabbitmq-service.bat install RabbitMQ service is already …
阅读更多...
【Jmeter】jmeter运行时自动获取线程号几种方式

【Jmeter】jmeter运行时自动获取线程号几种方式

背景&#xff1a; 在模拟多线程场景时&#xff0c;使用序号可以标记并追踪当前执行请求的虚拟用户。 方法1&#xff1a;通过添加BeanShell前置处理器获取或BeanShell预处理程序获取线程号 获取函数&#xff1a;${__BeanShell(ctx.getThread().getThreadName())} Thread.slee…
阅读更多...
②PROFINET转ModbusTCP， EtherCAT/Ethernet/IP/Profinet/ModbusTCP协议互转工业串口网关

②PROFINET转ModbusTCP， EtherCAT/Ethernet/IP/Profinet/ModbusTCP协议互转工业串口网关

EtherCAT/Ethernet/IP/Profinet/ModbusTCP协议互转工业串口网关https://item.taobao.com/item.htm?ftt&id822721028899 协议转换通信网关 PROFINET 转 Modbus TCP &#xff08;接上一章&#xff09; 配置使用 与 PROFINET 主站进行组态说明 这里介绍与西门子 PLC 的…
阅读更多...
最新文章

Copyright @ 2022~2023