Qt5开发从入门到精通——第七篇六节（ 图形视图—— 图元的旋转、缩放、切变、和位移）

已于 2022-09-30 12:51:14 修改
阅读量2.2k 收藏 18
点赞数 16
分类专栏： Qt5开发从入门到精通 文章标签： qt 开发语言 c++ 动画 c语言
于 2022-09-26 13:18:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44759598/article/details/127050888
版权

CSDN话题挑战赛第2期
参赛话题：学习笔记

欢迎小伙伴的点评✨✨，相互学习、互关必回、全天在线🍳🍳🍳
博主🧑🧑 本着开源的精神交流Qt开发的经验、将持续更新续章，为社区贡献博主自身的开源精神👩‍🚀

目录

前言

本章节会给大家带来基于图元的旋转、缩放、切变、和位移。

QGraphicsltem类概述

它是场景中各个图元的基类，在它的基础上可以继承出各种图元类， Qt 已经预置的包括直线 (QGraphicsLineltem) 、椭圆 (QGraphicsEllipseltem) 、文本图元 (QGraphicsTextltem) 、矩形(QGraphicsRectltem) 等。当然，也可以在 QGraphicsltem 类的基础上实现自定义的图元类，即用户可以继承 QGraphicsltem 实现符合自己需要的图元。

二、 效果实例

图一
将图片Pointer.png、Clock.png放入到构建文件当中build-ItemWidget-Desktop_Qt_5_12_2_MinGW_32_bit-Debug
在这里插入图片描述

三、原码解析

mainwidget.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QWidget>
#include <QGraphicsView>
#include <QGraphicsScene>
#include <QFrame>
#include <QHBoxLayout>
#include <QSlider>
#include <QGroupBox>
#include <math.h>
#include "pixltem.h"
class MainWidget : public QWidget
{
    Q_OBJECT

public:
    MainWidget(QWidget *parent = 0);
    ~MainWidget();
    void createControlFrame();
private:

   int angle;
   qreal scaleValue;
   qreal shearValue;
   qreal translateValue;
   QGraphicsView *view;
   QFrame *ctrlFrame;
   PixItem *pixItem;
   PixItem *pixItemL;
   QGraphicsScene *scene;


public slots:
void slotRotate(int);
void slotScale(int);
void slotShear(int);
void slotTranslate(int);

};

#endif // MAINWINDOW_H

pixltem.h

#ifndef PIXLTEM_H
#define PIXLTEM_H

#include <QGraphicsItem>
#include <QPixmap>
#include <QPainter>
class PixItem : public QGraphicsItem
{
public:
    PixItem(QPixmap *pixmap);
    QRectF boundingRect() const;
    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option,QWidget *widget);
private:
    QPixmap pix;   //作为图元显示的图片

};

#endif // PIXLTEM_H

main.cpp

#include "mainwidget.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWidget w;
    w.show();

    return a.exec();
}

mainwidget.cpp

#include "mainwidget.h"

MainWidget::MainWidget(QWidget *parent)
    : QWidget(parent)
{

    angle= 0;
    scaleValue = 5;
    shearValue = 5;
    translateValue = 50;
    scene= new QGraphicsScene;
    //限定新建 QGraphicsScene 对象的显示区域
    scene->setSceneRect(-200,-200,400,400);
    QPixmap *pixmapL =new QPixmap("Pointer.png");

    QPixmap *pixmap = new QPixmap ("Clock.png");
    pixItem = new PixItem(pixmap);  //新建一个自定义图元 Pixltem 对象，为它传入一个图片用于显示
    scene->addItem(pixItem);
    pixItem->setPos (0,0) ;


    pixItemL = new PixItem(pixmapL); //新建一个自定义图元 Pixltem 对象，为它传入一个图片用于显示
    scene->addItem(pixItemL);
    pixItemL->setPos(0,1);


    view= new QGraphicsView; //新建一个视图对象
    view->setScene (scene); //将视图对象与场景相连
    view->setMinimumSize(400,400); //设置视图的最小尺寸为 (400,400)
    ctrlFrame = new QFrame;  //新建主窗体右侧的控制面板区
    createControlFrame();
    //主窗口布局
    QHBoxLayout *mainLayout = new QHBoxLayout;
    mainLayout->setMargin(10);
    mainLayout->setSpacing(20);
    mainLayout->addWidget(view);
    mainLayout->addWidget(ctrlFrame);
    setLayout(mainLayout);
    setWindowTitle(tr("Graphics Item Transformation"));
                                             //设置主窗口的标题



}

