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

🕗 发布于 2024-10-19 19:14 学习 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_OBJECT

public:
    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();
}

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

原文地址：https://blog.csdn.net/tang20030306/article/details/142955645

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Flutter 与 React Native - 详细深入对比分析（2024 年）
下一篇：记录k8s安装es出现的报错

leetcode289:生命游戏
根据，简称为，是英国数学家约翰·何顿·康威在 1970 年发明的细胞自动机。给定一个包含m × n个格子的面板，每一个格子都可以看成是一个细胞。每个细胞都具有一个初始状态：1即为（live），或0即为
阅读更多2024-10-20
MongoDB数据恢复
注意：两个MongoDB的版本要一致，本文使用的是mongo:4.2.24。先把K8S上面的MongoDB 容器停止（可以把副本改成0）。1、将容器挂载MongoDB的数据目录备份到本地。经常是数据文
阅读更多2024-10-20
C#中实现事务
C#中实现事务
阅读更多2024-10-20
【LeetCode每日一题】——560.和为 K 的子数组
给你一个整数数组 nums 和一个整数 k ，请你统计并返回该数组中和为 k 的子数组的个数。子数组是数组中元素的连续非空序列。
阅读更多2024-10-20
「漏洞复现」满客宝智慧食堂系统 selectUserByOrgId 未授权访问漏洞
请勿利用文章内的相关技术从事非法测试，由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失，均由使用者本人负责，作者不为此承担任何责任。工具来自网络，安全性自测，如有侵权请联系删除。本次
阅读更多2024-10-20
React面试题目（从基本到高级）
React前端面试常见题目涵盖了React的基础概念、组件、状态管理、生命周期、性能优化等多个方面。
阅读更多2024-10-20
12.个人博客系统（Java项目基于spring和vue）
1 在校学习的学生，可用于日常学习使用或是毕业设计使用 2 毕业一到两年的开发人员，用于锻炼自己的独立功能模块设计能力，增强代码编写能力。 3 亦可以部署为商化项目使用。 4 需要完整资料及源码
阅读更多2024-10-20
YoloV8改进策略：注意力改进|DeBiFormer，可变形双级路由注意力|引入DeBiLevelRoutingAttention注意力模块（全网首发）
本次改进的核心在于将DeBiLevelRoutingAttention模块嵌入到YoloV8的主干网络中，具体位置是在SPPF（Spatial Pyramid Pooling Fast）模块之后。这一
阅读更多2024-10-20
word取消自动单词首字母大写
情况说明：在word输入单词后首字母会自动变成大写取消单词首字母大写步骤：（1）点击菜单栏文件（2）点击“更多”——>“选项”（3）点击“校对”——>“自动更正选项”（4）取消“句首字母大
阅读更多2024-10-20
web前端网页用户注册页面
【代码】web前端网页用户注册页面。
阅读更多2024-10-20

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

QGraphics类型学习使用

需求

过程

全部完整代码

相关文章