QCustomPlot实现矩形缩放图表

---

意图

我们知道图表有些基本的功能，比如放大（ZoomIn）、缩小（ZoomOut）、拖拽（Drag）、恢复（1：1或ZoomReset）。这些功能QCustomPlot已经几乎都有了，但是选择矩形区域进行缩放的功能没有给出很好的接口，这可能就要我们自己实现了，这就是写这篇文章的目的。

---

实现

QCustomPlot本身有缩放的功能，但是没有实现矩形缩放的接口，所以实现的话无非是在图表上面实现鼠标选择的矩形区域，然后进行比例缩放。我们借助Qt自带的QRubberBand来实现矩形选择区域。看帮助文档和源码，我们可以看到当鼠标在图表区域上的时候，包括鼠标按下，移动，释放，这些动作会发送信号。

所以有两种方法实现：

1. 我们只要以父控件实现槽函数来绑定这些信号来做特定处理就行了
2. 实现QCustomPlot的子类，重载鼠标按下，移动，释放等鼠标事件函数

---

父控件槽函数实现方法

按照QCustomPlot提供的例子，我们写一个最简单的例子。
把QCustomPlot设为MainWindow的centralWidget。

少废话了，上源码吧：
MainWindow的头文件

#ifndef MAINWINDOW_H#define MAINWINDOW_H#include <QMainWindow>#include <QRubberBand>namespace Ui {class MainWindow;}class MainWindow : public QMainWindow{    Q_OBJECTpublic:    explicit MainWindow(QWidget *parent = 0);    ~MainWindow();private slots:    void mousePress(QMouseEvent* mevent);    void mouseMove(QMouseEvent *mevent);    void mouseRelease(QMouseEvent *mevent);    void slotBtn();private:    Ui::MainWindow *ui;    QRubberBand *rubberBand;    QPoint rubberOrigin;};#endif // MAINWINDOW_H

MainWindow的构造函数实现

//初始化QRubberBandrubberBand = new QRubberBand(QRubberBand::Rectangle, ui->customPlot);//从自带的例子中复制的代码ui->customPlot->addGraph();ui->customPlot->graph(0)->setPen(QPen(Qt::blue)); // line color blue for first graphui->customPlot->graph(0)->setBrush(QBrush(QColor(0, 0, 255, 20))); // first graph will be filled with translucent blueui->customPlot->addGraph();ui->customPlot->graph(1)->setPen(QPen(Qt::red)); // line color red for second graph// generate some points of data (y0 for first, y1 for second graph):QVector<double> x(250), y0(250), y1(250);for (int i=0; i<250; ++i){  x[i] = i;  y0[i] = qExp(-i/150.0)*qCos(i/10.0); // exponentially decaying cosine  y1[i] = qExp(-i/150.0);              // exponential envelope}// configure right and top axis to show ticks but no labels:// (see QCPAxisRect::setupFullAxesBox for a quicker method to do this)ui->customPlot->xAxis2->setVisible(true);ui->customPlot->xAxis2->setTickLabels(false);ui->customPlot->yAxis2->setVisible(true);ui->customPlot->yAxis2->setTickLabels(false);// make left and bottom axes always transfer their ranges to right and top axes:connect(ui->customPlot->xAxis, SIGNAL(rangeChanged(QCPRange)), ui->customPlot->xAxis2, SLOT(setRange(QCPRange)));connect(ui->customPlot->yAxis, SIGNAL(rangeChanged(QCPRange)), ui->customPlot->yAxis2, SLOT(setRange(QCPRange)));// pass data points to graphs:ui->customPlot->graph(0)->setData(x, y0);ui->customPlot->graph(1)->setData(x, y1);// let the ranges scale themselves so graph 0 fits perfectly in the visible area:ui->customPlot->graph(0)->rescaleAxes();// same thing for graph 1, but only enlarge ranges (in case graph 1 is smaller than graph 0):ui->customPlot->graph(1)->rescaleAxes(true);// Note: we could have also just called customPlot->rescaleAxes(); instead// Allow user to drag axis ranges with mouse, zoom with mouse wheel and select graphs by clicking:ui->customPlot->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom | QCP::iSelectPlottables);//连接鼠标事件发出的信号，实现绑定connect(ui->customPlot, SIGNAL(mousePress(QMouseEvent*)), this, SLOT(mousePress(QMouseEvent*)));connect(ui->customPlot, SIGNAL(mouseMove(QMouseEvent*)), this, SLOT(mouseMove(QMouseEvent*)));connect(ui->customPlot, SIGNAL(mouseRelease(QMouseEvent*)), this, SLOT(mouseRelease(QMouseEvent*)));//实现恢复1:1功能connect(ui->pushButton, SIGNAL(clicked()), this, SLOT(slotBtn()));

