原文链接:https://blog.csdn.net/kpengk/article/details/105800525
原博主写的特别好,我找了很久才找到这篇资源,直接复制就可以用,而且效果实现也很棒,在此感谢!
功能
实现QtCharts曲线图移动和缩放:
- 按住鼠标左键拖动曲线可移动曲线;
- 滚动鼠标滚轮实现图形X轴方向的缩放;
- 按住Ctrl,滚动鼠标滚轮实现图形Y轴方向的缩放;
- 按鼠标右键恢复图形初始状态;
- 缩放过程以鼠标当前位置为缩放中心;
- 鼠标移动过程中会在左上角显示当前坐标。
实现
继承QChartView,主要重新实现鼠标事件和键盘事件。
- 移动图形利用QChart的scroll函数;
void scroll(qreal dx, qreal dy, const QRectF &rect = QRectF());
鼠标按下时,记录按下状态,并记录当前坐标位置,在移动事件内计算鼠标移动的距离,以此设置图形滚动的距离,即可实现移动 - 缩放则设置当前坐标轴的显示范围;
void setRange(const QVariant &min, const QVariant &max);
代码
.cpp文件
- 实现移动
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();
}
- 实现缩放
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:将文件都放在这,下次要用可以直接来复制,方便点。