MainWidget::~MainWidget()
{

}

void MainWidget::createControlFrame()
{

    //旋转控制
    QSlider *rotateSlider = new QSlider;
    rotateSlider->setOrientation(Qt::Horizontal);
    rotateSlider->setRange(0,360);
    QHBoxLayout *rotateLayout = new QHBoxLayout;
    rotateLayout->addWidget(rotateSlider);
    QGroupBox *rotateGroup = new QGroupBox(tr("Rotate"));
    rotateGroup->setLayout(rotateLayout);

    //缩放控制
    QSlider *scaleSlider = new QSlider;
    scaleSlider->setOrientation(Qt::Horizontal);
    scaleSlider->setRange(0,2*scaleValue);
    scaleSlider->setValue(scaleValue);
    QHBoxLayout *scaleLayout = new QHBoxLayout;
    scaleLayout->addWidget(scaleSlider);
    QGroupBox *scaleGroup = new QGroupBox(tr("Scale"));
    scaleGroup->setLayout(scaleLayout);

    //切变控制

    QSlider *shearSlider = new QSlider;
    shearSlider->setOrientation(Qt::Horizontal);
    shearSlider->setRange(0,2*shearValue);
    shearSlider->setValue(shearValue);
    QHBoxLayout *shearLayout = new QHBoxLayout;
    shearLayout->addWidget(shearSlider);
    QGroupBox *shearGroup = new QGroupBox(tr("Shear"));
    shearGroup->setLayout(shearLayout);

    //位移控制
    QSlider *translateSlider = new QSlider;
    translateSlider->setOrientation(Qt::Horizontal);
    translateSlider->setRange(0,16*translateValue);
    translateSlider->setValue(translateValue);
    QHBoxLayout *translateLayout = new QHBoxLayout;
    translateLayout->addWidget(translateSlider);
    QGroupBox *translateGroup = new QGroupBox(tr("Translate"));
    translateGroup->setLayout(translateLayout);



    connect(rotateSlider,SIGNAL(valueChanged(int)),this,SLOT(slotRotate(int)));
    connect(scaleSlider,SIGNAL(valueChanged(int)),this,SLOT(slotScale(int)));
    connect(shearSlider,SIGNAL(valueChanged(int)),this,SLOT(slotShear(int)));
    connect(translateSlider,SIGNAL(valueChanged(int)),this,SLOT(slotTranslate(int)));

    //控制面板布局

    QVBoxLayout *frameLayout = new QVBoxLayout;
    frameLayout->setMargin(10);
    frameLayout->setSpacing(20);
    frameLayout->addWidget(rotateGroup);
    frameLayout->addWidget(scaleGroup);
    frameLayout->addWidget(shearGroup);
    frameLayout->addWidget(translateGroup);
    ctrlFrame->setLayout(frameLayout);


}
/*实现图元的旋转功能函数 slotRotate(), 主要是调用 QGraphicsView 类的 rotate()函数实现的，
它的参数为旋转角度值*/
void MainWidget::slotRotate(int value)
{


    view->rotate(value-angle);
    angle= value;
}

/*实现图元的缩放功能函数 slotScale(), 主要是调用 QGraphicsView 类的 scale() 函数实现的，它的参数为缩放的比例*/
void MainWidget::slotScale(int value)
{
    qreal s;
    if(value>scaleValue)
      s=pow(1.1, (value-scaleValue));
    else
      s=pow(1/1.1, (scaleValue-value));
    view->scale(s,s);
    scaleValue=value;
}