//鼠标按下槽函数void MainWindow::mousePress(QMouseEvent* mevent){    if(mevent->button() == Qt::RightButton)    {        rubberOrigin = mevent->pos();        rubberBand->setGeometry(QRect(rubberOrigin, QSize()));        rubberBand->show();    }}

//鼠标移动槽函数void MainWindow::mouseMove(QMouseEvent *mevent){    if(rubberBand->isVisible())        rubberBand->setGeometry(QRect(rubberOrigin, mevent->pos()).normalized());}

//鼠标释放槽函数void MainWindow::mouseRelease(QMouseEvent *mevent){    Q_UNUSED(mevent);    if (rubberBand->isVisible())    {        const QRect zoomRect = rubberBand->geometry();        int xp1, yp1, xp2, yp2;        zoomRect.getCoords(&xp1, &yp1, &xp2, &yp2);        double x1 = ui->customPlot->xAxis->pixelToCoord(xp1);        double x2 = ui->customPlot->xAxis->pixelToCoord(xp2);        double y1 = ui->customPlot->yAxis->pixelToCoord(yp1);        double y2 = ui->customPlot->yAxis->pixelToCoord(yp2);        ui->customPlot->xAxis->setRange(x1, x2);        ui->customPlot->yAxis->setRange(y1, y2);        rubberBand->hide();        ui->customPlot->replot();    }}

//槽函数实现1:1恢复功能void MainWindow::slotBtn(){    ui->customPlot->rescaleAxes();    ui->customPlot->replot();}

---

子类化QCustomPlot重载鼠标事件函数方法

我们继承QCustomPlot实现子类CustomPlotZoom类。
CustomPlotZoom.h头文件

#ifndef CUSTOMPLOTZOOM_H#define CUSTOMPLOTZOOM_H#include <QPoint>#include "qcustomplot.h"class QRubberBand;class QMouseEvent;class QWidget;class CustomPlotZoom : public QCustomPlot{    Q_OBJECTpublic:    CustomPlotZoom(QWidget * parent = 0);    virtual ~CustomPlotZoom();    void setZoomMode(bool mode);protected:    void mousePressEvent(QMouseEvent * event);    void mouseMoveEvent(QMouseEvent * event);    void mouseReleaseEvent(QMouseEvent * event);private:    bool mZoomMode;    QRubberBand * mRubberBand;    QPoint mOrigin;};#endif // CUSTOMPLOTZOOM_H

CustomPlotZoom构造函数实现

CustomPlotZoom::CustomPlotZoom(QWidget * parent)    : QCustomPlot(parent)    , mZoomMode(false)    , mRubberBand(new QRubberBand(QRubberBand::Rectangle, this)){}

设置矩形缩放功能的使能

void CustomPlotZoom::setZoomMode(bool mode){    mZoomMode = mode;}

鼠标事件的实现

void CustomPlotZoom::mousePressEvent(QMouseEvent * event){    if (mZoomMode)    {        if (event->button() == Qt::RightButton)        {            mOrigin = event->pos();            mRubberBand->setGeometry(QRect(mOrigin, QSize()));            mRubberBand->show();        }    }    QCustomPlot::mousePressEvent(event);}void CustomPlotZoom::mouseMoveEvent(QMouseEvent * event){    if (mRubberBand->isVisible())    {        mRubberBand->setGeometry(QRect(mOrigin, event->pos()).normalized());    }    QCustomPlot::mouseMoveEvent(event);}void CustomPlotZoom::mouseReleaseEvent(QMouseEvent * event){    if (mRubberBand->isVisible())    {        const QRect zoomRect = mRubberBand->geometry();        int xp1, yp1, xp2, yp2;        zoomRect.getCoords(&xp1, &yp1, &xp2, &yp2);        double x1 = xAxis->pixelToCoord(xp1);        double x2 = xAxis->pixelToCoord(xp2);        double y1 = yAxis->pixelToCoord(yp1);        double y2 = yAxis->pixelToCoord(yp2);        xAxis->setRange(x1, x2);        yAxis->setRange(y1, y2);        mRubberBand->hide();        replot();    }    QCustomPlot::mouseReleaseEvent(event);}

---

结果

右键来实现选择矩形区域，因为QCustomPlot左键实现了拖拽功能。

然后可以随便缩放，拖拽。然后点击ZoomReset按钮，就可以实现一键恢复到最初的样子，做到不忘初心。