Qt QChart 自定義qChartView（重寫鼠標事件）完美實現縮放與平移（新增android下手勢縮放實現）

功能

實現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文件

實現移動

void ChartView::mousePressEvent(QMouseEvent *event)  2 {  3     if (event->button() == Qt::LeftButton)  4  {  5         m_lastPoint = event->pos();  6         m_isPress = true;  7  }  8 }  9 
void ChartView::mouseMoveEvent(QMouseEvent *event) 11 { 12     if (!m_coordItem) 13  { 14         m_coordItem = new QGraphicsSimpleTextItem(this->chart()); 15         m_coordItem->setZValue(5); 16         m_coordItem->setPos(100, 60); 17         m_coordItem->show(); 18  } 19     const QPoint curPos = event->pos(); 20     QPointF curVal = this->chart()->mapToValue(QPointF(curPos)); 21     QString coordStr = QString("X = %1, Y = %2").arg(curVal.x()).arg(curVal.y()); 22     m_coordItem->setText(coordStr); 23 
    if (m_isPress) 25  { 26         QPoint offset = curPos - m_lastPoint; 27         m_lastPoint = curPos; 28         if (!m_alreadySaveRange) 29  { 30             this->saveAxisRange(); 31             m_alreadySaveRange = true; 32  } 33         this->chart()->scroll(-offset.x(), offset.y()); 34  } 35 } 36 
void ChartView::mouseReleaseEvent(QMouseEvent *event) 38 { 39     m_isPress = false; 40     if (event->button() == Qt::RightButton) 41  { 42         if (m_alreadySaveRange) 43  { 44             this->chart()->axisX()->setRange(m_xMin, m_xMax); 45             this->chart()->axisY()->setRange(m_yMin, m_yMax); 46  } 47  } 48 } 49 
//保存原始位置
void ChartView::saveAxisRange() 52 { 53     QValueAxis *axisX = dynamic_cast<QValueAxis*>(this->chart()->axisX()); 54     m_xMin = axisX->min(); 55     m_xMax = axisX->max(); 56     QValueAxis *axisY = dynamic_cast<QValueAxis*>(this->chart()->axisY()); 57     m_yMin = axisY->min(); 58     m_yMax = axisY->max(); 59 }

實現縮放

void ChartView::wheelEvent(QWheelEvent *event)  2 {  3    const QPoint curPos = event->pos();  4    QPointF curVal = this->chart()->mapToValue(QPointF(curPos));  5 
   if (!m_alreadySaveRange)  7  {  8        this->saveAxisRange();  9        m_alreadySaveRange = true; 10  } 11    const double factor = 1.5;//縮放比例
   if (m_ctrlPress) 13    {//Y軸
       QValueAxis *axisY = dynamic_cast<QValueAxis*>(this->chart()->axisY()); 15        const double yMin = axisY->min(); 16        const double yMax = axisY->max(); 17        const double yCentral = curVal.y(); 18 
       double bottomOffset; 20        double topOffset; 21        if (event->delta() > 0) 22        {//放大
           bottomOffset = 1.0 / factor * (yCentral - yMin); 24            topOffset = 1.0 / factor * (yMax - yCentral); 25  } 26        else
       {//縮小
           bottomOffset = 1.0 * factor * (yCentral - yMin); 29            topOffset = 1.0 * factor * (yMax - yCentral); 30  } 31 
       this->chart()->axisY()->setRange(yCentral - bottomOffset, yCentral + topOffset); 33  } 34    else
   {//X軸
       QValueAxis *axisX = dynamic_cast<QValueAxis*>(this->chart()->axisX()); 37        const double xMin = axisX->min(); 38        const double xMax = axisX->max(); 39        const double xCentral = curVal.x(); 40 
       double leftOffset; 42        double rightOffset; 43        if (event->delta() > 0) 44        {//放大
           leftOffset = 1.0 / factor * (xCentral - xMin); 46            rightOffset = 1.0 / factor * (xMax - xCentral); 47  } 48        else
       {//縮小
           leftOffset = 1.0 * factor * (xCentral - xMin); 51            rightOffset = 1.0 * factor * (xMax - xCentral); 52  } 53        this->chart()->axisX()->setRange(xCentral - leftOffset, xCentral + rightOffset); 54  } 55 } 56 }

以下為Qt Android下使用手勢實現Qchart的縮放

要使用手勢，先在構造函數中注冊允許使用手勢

//this->setAttribute(Qt::WA_AcceptTouchEvents); //設置接收觸摸事件
grabGesture(Qt::PinchGesture);                                //這里只grabGesture了PinchGesture