/*实现图元的切变功能函数 slotShearO, 主要是调用 QGraphicsView 类的 shear()函数实现的，
它的参数为切变的比例*/
void MainWidget::slotShear(int value)
{
    view->shear((value-shearValue)/10.0,0);
    shearValue=value;
}
/*实现图元的位移功能函数 slotTranslate(), 主要是调用 QGraphicsView 类的 translate()函数实
现的*/
void MainWidget::slotTranslate(int value)
{
    view->translate((value-translateValue)/2,(value-translateValue)/2);
    translateValue=value;
}

pixltem.cpp

#include "pixltem.h"

PixItem::PixItem(QPixmap *pixmap)
{
    pix= *pixmap;  //PixItem 的构造函数只是初始化了变量 pix
}

/*定义图元边界的函数 boundingRect(), 完成以图元坐标系为基础增加两个像素点的冗余的工
作。*/
QRectF PixItem::boundingRect () const
{
  return QRectF (-2-pix. width() /2, -2-pix. height() /2, pix. width() +4, pix.height()+4);
}

/*重画函数只需用 QPainter 的 dra'YPixmap()函数将图元图片绘出即可*/
void PixItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option,QWidget *widget)
{
    painter->drawPixmap (-pix. width() /2, -pix. height() /2, pix);
}

四、总结

图形视图中图元的旋转、缩放、切变、和位移的动画效果会在应用程序开发中经常用到的

