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

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.mzph.cn/diannao/57413.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

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…
阅读更多...
股价创52周新高，云顶新耀成为“黑马”的启示录

股价创52周新高，云顶新耀成为“黑马”的启示录

踏入2024年以来&#xff0c;创新药产业持续释放积极信号。今年本土创新药出海交易额已超200亿美元&#xff0c;最近医保续约和谈判也有望促进国内创新药长期放量。 市场预期转好之下&#xff0c;生物医药板块在新一轮牛市中进入了估值修复的阶段。HSHKBIO&#xff08;恒生香港…
阅读更多...
【LVGL快速入门(二)】LVGL开源框架入门教程之框架使用(UI界面设计)

【LVGL快速入门(二)】LVGL开源框架入门教程之框架使用(UI界面设计)

零.前置篇章 本篇前置文章为【LVGL快速入门(一)】LVGL开源框架入门教程之框架移植 一.UI设计 介绍使用之前&#xff0c;我们要学习一款LVGL官方的UI设计工具SquareLine Studio&#xff0c;使用图形化设计方式设计出我们想要的界面&#xff0c;然后生成对应源文件导入工程使用…
阅读更多...
时空智友企业流程化管控系统uploadStudioFile接口存在任意文件上传漏洞

时空智友企业流程化管控系统uploadStudioFile接口存在任意文件上传漏洞

免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该文章仅供学习用途使用。 1. 时空智友…
阅读更多...
JMeter使用不同方式传递接口参数

JMeter使用不同方式传递接口参数

1、使用 HTTP 请求中的参数&#xff1a; 在 JMeter 的测试计划中&#xff0c;添加一个 "HTTP 请求" 元件。 在 "HTTP 请求" 元件的参数化选项中&#xff0c;可以添加参数的名称和值。可以手动输入参数&#xff0c;也可以使用变量来传递参数值。 如果要使…
阅读更多...
汇川机器人与PLC通信-ModbusTCP超详细案例

汇川机器人与PLC通信-ModbusTCP超详细案例

#SCARA机器人与H5UPLC通过ModbusTCP通信，HMI界面手动操作# 应用背景： 本项目案例部分软件界面已被更新，如机器人示教软件旧版本S01.19R03。但通信的原理基本一致，废话少说，我们直接上图。 一、PLC端配置 1.添加ROB通讯表（自定义），变量表内容包括ROB系统变量，IN区和…
阅读更多...
Notepad++将搜索内容所在行选中，并进行复制等操作

Notepad++将搜索内容所在行选中，并进行复制等操作

背景 Notepad在非常多的数据行内容中&#xff0c;按照指定内容检索&#xff0c;并定位到具体行&#xff0c;而后对内容行的数据进行复制、剪切、删除等处理动作。 操作说明 检索并标记所在行 弹出搜索框&#xff1a;按下 Ctrl F。 输入查找字符串&#xff1a;在搜索框中输入要…
阅读更多...
Cursor零基础小白教程系列「进阶」 - Cursor 智能代码补全详解(Tab)

Cursor零基础小白教程系列「进阶」 - Cursor 智能代码补全详解(Tab)

最适合小白零基础的Cursor教程 网站lookai.top相同作者&#xff0c;最新文章会在网站更新&#xff0c;欢迎收藏书签 Cursor 智能代码补全详解(Tab) 概述 Cursor的智能代码补全&#xff0c;也就是快捷键Tab&#xff0c;是其最强大和独特的AI辅助编程工具之一。本教程将详细介绍…
阅读更多...
最好的ppt模板网站是哪个？做PPT不可错过的18个网站！

最好的ppt模板网站是哪个？做PPT不可错过的18个网站！

现在有很多PPT模板网站&#xff0c;但真正免费且高质量的不多&#xff0c;今天我就分享主流的国内外PPT模板下载网站&#xff0c;并且会详细分析这些网站的优缺点&#xff0c;这些网站都是基于个人实际使用经验的&#xff0c;免费站点会特别标注&#xff0c;让你可以放心下载&a…
阅读更多...
抗肺癌市场迎新突破，十款创新药物获批！

抗肺癌市场迎新突破，十款创新药物获批！

在肺癌治疗领域&#xff0c;近年来取得了令人瞩目的进展。随着科学技术的不断进步和临床研究的深入&#xff0c;多款创新肺癌药物相继获批上市&#xff0c;为患者带来了前所未有的治疗选择和希望。本文将详细介绍十款最新获批的肺癌创新药物&#xff0c;探讨它们的特点、适应症…
阅读更多...
Leetcode 1135. 最低成本连通所有城市

Leetcode 1135. 最低成本连通所有城市

