Qt QChart 自定义qChartView（重写鼠标事件）完美实现缩放与平移（新增android下手势缩放实现）

原文链接：https://blog.csdn.net/kpengk/article/details/105800525

原博主写的特别好，我找了很久才找到这篇资源，直接复制就可以用，而且效果实现也很棒，在此感谢！

功能

实现QtCharts曲线图移动和缩放：

1. 按住鼠标左键拖动曲线可移动曲线；
2. 滚动鼠标滚轮实现图形X轴方向的缩放；
3. 按住Ctrl，滚动鼠标滚轮实现图形Y轴方向的缩放；
4. 按鼠标右键恢复图形初始状态;
5. 缩放过程以鼠标当前位置为缩放中心；
6. 鼠标移动过程中会在左上角显示当前坐标。

实现

继承QChartView，主要重新实现鼠标事件和键盘事件。

1. 移动图形利用QChart的scroll函数；
   void scroll(qreal dx, qreal dy, const QRectF &rect = QRectF());
   鼠标按下时，记录按下状态，并记录当前坐标位置，在移动事件内计算鼠标移动的距离，以此设置图形滚动的距离，即可实现移动
2. 缩放则设置当前坐标轴的显示范围；
   void setRange(const QVariant &min, const QVariant &max);

代码

.cpp文件

1. 实现移动

void ChartView::mousePressEvent(QMouseEvent *event)
{
	if (event->button() == Qt::LeftButton)
	{
        m_lastPoint = event->pos();
        m_isPress = true;
	}
}

void ChartView::mouseMoveEvent(QMouseEvent *event)
{
	if (!m_coordItem)
	{
		m_coordItem = new QGraphicsSimpleTextItem(this->chart());
		m_coordItem->setZValue(5);
		m_coordItem->setPos(100, 60);
		m_coordItem->show();
	}
	const QPoint curPos = event->pos();
	QPointF curVal = this->chart()->mapToValue(QPointF(curPos));
	QString coordStr = QString("X = %1, Y = %2").arg(curVal.x()).arg(curVal.y());
	m_coordItem->setText(coordStr);

	if (m_isPress)
	{
		QPoint offset = curPos - m_lastPoint;
		m_lastPoint = curPos;
		if (!m_alreadySaveRange)
		{
			this->saveAxisRange();
			m_alreadySaveRange = true;
		}
		this->chart()->scroll(-offset.x(), offset.y());
	}
}

void ChartView::mouseReleaseEvent(QMouseEvent *event)
{
	m_isPress = false;
	if (event->button() == Qt::RightButton)
	{
		if (m_alreadySaveRange)
		{
			this->chart()->axisX()->setRange(m_xMin, m_xMax);
			this->chart()->axisY()->setRange(m_yMin, m_yMax);
		}
	}
}

//保存原始位置
void ChartView::saveAxisRange()
{
    QValueAxis *axisX = dynamic_cast<QValueAxis*>(this->chart()->axisX());
    m_xMin = axisX->min();
    m_xMax = axisX->max();
    QValueAxis *axisY = dynamic_cast<QValueAxis*>(this->chart()->axisY());
    m_yMin = axisY->min();
    m_yMax = axisY->max();
}

2. 实现缩放

void ChartView::wheelEvent(QWheelEvent *event)
{
   const QPoint curPos = event->pos();
   QPointF curVal = this->chart()->mapToValue(QPointF(curPos));

   if (!m_alreadySaveRange)
   {
   	this->saveAxisRange();
   	m_alreadySaveRange = true;
   }
   const double factor = 1.5;//缩放比例
   if (m_ctrlPress)
   {//Y轴
   	QValueAxis *axisY = dynamic_cast<QValueAxis*>(this->chart()->axisY());
   	const double yMin = axisY->min();
   	const double yMax = axisY->max();
   	const double yCentral = curVal.y();

   	double bottomOffset;
   	double topOffset;
   	if (event->delta() > 0)
   	{//放大
   		bottomOffset = 1.0 / factor * (yCentral - yMin);
   		topOffset = 1.0 / factor * (yMax - yCentral);
   	}
   	else
   	{//缩小
   		bottomOffset = 1.0 * factor * (yCentral - yMin);
   		topOffset = 1.0 * factor * (yMax - yCentral);
   	}

   	this->chart()->axisY()->setRange(yCentral - bottomOffset, yCentral + topOffset);
   }
   else
   {//X轴
   	QValueAxis *axisX = dynamic_cast<QValueAxis*>(this->chart()->axisX());
   	const double xMin = axisX->min();
   	const double xMax = axisX->max();
   	const double xCentral = curVal.x();

   	double leftOffset;
   	double rightOffset;
   	if (event->delta() > 0)
   	{//放大
   		leftOffset = 1.0 / factor * (xCentral - xMin);
   		rightOffset = 1.0 / factor * (xMax - xCentral);
   	}
   	else
   	{//缩小
   		leftOffset = 1.0 * factor * (xCentral - xMin);
   		rightOffset = 1.0 * factor * (xMax - xCentral);
   	}
   	this->chart()->axisX()->setRange(xCentral - leftOffset, xCentral + rightOffset);
   }
}
}