东.'
关注
专栏目录
图元的旋转、切变、缩放、位移
weixin_44011306的博客
04-13 358
图元的旋转、切变、缩放、位移程序主窗口函数（主窗口的设置、图片的加载、四个槽函数完成四个功能）PixItem函数（图元设置、图片的绘制）效果展示 程序 主窗口函数（主窗口的设置、图片的加载、四个槽函数完成四个功能） .h #ifndef MAINWIDGET_H #define MAINWIDGET_H #include <QWidget> #include <QGraphic...
QT图元旋转、缩放、切变和位移
12-10
本例实现图元的旋转、缩放、切变和位移等各种变形操作
QT实现图片的简单编辑工具，支持多种图形绘制，支持图元的简单缩放，旋转。(源码)
12-19
QT实现图片的简单编辑工具，支持多种图形绘制，支持图元的简单缩放，旋转。 源码路径：https://github.com/xiaoyanLG/Draw-Tool
「Qt Widget中文示例指南」如何实现一个旋转框（二）
最新发布
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
08-21 1106
本文将为大家介绍如何使用Qt Widget小部件如何实现一个旋转框示例，欢迎下载最新版组件体验~
QT5 OPenGL(三， 图形旋转)
li235456789的专栏
04-06 2959
概要 实例效果图 主要实现代码 关键点解析概要图形旋转在很多游戏里面，或一些需要特效的场合用得比较多，一个动态的图形图片是比静态的有更好的动态效果的。实例效果图主要实现代码void OpenglWidget::initializeGL() { glShadeModel(GL_SMOOTH); glClearColor(0.0, 0.0, 0.0, 0.0); glClearD
Qt绘图与图形视图之自定义图元实现拖拽、拉伸、旋转功能
LF__plus的博客
04-29 2100
Qt绘图与图形视图之自定义图元实现拖拽、拉伸、旋转功能
基于Qt实现支持图元拖曳、定点滚轮旋转和缩放【100012334】
05-22
应用设计上，我完成了满足文件接口要求的命令行程序，完成了基于鼠标点击的图元绘制、基于鼠标拖曳的图元移动，和基于可视化锚点及鼠标滚轮的图元旋转、图元缩放，并将控制逻辑集成到 GUI 应用中。最终使用静态编译...
基于QT实现的图元拖曳、定点滚轮旋转和缩放可视化锚点的演示.zip
06-23
应用设计上，我完成了满足文件接口要求的命令行程序，完成了基于鼠标点击的图元绘制、基于鼠标拖曳的图元移动，和基于可视化锚点及鼠标滚轮的图元旋转、图元缩放，并将控制逻辑集成到 GUI 应用中。最终使用静态编译...
SolidWorks2012中文版从入门到精通——基础特征建模.docx
03-11
《SolidWorks2012中文版从入门到精通——基础特征建模》 SolidWorks是一款强大的三维CAD设计软件，尤其在基础特征建模方面表现出色。2012版本提供了全面而直观的工具，帮助用户从零开始掌握三维实体设计。本教程...
Qt图形视图框架详解
06-09
介绍Qt中的Graphics View Framework，涉及View、Scene、Item的关系，如何自定义QGraphicsItem、处理Item之间的关联、如何布局及定义自己的布局Item、如何变幻Item、如何应用动画、如何处理拖放、如何给Item应用图形...
Qt直线旋转（旋转的直线）
KJxuexi1840的博客
12-19 3436
新手上路欢迎指点。 int x[4]; bool ok = true; QVectorQLineF> lines; #include "widget.h" Widget::Widget(QWidget *parent) : QWidget(parent) { setWindowTitle("小小柯洁");
QT Opengl 图形旋转
04-06
用QT5 写的Opengl 图形旋转小实例， 直接运行起来后， 需要拖动窗口，让窗口不停地重绘，才会出现有动态的效果。
qt 画旋转矩形
05-01
qt 画矩形框、旋转矩形、先画直线、再画矩形、用于抠图
使用QWidget实现翻转
12-08
自实现的一个翻转QWidget的demo；采用QPainter和QPropertyAnimation实现，是一个学习动画设计的高效demo
QT界面旋转切换Widget
06-06
QT界面的旋转切换样例，可以实现旋转效果，在切换不同显示内容时效果较好。
Qt语言从入门到精通
06-09
QT语言学习教程,本课程主要目的：把知识起点降到全网最低以适合没有Qt编程或刚接触过Qt的人群出发考虑。基础部分：介绍Qt编程环境安装，编程环境使用技巧，及以Qt开发起点界面开发必不可少的UI控件使用编程为引导做到让学习者由生变熟的转化过程。进阶部分：主要以一个例子开始讲解实际开发过程所需技能要达到的成度即数据的存储展示、界面的自由灵活定制、线程高效使用。课程的总体主要实现目标是让学者体会和熟悉上手Qt到走进实际开发的两个过程。该视频课程内容涉及QT IDE的使用技巧、标签Label、按钮PushButton、输入输出LineEdit、下拉选择ComboBox、函数Function、槽函数Slots、信号Signals、链接函数Connection、Qt类封装、QtObject类分析、控件布局QLayout、布局调整期Spacer、线程与消息队列QueuedConnection、线程与事件循环QEventLoop、线程同步之互斥锁Qmutex、Qt文件监控QFileSystemWatcher、数据库、网络、文件操作等必不可少的内容。
QT中学习Opengl---（旋转、平移、缩放）
比卡丘不皮的博客
02-17 4092
前言： 本文的代码是 LearnOpenGL 中对应代码，这里提供学习，大家喜欢的可去官方网站去看看: LearnOpenGL-CNhttps://learnopengl-cn.readthedocs.io/zh/latest/本章简单记录，使用旋转、平移、缩放。矩阵相关计算是基础东西，记得以前还问老师，学习高代有啥用。哈哈，一切都会用的。 缩放： 基本的矩阵变换： 这样，对应的x y z 对应放大对应倍数。 平移 基本的矩阵变换： 这样就是平移对应位置了。 旋转 沿...
QT学习_场景缩放时图元保持大小并可拖动
weixin_44342705的博客
10-18 577
图元的子部件（如拖拽点，旋转点）不随视口缩放而缩放，且不影响操作（比如点不到操作点）。
QGraphicsItem鼠标拖动图元进行缩放拉伸（四）
流云落尘
08-13 4554
接上一篇，本章将讲解如何通过鼠标拖动图元进行缩放拉伸该章简单讲解了一下如何拖动图元进行缩放，下章将继续讲解如果拖动旋转图元整个工程示例源码下载示例源码。
评论 23
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东.'

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值