QT之利用QGraphicsScene图布完成在图片上层图画并放缩保持相对位置不变_qgraphicsscene上添加图片(2)

最新推荐文章于 2024-05-14 18:30:17 发布
最新推荐文章于 2024-05-14 18:30:17 发布
阅读量271 收藏 5
点赞数 6
分类专栏： 程序员 文章标签： 物联网 嵌入式硬件 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85014396/article/details/138865211
版权

收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。
img
img

如果你需要这些资料，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

这个时候就反过来 记录的位置除以图片大小乘以当前窗口大小 = 当前窗口大小需要显示的位置

三、绘制图画 QGraphicsView透明窗口、QGraphicsScene画布添加图画

定义属性

m_graphicsView = new QGraphicsView(this);
m_graphicsView->setStyleSheet("padding:0px;border:0px");
m_graphicsView->setStyleSheet("background:transparent;border:0px");
m_graphicsView->setAttribute(Qt::WA_TransparentForMouseEvents);
m_graphicsView->setGeometry(2, 40, width(), height());
m_graphicsView->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
m_graphicsView->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);

m_graphicsView->show();
m_scene = new QGraphicsScene();
m_scene->setSceneRect(2, 40, width(), height());
m_graphicsView->setScene(m_scene);

窗口大小变化是也要跟着变化

 //同步将画布大小变化
m_graphicsView->setGeometry(2, 40, width(), height());
m_scene->setSceneRect(2, 40, width(), height());
m_graphicsView->setScene(m_scene);

绘画 添加一横

m_scene->addLine(m_pStart.x(), m_pStart.y(), pt.x(), pt.y(), m_pen);

四、代码实践
头文件

#ifndef WIDGET\_H
#define WIDGET\_H

#include <QWidget>
#include <QGraphicsView>
#include <QGraphicsScene>
#include <vector>
#include <QMutex>
namespace Ui {
class Widget;
}
struct Position
{
    int x;
    int y;
};
class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget \*parent = 0);
    ~Widget();
    void updateImage( const QImage &image);
    void clearAllPaint();

    int QColorToInt(const QColor &color);
    void setWhiteboardId(const std::string &boardId);

protected:
    void mousePressEvent(QMouseEvent \*event);
    void mouseMoveEvent(QMouseEvent \*event);
    void mouseReleaseEvent(QMouseEvent \*event);
    virtual void paintEvent(QPaintEvent \*event);
    void resizeEvent(QResizeEvent \*event);

private slots:
    void on\_startMark\_clicked();

    void on\_clearMark\_clicked();

    void on\_endMark\_clicked();

private:
    void  repaint();
    Ui::Widget \*ui;
    QImage  m_image;

    QGraphicsView \*m_graphicsView = NULL;
    QGraphicsScene \*m_scene = NULL;
    qreal m_scale = 1;
    std::vector<QGraphicsLineItem \*> m_vcItem;
    QPen    m_pen;
    QPoint  m_pStart;

    bool    m_bValild = false;
    bool    m_bIsMark = false;
    bool    m_bRepaint = false;

    QMutex m_Sizemutex;

    std::string m_strConfId;
    std::string m_strUsrId;


    std::vector<Position>    m_lstPoint;
    std::vector<std::vector<Position>> m_markAllData;
};

#endif // WIDGET\_H



#include "widget.h"
#include "ui\_widget.h"
#include <QRect>
#include <QPainter>
#include <QGraphicsView>
#include <QGraphicsScene>
#include <QRectF>
#include <QGraphicsItem>
#include <QPen>
#include <QDebug>
#include <QResizeEvent>
Widget::Widget(QWidget \*parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);

    //利用 QGraphicsView 试图结合 QGraphicsScene 画布在图片上方叠加一层实现图画
    m_graphicsView = new QGraphicsView(this);
    m_graphicsView->setStyleSheet("padding:0px;border:0px");
    m_graphicsView->setStyleSheet("background:transparent;border:0px");
    m_graphicsView->setAttribute(Qt::WA_TransparentForMouseEvents);
    m_graphicsView->setGeometry(2, 40, width(), height());
    m_graphicsView->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
    m_graphicsView->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);

    m_graphicsView->show();
    m_scene = new QGraphicsScene();
    m_scene->setSceneRect(2, 40, width(), height());
    m_graphicsView->setScene(m_scene);

    m_pen.setStyle(Qt::SolidLine);
    m_pen.setColor(Qt::red);
    m_pen.setWidth(2);

    m_image.load("1.png");
}

