QCustomPlot实现矩形区域缩放图表

---

意图

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

---

实现

QCustomPlot本身有缩放的功能，但是没有实现矩形缩放的接口，所以实现的话无非是在图表上面实现鼠标选择的矩形区域，然后进行比例缩放。我们借助Qt自带的QRubberBand来实现矩形选择区域。看帮助文档和源码，我们可以看到当鼠标在图表区域上的时候，包括鼠标按下，移动，释放，这些动作会发送信号。所以有两种方法实现，第一种方法我们只要以父控件实现槽函数来绑定这些信号来做特定处理就行了。第二种方法实现QCustomPlot的子类，重载鼠标按下，移动，释放等鼠标事件函数。

---

父控件槽函数实现方法

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

UI界面

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

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QRubberBand>
namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    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的构造函数实现

//初始化QRubberBand
rubberBand = new QRubberBand(QRubberBand::Rectangle, ui->customPlot);

//从自带的例子中复制的代码
ui->customPlot->addGraph();
ui->customPlot->graph(0)->setPen(QPen(Qt::blue)); // line color blue for first graph
ui->customPlot->graph(0)->setBrush(QBrush(QColor(0, 0, 255, 20))); // first graph will be filled with translucent blue
ui->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_OBJECT

public:
    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按钮，就可以实现一键恢复到最初的样子，做到不忘初心。