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

一、实践效果图

可以看到在图片上层绘制了三笔，当图片放大放小保持图画与图片相对位置的不变性。在需要将批注网络传输再其他地方的当前图片上同样显示(类似远程批注功能)的时候就需要实现这样的功能了，记录图片的相对位置进行传输，不受窗口大小的影响。

二、实现相对位置不变的算法

1、存放时

curPoint.x = ((float)curPoint.x - 2)/(width() - 2)*m_image.width();
curPoint.y = ((float)curPoint.y - 40)/(height() - 40)*m_image.height();
m_lstPoint.push_back(curPoint);

鼠标位置除以窗口大小乘以图片大小 = 鼠标位置乘以(图片在窗口的占比)。
那么记录的位置就是占比位置

2、大小变化重绘时

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);

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

三、绘制图画 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;

        //记录鼠标当前点击的坐标
        m_pStart = event->pos();

        curPoint.x =  event->pos().x();
        curPoint.y = event->pos().y();
       //转换到窗口坐标
        if(width() <= 2 || height() <= 40)
            return ;
        if((float)curPoint.x <= 2 || (float)curPoint.y <= 40)
            return ;
        //转换为相对位置 窗口与图片的相对位置
        curPoint.x = ((float)curPoint.x - 2)/(width() - 2)*m_image.width();
        curPoint.y = ((float)curPoint.y - 40)/(height() - 40)*m_image.height();
        m_lstPoint.push_back(curPoint);
    }
}
//鼠标移动事件 结合变量记录图画的轨迹
void Widget::mouseMoveEvent(QMouseEvent *event)
{
    if (m_bValild)
    {
        QPoint pt = event->pos();

        Position curPoint;
        curPoint.x = event->pos().x();
        curPoint.y = event->pos().y();

//        //转换到窗口坐标
        if(width() <= 2 || height() <= 40)
            return ;
        if((float)curPoint.x <= 2 || (float)curPoint.y <= 40)
            return ;

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

        curPoint.x = ((float)curPoint.x - 2)/(width() - 2)*m_image.width();
        curPoint.y  = ((float)curPoint.y - 40)/(height() - 40)*m_image.height();
        m_lstPoint.push_back(curPoint);
    }
}
//鼠标释放事件 表示当前一次图画结束
void Widget::mouseReleaseEvent(QMouseEvent *event)
{
    if (m_bValild && m_bIsMark == true)
    {
        m_bValild = false;
        m_markAllData.push_back(m_lstPoint);
        m_bRepaint = true;
        m_lstPoint.clear();
    }
}

int Widget::QColorToInt(const QColor &color)
{
    unsigned short blue = color.blue();
    unsigned short green = color.green();
    unsigned short red = color.red();

    int nRet = color.blue() << 16|color.green() << 8| color.red();
    return nRet;
}

void Widget::clearAllPaint()
{
    if (m_scene)
        m_scene->clear();
    m_markAllData.clear();
}

//可以用于底层图片的变化
void Widget::updateImage(const QImage &image)
{
    m_image = image;
    //触发paintEvent绘画事件 根据屏幕图案，不改变批注位置的
    update();
}
//绘画
void Widget::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    if (!m_image.isNull())
    {
        m_Sizemutex.lock();
        ///m_image = m_image.scaled(width()-40, height()-40, Qt::KeepAspectRatio, Qt::SmoothTransformation);  // 按比例缩放
        QRect srcRect(0, 0, m_image.width(), m_image.height());
        QRect dstRect(2, 40, width()-2, height()-40);
        painter.drawImage(dstRect, m_image, srcRect);
        m_Sizemutex.unlock();
    }

    QWidget::paintEvent(event);
}
//三个按钮的点击事件
void Widget::on_startMark_clicked()
{
    m_bIsMark = true;
}

void Widget::on_clearMark_clicked()
{
    if (m_scene)
        m_scene->clear();
    m_markAllData.clear();
}

void Widget::on_endMark_clicked()
{
    m_bIsMark = false;
}