Qt图形图像开发曲线图表模块QChart库缩放/平移详细方法与实例

时间:2022-11-14 17:38:01

1、使用QChartView来缩放

(1)用鼠标框选一个矩形,把图放大到这个矩形

QChartView::setRubberBand(QChartView::RectangleRubberBand);//XY方向同时放大到鼠标画出的矩形大小(也可以设置为只放大X轴或Y轴)

(2)setRubberBand函数同时也能使鼠标右键,具备缩小图的功能。

2、使用Qchart来平移和缩放

QChart::scroll(-10, 5);//整体平移(-10, 5),两个参数分别为Δx和Δy

QChart::zoomIn(x,y,width,height);//缩放到指定的矩形

QChart::zoom(0.9)  //整体缩放,参数为放缩系数,<1代表缩小,>1代表放大

QChart::zoomReset()  //把所有做过的zoomIn、zoomOut、zoom全部撤销

3、使用QValueAxis或者QDateTimeAxis来平移和缩放

原理就是,通过设置X/Y轴的范围来实现平移和缩放。

例如,当前显示X的显示范围为[20, 50],如果我们把X轴的显示范围扩大到[0, 80],这样做的效果就是显示的图形变小了,也就实现了缩放。

例如,当前显示X的显示范围为[0, 30],如果我们把X轴的显示范围扩大到[10, 40],这样做的效果就是显示的图形左移了,也就实现了平移。

示例代码:

QValueAxis *axisX = dynamic_cast<QValueAxis*>(Chart->axisX(pLineSeries));//

qreal cur_x_min = axisX->min();

qreal cur_x_max = axisX->max();

axisX->setRange(cur_x_min + 20, cur_x_max + 20);//图形向左平移20(为什么+代表左移?仔细想想就明白了)

放缩与平移的示例代码同理

Qt曲线图表模块QChart库缩放、平移实例

运行效果如下:

Qt图形图像开发曲线图表模块QChart库缩放/平移详细方法与实例

.h文件代码

  1. #ifndef QTCHARTDEMOZOOM_H_38020FA5_FC74_4395_A807_61BF924D2F06
  2. #define QTCHARTDEMOZOOM_H_38020FA5_FC74_4395_A807_61BF924D2F06
  3. #include <QtCharts/QChartView>
  4. using namespace QtCharts;
  5. class QtChartDemoZoom : public QChartView
  6. {
  7. Q_OBJECT
  8. public:
  9. QtChartDemoZoom(QWidget* pParent = nullptr);
  10. ~QtChartDemoZoom();
  11. protected:
  12. virtual void mouseMoveEvent(QMouseEvent *pEvent) override;
  13. virtual void mousePressEvent(QMouseEvent *pEvent) override;
  14. virtual void mouseReleaseEvent(QMouseEvent *pEvent) override;
  15. virtual void wheelEvent(QWheelEvent *pEvent) override;
  16. private:
  17. bool m_bMiddleButtonPressed;
  18. QPoint m_oPrePos;
  19. };
  20. #endif //QTCHARTDEMOZOOM_H_38020FA5_FC74_4395_A807_61BF924D2F06

.cpp文件代码

  1. #include <QLineSeries>
  2. QtChartDemoZoom::QtChartDemoZoom(QWidget* pParent /*= nullptr*/)
  3. : QChartView(pParent)
  4. , m_bMiddleButtonPressed(false)
  5. , m_oPrePos(0, 0)
  6. {
  7. QLineSeries *pLineServies = new QLineSeries();
  8. for (int i = 0; i < 100; ++i)
  9. {
  10. pLineServies->append(i, qrand() % 10);
  11. }
  12. this->chart()->addSeries(pLineServies);
  13. this->chart()->createDefaultAxes();
  14. }
  15. QtChartDemoZoom::~QtChartDemoZoom()
  16. {
  17. }
  18. void QtChartDemoZoom::mouseMoveEvent(QMouseEvent *pEvent)
  19. {
  20. if (m_bMiddleButtonPressed)
  21. {
  22. QPoint oDeltaPos = pEvent->pos() - m_oPrePos;
  23. this->chart()->scroll(-oDeltaPos.x(), oDeltaPos.y());
  24. m_oPrePos = pEvent->pos();
  25. }
  26. __super::mouseMoveEvent(pEvent);
  27. }
  28. void QtChartDemoZoom::mousePressEvent(QMouseEvent *pEvent)
  29. {
  30. if (pEvent->button() == Qt::MiddleButton)
  31. {
  32. m_bMiddleButtonPressed = true;
  33. m_oPrePos = pEvent->pos();
  34. this->setCursor(Qt::OpenHandCursor);
  35. }
  36. __super::mousePressEvent(pEvent);
  37. }
  38. void QtChartDemoZoom::mouseReleaseEvent(QMouseEvent *pEvent)
  39. {
  40. if (pEvent->button() == Qt::MiddleButton)
  41. {
  42. m_bMiddleButtonPressed = false;
  43. this->setCursor(Qt::ArrowCursor);
  44. }
  45. __super::mouseReleaseEvent(pEvent);
  46. }
  47. void QtChartDemoZoom::wheelEvent(QWheelEvent *pEvent)
  48. {
  49. qreal rVal = std::pow(0.999, pEvent->delta()); // 设置比例
  50. // 1. 读取视图基本信息
  51. QRectF oPlotAreaRect = this->chart()->plotArea();
  52. QPointF oCenterPoint = oPlotAreaRect.center();
  53. // 2. 水平调整
  54. oPlotAreaRect.setWidth(oPlotAreaRect.width() * rVal);
  55. // 3. 竖直调整
  56. oPlotAreaRect.setHeight(oPlotAreaRect.height() * rVal);
  57. // 4.1 计算视点,视点不变,围绕中心缩放
  58. //QPointF oNewCenterPoint(oCenterPoint);
  59. // 4.2 计算视点,让鼠标点击的位置移动到窗口中心
  60. //QPointF oNewCenterPoint(pEvent->pos());
  61. // 4.3 计算视点,让鼠标点击的位置尽量保持不动(等比换算,存在一点误差)
  62. QPointF oNewCenterPoint(2 * oCenterPoint - pEvent->pos() - (oCenterPoint - pEvent->pos()) / rVal);
  63. // 5. 设置视点
  64. oPlotAreaRect.moveCenter(oNewCenterPoint);
  65. // 6. 提交缩放调整
  66. this->chart()->zoomIn(oPlotAreaRect);
  67. __super::wheelEvent(pEvent);
  68. }

本文讲解了Qt曲线图表模块QChart库缩放/平移详细方法与实例,更多关于Qt曲线图表模块QChart库的知识请查看下面的相关链接

原文链接:https://blog.csdn.net/qq_31073871/article/details/82990961