以下为Qt Android下使用手势实现Qchart的缩放

要使用手势，先在构造函数中注册允许使用手势

    //this->setAttribute(Qt::WA_AcceptTouchEvents);              //设置接收触摸事件
    grabGesture(Qt::PinchGesture);								//这里只grabGesture了PinchGesture

//监听事件类型
bool ChartView::event(QEvent *event)
{
    switch(event->type())
    {
//    case QEvent::TouchBegin:
//        //accepting touch begin allows us to get touch updates
//        return true;
//        break;
    case QEvent::Gesture:               //如果是手势事件就交给手势事件处理
        return gestureEvent(static_cast<QGestureEvent*>(event));
        break;
    default:                            //默认为鼠标事件
        break;
    }
    return QWidget::event(event);
}

//处理手势事件
bool ChartView::gestureEvent(QGestureEvent *event)
{
    if (!m_alreadySaveRange)            //执行手势事件之前先保存原始位置
    {
        this->saveAxisRange();
        m_alreadySaveRange = true;
    }

    if (QGesture *pinch = event->gesture(Qt::PinchGesture))         //如果是捏合手势，进行缩放处理
    {
        pinchTriggered(static_cast<QPinchGesture *>(pinch));
        event->accept();
    }
    return true;
}

//处理缩放事件
void ChartView::pinchTriggered(QPinchGesture *gesture)
{
    QPinchGesture::ChangeFlags changeFlags = gesture->changeFlags();
    if (changeFlags & QPinchGesture::ScaleFactorChanged)
    {
        currentStepScaleFactor = gesture->scaleFactor();            //合计放大系数
    }
    if (gesture->state() == Qt::GestureFinished)
    {
        scaleFactor = 1;
        scaleFactor *= currentStepScaleFactor;
        currentStepScaleFactor = 1;
    }

    if(scaleFactor >= 1)
    {
        this->chart()->zoom(1.05);
    }
    else if(scaleFactor < 1)
    {
        this->chart()->zoom(0.95);
    }
    update();

.h文件

#pragma once

#include <QChartView>
#include <QMouseEvent>
#include <QGraphicsSimpleTextItem>

QT_CHARTS_USE_NAMESPACE

class ChartView : public QChartView
{
	Q_OBJECT

public:
    ChartView(QChart *chart, QWidget *parent = nullptr);
	~ChartView();
	// 保存坐标区域，用于复位
	void saveAxisRange();

protected:
	void mousePressEvent(QMouseEvent *event);
	void mouseMoveEvent(QMouseEvent *event);
	void mouseReleaseEvent(QMouseEvent *event);
	void wheelEvent(QWheelEvent *event);
	void keyPressEvent(QKeyEvent *event);
	void keyReleaseEvent(QKeyEvent *event);

//以下3个为Qt Android下Qchart的缩放（单指触点时默认为鼠标点击，所以移动功能可正常使用）
    bool event(QEvent *event) override;             //使用手势实现缩放
    bool gestureEvent(QGestureEvent *event);
    void pinchTriggered(QPinchGesture *gesture);

private:
	QPoint m_lastPoint;
	bool m_isPress;
	bool m_ctrlPress;
	bool m_alreadySaveRange;
	double m_xMin, m_xMax, m_yMin, m_yMax;
	QGraphicsSimpleTextItem* m_coordItem;
};

main文件

#include <QApplication>
#include <QMainWindow>
#include <QLineSeries>
#include "ChartView.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QLineSeries *series = new QLineSeries();


    series->append(0, 6);
    series->append(2, 4);
    series->append(3, 8);
    series->append(7, 4);
    series->append(10, 5);
    *series << QPointF(11, 1) << QPointF(13, 3) << QPointF(17, 6) << QPointF(18, 3) << QPointF(20, 2);

    QChart *chart = new QChart();
    chart->legend()->hide();
    chart->addSeries(series);
    chart->createDefaultAxes();
    chart->setTitle("图形移动和缩放");

    auto *chartView = new ChartView(chart);//使用自定义ChartView
    chartView->setRenderHint(QPainter::Antialiasing);

    QMainWindow window;
    window.setCentralWidget(chartView);
    window.resize(400, 300);
    window.show();

    return a.exec();
}

.pro文件

QT       += core gui charts

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

CONFIG += c++11

# The following define makes your compiler emit warnings if you use
# any Qt feature that has been marked deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS

# You can also make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0

SOURCES += \
    ChartView.cpp \
    main.cpp

HEADERS += \
    ChartView.h

FORMS +=

# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target

ps:将文件都放在这，下次要用可以直接来复制，方便点。