//監聽事件類型
bool ChartView::event(QEvent *event)  3 {  4     switch(event->type())  5  {  6 // case QEvent::TouchBegin:  7 //        //accepting touch begin allows us to get touch updates  8 // return true;  9 // break;
    case QEvent::Gesture:               //如果是手勢事件就交給手勢事件處理
        return gestureEvent(static_cast<QGestureEvent*>(event)); 12         break; 13     default:                            //默認為鼠標事件
        break; 15  } 16     return QWidget::event(event); 17 } 18 
//處理手勢事件
bool ChartView::gestureEvent(QGestureEvent *event) 21 { 22     if (!m_alreadySaveRange)            //執行手勢事件之前先保存原始位置
 { 24         this->saveAxisRange(); 25         m_alreadySaveRange = true; 26  } 27 
    if (QGesture *pinch = event->gesture(Qt::PinchGesture))         //如果是捏合手勢，進行縮放處理
 { 30         pinchTriggered(static_cast<QPinchGesture *>(pinch)); 31         event->accept(); 32  } 33     return true; 34 } 35 
//處理縮放事件
void ChartView::pinchTriggered(QPinchGesture *gesture) 38 { 39     QPinchGesture::ChangeFlags changeFlags = gesture->changeFlags(); 40     if (changeFlags & QPinchGesture::ScaleFactorChanged) 41  { 42         currentStepScaleFactor = gesture->scaleFactor();            //合計放大系數
 } 44     if (gesture->state() == Qt::GestureFinished) 45  { 46         scaleFactor = 1; 47         scaleFactor *= currentStepScaleFactor; 48         currentStepScaleFactor = 1; 49  } 50 
    if(scaleFactor >= 1) 52  { 53         this->chart()->zoom(1.05); 54  } 55     else if(scaleFactor < 1) 56  { 57         this->chart()->zoom(0.95); 58  } 59     update();

.h文件

#pragma once

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

QT_CHARTS_USE_NAMESPACE  8 
class ChartView : public QChartView 10 { 11  Q_OBJECT 12 
public: 14     ChartView(QChart *chart, QWidget *parent = nullptr); 15     ~ChartView(); 16     // 保存坐標區域，用於復位
    void saveAxisRange(); 18 
protected: 20     void mousePressEvent(QMouseEvent *event); 21     void mouseMoveEvent(QMouseEvent *event); 22     void mouseReleaseEvent(QMouseEvent *event); 23     void wheelEvent(QWheelEvent *event); 24     void keyPressEvent(QKeyEvent *event); 25     void keyReleaseEvent(QKeyEvent *event); 26 
//以下3個為Qt Android下Qchart的縮放（單指觸點時默認為鼠標點擊，所以移動功能可正常使用）
    bool event(QEvent *event) override;             //使用手勢實現縮放
    bool gestureEvent(QGestureEvent *event); 30     void pinchTriggered(QPinchGesture *gesture); 31 
private: 33  QPoint m_lastPoint; 34     bool m_isPress; 35     bool m_ctrlPress; 36     bool m_alreadySaveRange; 37     double m_xMin, m_xMax, m_yMin, m_yMax; 38     QGraphicsSimpleTextItem* m_coordItem; 39 };

main文件

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

int main(int argc, char *argv[])  7 {  8  QApplication a(argc, argv);  9 
    QLineSeries *series = new QLineSeries(); 11 

    series->append(0, 6); 14     series->append(2, 4); 15     series->append(3, 8); 16     series->append(7, 4); 17     series->append(10, 5); 18     *series << QPointF(11, 1) << QPointF(13, 3) << QPointF(17, 6) << QPointF(18, 3) << QPointF(20, 2); 19 
    QChart *chart = new QChart(); 21     chart->legend()->hide(); 22     chart->addSeries(series); 23     chart->createDefaultAxes(); 24     chart->setTitle("圖形移動和縮放"); 25 
    auto *chartView = new ChartView(chart);//使用自定義ChartView
    chartView->setRenderHint(QPainter::Antialiasing); 28 
 QMainWindow window; 30  window.setCentralWidget(chartView); 31     window.resize(400, 300); 32  window.show(); 33 
    return a.exec(); 35 }

.pro文件

QT       += core gui charts  2 
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets  4 
CONFIG += c++11

# The following define makes your compiler emit warnings if you use  8 # any Qt feature that has been marked deprecated (the exact warnings  9 # depend on your compiler). Please consult the documentation of the 10 # deprecated API in order to know how to port your code away from it. 11 DEFINES += QT_DEPRECATED_WARNINGS 12 
# You can also make your code fail to compile if it uses deprecated APIs. 14 # In order to do so, uncomment the following line. 15 # You can also select to disable deprecated APIs only up to a certain version of Qt. 16 #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0

SOURCES += \ 19  ChartView.cpp \ 20  main.cpp 21 
HEADERS += \ 23  ChartView.h 24 
FORMS +=

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

ps:將文件都放在這，下次要用可以直接來復制，方便點。