1.题目基本信息 1.1.题目描述 想象一下你是个城市基建规划者&#xff0c;地图上有 n 座城市&#xff0c;它们按以 1 到 n 的次序编号。 给你整数 n 和一个数组 conections&#xff0c;其中 connections[i] [x_i, y_i, cost_i] 表示将城市 x_i 和城市 y_i 连接所要的cost_i&…
阅读更多...
Stable Diffusion Web UI 大白话术语解释 (二)

Stable Diffusion Web UI 大白话术语解释 (二)

归纳整理&#xff0c;Stable Diffusion Web UI 使用过程中&#xff0c;相关术语 ControlNet ControlNet 说简单点&#xff0c;就是你可以给 AI 一些“规则”&#xff0c;比如让它根据某些线条、结构或者骨架去画图。 这样能让 AI 画出更符合你要求的图片&#xff0c;特别适合画…
阅读更多...
买华为系的车，这个理由无法拒绝

买华为系的车，这个理由无法拒绝

文 | AUTO芯球 作者 | 雷慢 激动人心啊&#xff0c; 超过45万问界车主&#xff0c; 还有几十万其他用华为鸿蒙智能座舱系统的车主, 大家的软件安全、自主可控问题&#xff0c; 这下可以彻底放心了&#xff01; 为什么&#xff0c;就在昨晚&#xff0c; 完全自主可控、彻…
阅读更多...
ECharts饼图-饼图34，附视频讲解与代码下载

ECharts饼图-饼图34，附视频讲解与代码下载

引言&#xff1a; 在数据可视化的世界里&#xff0c;ECharts凭借其丰富的图表类型和强大的配置能力&#xff0c;成为了众多开发者的首选。今天&#xff0c;我将带大家一起实现一个饼图图表&#xff0c;通过该图表我们可以直观地展示和分析数据。此外&#xff0c;我还将提供详…
阅读更多...
可编辑60页PPT | 大数据基础知识培训课件

可编辑60页PPT | 大数据基础知识培训课件

荐言分享&#xff1a;在当今信息化高速发展的时代&#xff0c;大数据已成为推动各行各业创新转型的关键力量。无论是金融、医疗、教育还是零售等行业&#xff0c;大数据的应用都为企业带来了前所未有的机遇和挑战。为了帮助学员更好地理解和应用大数据&#xff0c;我们精心设计…
阅读更多...
纯css实现瀑布流! 附源码!!!

纯css实现瀑布流! 附源码!!!

瀑布流用于展示图片信息,我这里用的背景颜色来代替图片 PC端效果 源码(直接复制粘贴就可以运行了!!!) <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>PC端瀑布流</title><style>.box {w…
阅读更多...
Umi UI报错:连接失败，请尝试重启dev服务

Umi UI报错:连接失败，请尝试重启dev服务

Umi UI连接失败&#xff0c;请尝试重启dev服务 使用umi ui时遇到以下问题 报错如下 从报错可以看出是淘宝镜像失效的问题&#xff0c;检查淘宝镜像 可以看出淘宝镜像是最新的&#xff0c;并无问题 经过查找发现报错是因为依赖文件中使用了旧的淘宝镜像&#xff0c;在node…
阅读更多...
美国FDA注册和FDA检测的区别

美国FDA注册和FDA检测的区别

FDA注册 FDA注册是美国食品药品管理局对进入美国市场的产品进行企业和产品信息登记的过程&#xff0c;其目的主要包含反恐和限制不符合要求产品的市场准入&#xff0c;FDA注册主要针对的企业主要有&#xff1a;食品类企业&#xff08;包含所欲可食用产品及动物饲料&#xff09;…
阅读更多...
Java全栈经典面试题剖析4】JavaSE高级 -- 包装类，String, 类方法

Java全栈经典面试题剖析4】JavaSE高级 -- 包装类，String, 类方法

目录 面试题3.1 什么是自动装箱与拆箱&#xff1f;用什么方式来装箱与拆箱&#xff1f; 面试题3.2 int和Integer有什么区别&#xff1f; 面试题3.3 Integer常量池 面试题3.4 字符串常量池 面试题3.5 这句代码创建了几个对象? String str1 new String("xyz");…
阅读更多...
C++ 抛异常

C++ 抛异常

目录 一.抛异常与运行崩溃的区别 1.运行崩溃 2.抛异常 二.抛异常机制存在的意义 1.清晰的处理错误 2.结构化的错误管理 3.跨函数传递错误信息 4.异常对象多态性 三.抛异常的使用方法 1.抛出异常 (throw) 2.捕获异常 (catch) 3.标准异常类 四.抛异常的处理机制 1.抛…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023