Widget::~Widget()
{
   if (m_graphicsView)
   {
       delete m_graphicsView;
       m_graphicsView = NULL;
   }

   if (m_scene)
   {
       delete m_scene;
       m_scene = NULL;
   }

   delete ui;
}
//重绘事件 当窗口图片大小变化的时候我们的图画应该也要随着变化，保持与图片位置的不变性
void  Widget::repaint()
{
    int currentWidth = width();
    int currentHeight = height();
    if(currentWidth == 40 || currentHeight== 40)//做一下保护
        return ;
    //qDebug()<<currentWidth << " " << currentHeight;

    //重绘
    m_Sizemutex.lock();
    if (m_scene)
        m_scene->clear();
    int lines = m_markAllData.size();

    for(int i = 0; i < lines; i++)
    {
        //算法保持相对位置
        //-2是是x轴留一部分不填充 -40是上面按钮的高度抽出来
        int startX = ((float)m_markAllData[i][0].x)/m_image.width()\*(currentWidth - 2);
        startX += 2;
        int startY = ((float)m_markAllData[i][0].y)/m_image.height()\*(currentHeight - 40);
        startY += 40;
        qDebug() << "startX=" << startX << "startY" << startY << "currentWidth=" << currentWidth << "currentHeight" << currentHeight;

        for (int j = 1; j < m_markAllData[i].size(); j++) {
            int x = ((float)m_markAllData[i][j].x)/m_image.width()\*(currentWidth - 2);
            int y = ((float)m_markAllData[i][j].y)/m_image.height()\*(currentHeight - 40);
            x += 2;
            y += 40;
            m_scene->addLine(startX, startY, x, y, m_pen);
            startX = x;
            startY = y;
        }
    }
    m_Sizemutex.unlock();
}
//窗口大小变化触发事件
void Widget::resizeEvent(QResizeEvent \*event)
{
    //同步将画布大小变化
    m_graphicsView->setGeometry(2, 40, width(), height());
    m_scene->setSceneRect(2, 40, width(), height());
    m_graphicsView->setScene(m_scene);

    //并根据记录的位置重新图画保持与图片位置的一致性
    repaint();

    QWidget::resizeEvent(event);
}
//鼠标按下事件 表示图画开始
void Widget::mousePressEvent(QMouseEvent \*event)
{
    if ((event->button() == Qt::LeftButton) && (m_bIsMark == true))
    {
        m_bValild = true;
        Position curPoint;



**收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。**
![img](https://img-blog.csdnimg.cn/img_convert/3972d9d7c1be9b1ba20c8a9009ea640a.png)
![img](https://img-blog.csdnimg.cn/img_convert/f5306f34e0a244d8016a2b3231d8e322.png)

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618679757)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人**

**都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

。**
[外链图片转存中...(img-sQAnYqKm-1715682531973)]
[外链图片转存中...(img-M5kXaU8l-1715682531974)]

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618679757)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人**

**都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
2401_85014396
关注
  • 6
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QGraphicsScene进行画图
道亦无名
04-16 3005
ui->setupUi(this); QGraphicsScene *scen = new QGraphicsScene; QRectF unitRect(0,0,200,100); for(int i =0; i < 4; i++){ QRectF portRect(200,25*i,20,20); scen->add...
QT之利用QGraphicsScene图布完成在图片上层图画并放缩保持相对位置不变
zw1996的博客
05-05 4751
一、实践效果图 可以看到在图片上层绘制了三笔，当图片放大放小保持图画与图片相对位置的不变性。在需要将批注网络传输再其他地方的当前图片上同样显示(类似远程批注功能)的时候就需要实现这样的功能了，记录图片的相对位置进行传输，不受窗口大小的影响。 二、实现相对位置不变的算法 1、存放时 curPoint.x = ((float)curPoint.x - 2)/(width() - 2)*m_image.width(); curPoint.y = ((float)curPoint.y - 40)/(height
QGraphicsScene中Item缩放问题
热门推荐
柠檬柠檬C的博客
05-22 1万+
缩放过程中有两种实现效果 图1 缩放view 图2 缩放scene 可以看出缩放view时Item显示也会跟着放大缩小，缩放scene则Item显示大小不会随之变化。Item几何信息是根据View视口而定？源码 //此时View设置大小为400X300 scene->setSceneRect(0,0,4000,3000); QGraphicsRectItem* item = new
Qt开发画图软件 QgraphicsScene
09-13
初次qt，主要基于Qgraphics Scene QgraphicsView QgraphicsItem 三个类构建的 写的不好多多包含，包括线面的描绘以及 编辑，放大，缩小，点选，面选
QGraphicsView的缩放
yuchunhai321的博客
08-21 4478
方法一： 不带ui界面 因为要实现一个功能是，拖动view所在的窗口，可以显示scene中所有的信息，在网上找了很多资料，都是在缩放后通过scrollView进行拖动的，但是这个拖动是有问题的，只是拖动对应的scrollView中的数据，这不是我要进行拖动可以看到出来viewport中的数据，还包括很多无法显示的scene的其他部分 代码如下： .h #ifndef MAINWINDOW...
SnakeEat.zip_QGraphicsScene_QGraphicsView_QT小游戏_Qt游戏 贪吃蛇_qt贪吃蛇
07-14
利用Qt 实现的贪吃蛇小游戏,采用QT自带的QGraphicsView,QGraphicsScene框架实现。
qt-draw.rar_QT 图片_QT 显示图片_qt显示图片
09-20
在本示例程序"qt-draw.rar"中，我们将探讨如何利用QT来显示图片，这对于任何需要处理图像的应用程序都是非常基础且重要的功能。 首先，QT中的`QImage`类是用于处理图像的基本类，它可以加载、保存和操作各种格式的...
Qt.rar_QT_QT 图片_qt BMP_qt开发动图_用qt绘制动图
09-21
4. 将QGraphicsPixmapItem添加到QGraphicsScene中，并设置初始位置。 5. 实现一个定时器，按照一定间隔依次更改QGraphicsPixmapItem的位置或透明度，模拟动画效果。 6. 连接定时器的timeout信号到一个槽函数，该函数...
draglabel.zip_QT 图片浏览_Qt 图片浏览器_Qt图片浏览器
09-20
2. **Qt Creator**: 作为Qt的主要开发环境，Qt Creator提供了代码编辑器、调试器、构建系统、版本控制集成等功能，使得开发者能够在单一的工作台上完成整个项目的开发流程。 3. **图片浏览组件**: 在Qt中，可以使用...
qt_on_android_doorbell.rar_android_android Qt_qt android_qt图片_编程
09-24
"QT on Android编程实现手机屏幕显示和隐藏文字图片功能"这个主题涵盖了如何在Android设备上利用Qt库创建一个应用程序，该程序能够显示和控制文本及图像的可见性。Qt是一个强大的C++框架，支持多种操作系统，包括...
QGraphicsScene管理QGraphicsItem(单击/选择/移动/缩放/删除）
创造晴天
06-15 5138
文章目录前言简述操作细节示例效果源码 前言 本文参考博文https://blog.csdn.net/liang19890820/article/details/53504323 简述 在图形视图框架中，QGraphicsScene 提供一个快速的接口，用于管理大量 item，QGraphicsItem 是场景中 item 的基类。 图形视图提供了一些典型形状的标准 item，当然，我们也可以自定义 item。除此之外，QGraphicsItem 还支持以下特性： ​ 鼠标按下、移动、释放和双击事件，以及鼠标
QT之利用QGraphicsScene图布完成在图片上层图画并放缩保持相对位置不变_qgraphicsscene上添加图片
最新发布
2401_85014406的博客
05-14 1042
if(currentWidth == 40 || currentHeight== 40)//做一下保护。//重绘事件 当窗口图片大小变化的时候我们的图画应该也要随着变化，保持与图片位置的不变性。//鼠标按下事件 表示图画开始。//可以用于底层图片的变化。//窗口大小变化触发事件。// //转换到窗口坐标。
图片放大缩小并且文字与图片相对位置不变
wudiisss的专栏
12-06 5656
package com.android.activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Color; impo
Qt QGraphicsView移动、缩放
QtCompany的博客
08-04 1577
首先需要明白，view在整个视图框架中的角色是用于显示scene的，所以决定了如何展示scene，包括scale()函数，用于放大缩小所展示的scene；centerOn()函数，决定scene的中心在何方。所有的操作，都不会直接改变scene，改变的只是如何展现scene。view就像窗户，我们可以透过窗户看到窗外的景色。scene就像窗外的景色，需要窗户作为媒介才能够让我们看到，只不过这里的景色（scene）不一定会比窗户（view）大。
qt 控件设置相对位置_qt设置控件相对位置
weixin_42377407的博客
12-29 3337
QT关于控件的教程_计算机软件及应用_IT/计算机_专业资料。zl使用Linux...此例程主要展示用代码方式创建控件并用 Layout 管理类对其进行布局; 例程来自 Qt5.2,如过是默认安装,代码位于: C:\\Qt\\Qt5.2.0\\5.2.0\\mingw48_32\\example......3.窗口位置更新函数 updataPosition()的实现 void myDialog::...
Qt QGraphicsScene 基于视频的绘图
qthello
01-31 1175
利用qml 基于opengl 进行渲染，可以达到任意图形的绘制，但是帧率 只有25帧左右。曾经搞在线教育时，尝试在视频上进行文字或者图形的绘制，但是发现利用Qt widget 传sdk 句柄的方式，只能使用窗口叠加的方式（同时将QGraphicsPixmapItem放到最底层，即可达到在上边绘制任意图形的目的。以直线为例，实现的时候 先画一个普通的矩形，然后添加两个控制点，用于改变大小和旋转，通过控制点中 推拽的信号 来改变矩形的大小和旋转的角度，并且在矩形的paint函数中，更新控制点的位置。
qt中qgraphicsitem在scene中选择的图层问题
weixin_42599908的博客
01-18 415
在Qt中，QGraphicsScene类维护了一组QGraphicsItem，并且每个QGraphicsItem都有一个z值(图层)。当您在场景中添加一个项目时，它将被放置在最顶层。如果您想要将一个项目移动到不同的图层，可以使用QGraphicsItem :: setZValue(double z)函数来设置该项目的z值。在选择项目时，最顶层的项目将被选中。如果您想要选择在底层的项目，可以使用QG...
QGraphicsScene缩放后复原 QGraphicsView放大缩小移动
qq_35662333的博客
03-25 891
首先需要明白，view在整个视图框架中的角色是用于显示scene的，所以决定了如何展示scene，包括scale()函数，用于放大缩小所展示的scene；centerOn()函数，决定scene的中心在何方。所有的操作，都不会直接改变scene，改变的只是如何展现scene。view就像窗户，我们可以透过窗户看到窗外的景色。scene就像窗外的景色，需要窗户作为媒介才能够让我们看到，只不过这里的景色（scene）不一定会比窗户（view）大。
【PyQt】QGraphicsView场景导出为图片
huanqing2010的专栏
08-27 782
在将QGraphicsView的图形导出为图片的编码过程中，总结出如何在PyQt中安全的使用painter类。本文附带将QGraphicsView的图形导出为图片的完整代码，及常见错误解析和解决方案。
qt 怎么在qgraphicsScene中添加qlineedit
05-30
您可以将QLineEdit放置在QGraphicsProxyWidget中，然后将该QGraphicsProxyWidget添加到QGraphicsScene中。以下是一个简单的示例代码： ```python from PyQt5.QtWidgets import QGraphicsScene, QGraphicsView, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值