首页 > 代码库 > QCustomplot使用分享(五) 布局

QCustomplot使用分享(五) 布局

一、历史对比

  关于QCPLayoutElement这个元素的讲解之前,我想先对1.3.2release版本和2.0.0beta版本的该元素做以简单的对比介绍,首先,1.3.2release版本时,鼠标单击时,如果按下的位置是一个布局元素,那么QCustomPlot首先会把这个事件回调给该被点击的元素,并且mouse系列的方法都是这样传递给QCPLayoutElement对象,该布局元素的声明会像这样QPointer<QCPLayoutElement> mMouseEventElement;但是到了2.0.0beta版本时,QCustomPlot源码做出了很大的调整,不仅仅是QCPLayoutElement布局元素可以接收鼠标事件,凡事继承自QCPLayerable类的元素都可以支持鼠标事件,因为mouse一系列的方法被移到了QCPLayerable类中。下面我分别贴出这两个版本时的mousePressEvent处理方法

    1.3.2release版本鼠标按下处理方式

 1 void QCustomPlot::mousePressEvent(QMouseEvent *event) 2 { 3     emit mousePress(event); 4     mMousePressPos = event->pos(); // need this to determine in releaseEvent whether it was a click (no position change between press and release) 5  6     // call event of affected layout element: 7     mMouseEventElement = layoutElementAt(event->pos());//后去当前选中布局元素 并调用其相关接口 8     if (mMouseEventElement) 9         mMouseEventElement->mousePressEvent(event);10 11     QWidget::mousePressEvent(event);12 }

    2.0.0beta版本鼠标按下处理方式

 1 void QCustomPlot::mousePressEvent(QMouseEvent *event) 2 { 3     emit mousePress(event); 4     // save some state to tell in releaseEvent whether it was a click: 5     mMouseHasMoved = false; 6     mMousePressPos = event->pos(); 7  8     if (mSelectionRect && mSelectionRectMode != QCP::srmNone)//优先处理鼠标绘制矩形事件 9     {10         if (mSelectionRectMode != QCP::srmZoom || qobject_cast<QCPAxisRect*>(axisRectAt(mMousePressPos))) // in zoom mode only activate selection rect if on an axis rect11             mSelectionRect->startSelection(event);12     }13     else14     {15         // no selection rect interaction, so forward event to layerable under the cursor:16         QList<QVariant> details;17         QList<QCPLayerable*> candidates = layerableListAt(mMousePressPos, false, &details);//根据鼠标位置获取当前点选的元素18         for (int i = 0; i < candidates.size(); ++i)19         {20             event->accept(); // default impl of QCPLayerable‘s mouse events ignore the event, in that case propagate to next candidate in list21             candidates.at(i)->mousePressEvent(event, details.at(i));22             if (event->isAccepted())//如果有候选者处理了鼠标事件,那么事件循环结束23             {24                 mMouseEventLayerable = candidates.at(i);25                 mMouseEventLayerableDetails = details.at(i);26                 break;27             }28         }29     }30 31     event->accept(); // in case QCPLayerable reimplementation manipulates event accepted state. In QWidget event system, QCustomPlot wants to accept the event.32 }

    对比上述鼠标按下时两个版本的代码,beta版本(指2.0.0版本)比发布版本(1.3.2)明显多了一些代码,具体在两个方面体现:1、多了一个矩形选择区域;2、鼠标按下时获取当前候选元素,返回值类型为QCPLayerable。

    如图2是我设置了矩形选择区域画笔颜色为红色之后,进行的测试,可以画出一个红色的矩形框,测试代码:selectionRect()->setPen(QPen(Qt::red));

技术分享

图1 绘制矩形

二、布局元素成员

    从第一小节看过来我们已经知道了mouse系列的方法已经从QCPLayoutElement移到了QCPLayerable类中,加之上述对鼠标按下事件的理解,这里我就不在说明鼠标事件的处理逻辑了,其实还是比较简单的,总之鼠标事件是从QCustomPlot类中触发,然后通过指针回调到各个QCPLayerable对象中,直到有一个对象处理了这个事件。

    如图2所示,是QCPLayoutElement类的继承关系图,从QCPLayoutElement派生出来的直接子类一共有5个,下面分别做以介绍

  • QCPAbstractLegendItem:图例项,包含于QCPLegend,具体可以参看QCustomplot使用分享(二) 源码解读图1
  • QCPAxisRect:坐标轴矩形,一般默认包含4个坐标轴,前边的文章也有简单的介绍到
  • QCPColorScale:颜色表,配合QCPColorMap使用
  • QCPLayout:布局抽象类,直接子类包括:QCPLayoutGrid和QCPLaoutInset
  • QCPTextElement:文本,可以支持鼠标事件

    以上类我是按照QCustomPlot提供的类图类进行分析的,但是本节我将不对坐标轴、文本元素、图例项和颜色表进行分析,仅仅只对QCPLayout类加以说明技术分享

图2 QCPLayoutElement类图

三、QCPLayout

    从图2可以看出QCPLayout有2个直接子类和1个间接子类,QCPLegend就是图例类了,他可以包含多个QCPAbstractLegend项,构成一个真正的的图例。接下来我们将进入到其直接子类的介绍,也是我们本片文章的重点需要讲解到的。

1、QCPLayoutGrid

    不管是beta版本还是发布版本,对于这个类的事件回调一直没有变化,都是类似如下代码

1 mPlotLayout->update(QCPLayoutElement::upPreparation);//margin计算和布局之前的准备2 mPlotLayout->update(QCPLayoutElement::upMargins);//计算margin3 mPlotLayout->update(QCPLayoutElement::upLayout);//更新布局

    这3次调用update方法,只是参数不同而已,看起来有些可怕,其实不然,好了,现在就跟我们一步一步分析这个调用过程吧

a、回调到抽象类QCPLayout的update方法中,因为phase第一次传递的是QCPLayoutElement::upPreparation,因此第3行的代码(原因看b小节)和第6行的if都不能执行

 1 void QCPLayout::update(UpdatePhase phase) 2 { 3     QCPLayoutElement::update(phase); 4  5     // set child element rects according to layout: 6     if (phase == upLayout) 7         updateLayout(); 8  9     // propagate update call to child elements:10     const int elCount = elementCount();//返回当前布局元素下总共有多少个子类 一般情况下至少有一个QCPAxisRect11     for (int i = 0; i < elCount; ++i)12     {13         if (QCPLayoutElement *el = elementAt(i))14             el->update(phase);15     }16 }

b、当update方法中传递QCPLayoutElement::upMargins参数时,第3行的QCPLayoutElement::update方法就可以被执行了,先看看如下代码,是不是有点儿明白了,在QCustomPlot类中虽然3次调用了update方法,但其实他们真正的计算是被分开了的,QCPLayoutElement::update处理margin计算,QCPLayout::update中的if负责布局更新,并把事件传递给所有的子类布局元素

 

 1 void QCPLayoutElement::update(UpdatePhase phase) 2 { 3     if (phase == upMargins)//只有margin计算才能进来 4     { 5         if (mAutoMargins != QCP::msNone) 6         { 7             // set the margins of this layout element according to automatic margin calculation, either directly or via a margin group: 8             QMargins newMargins = mMargins; 9             QList<QCP::MarginSide> allMarginSides = QList<QCP::MarginSide>() << QCP::msLeft << QCP::msRight << QCP::msTop << QCP::msBottom;10             foreach(QCP::MarginSide side, allMarginSides)11             {12                 if (mAutoMargins.testFlag(side)) // this side‘s margin shall be calculated automatically13                 {14                     if (mMarginGroups.contains(side))15                         QCP::setMarginValue(newMargins, side, mMarginGroups[side]->commonMargin(side)); // this side is part of a margin group, so get the margin value from that group16                     else17                         QCP::setMarginValue(newMargins, side, calculateAutoMargin(side)); // this side is not part of a group, so calculate the value directly18                     // apply minimum margin restrictions:19                     if (QCP::getMarginValue(newMargins, side) < QCP::getMarginValue(mMinimumMargins, side))20                         QCP::setMarginValue(newMargins, side, QCP::getMarginValue(mMinimumMargins, side));21                 }22             }23             setMargins(newMargins);24         }25     }26 }

 

c、QCPLayoutGrid是一个递归包含的类,正是因为这样我们才可以实现在一个QCustomPlot窗口包含多个图表,不仅仅是多个图表,而且图表可能包含在不同的坐标轴上,如图3所示,在一个QCustomPlot窗口中默认有一个QCPLayoutGrid,而QCPLayoutGrid可以添加了多个QCPLayoutElement元素。仔细揣摩一下图2的类图,你就会发现这样的设计真是不简单,可以实现一个比较复杂的搭配,本节就只简单的描述下其类关系,如果需要实现复杂的示例,还是同学自己去努力啦。不过在本系列博客完结之后我将会把自己二次开发的一个demo分享给大家,现在还请大家耐心等待。

技术分享

图3 多坐标轴示例

 

2、QCPLayoutInset

    相对于QCPLayoutGrid来说,该类是一个一维的数组,也是一个递归的包含,源码中用该类是在QCPAxisRect中用到了,负责保存outrect的大小,仔细看QCPAxisRect的源码就会发现该类有两个get接口是像如下代码这样写的。

1 QRect rect() const { return mRect; }2 QRect outerRect() const { return mOuterRect; }

    关于这个类的更新信息我就不多说了,看的时候没有过多的关注,呵呵。。。有这部分需求的小伙伴就可能需要自己去看源码了,个人觉得东西应该也不多,主要是我们当时的业务没有涉及到这块,所以不需要进行修改

四、布局示例

    效果如图4所示

技术分享

图4 多坐标轴矩形

    图4中有两个坐标轴矩形,上边的是默认存在的,底下的是新增坐标轴矩形,新增代码如下(下述代码的参数决定是新增还是隐藏已有)

 1 QCPBars * TimeSharingTrendPlot::ShowVOL(bool visible) 2 { 3     Q_D(TimeSharingTrendPlot); 4     if (visible) 5     { 6         if (d->m_eQuota.testFlag(QCP::QT_VOL) == false) 7         { 8             d->m_eQuota |= QCP::QT_VOL; 9 10             QCPAxisRect *VolAxisRect = new QCPAxisRect(d_ptr->m_pPlot);11             connect(d_ptr->m_pPlot->xAxis, static_cast<void (QCPAxis:: *)(const QCPRange &)>(&QCPAxis::rangeChanged)12                 , VolAxisRect->axis(QCPAxis::atBottom), static_cast<void (QCPAxis:: *)(const QCPRange &)>(&QCPAxis::setRange));13             connect(VolAxisRect->axis(QCPAxis::atBottom), static_cast<void (QCPAxis:: *)(const QCPRange &)>(&QCPAxis::rangeChanged)14                 , d_ptr->m_pPlot->xAxis, static_cast<void (QCPAxis:: *)(const QCPRange &)>(&QCPAxis::setRange));15             VolAxisRect->setMaximumSize(QSize(QWIDGETSIZE_MAX, 100));16             VolAxisRect->axis(QCPAxis::atBottom)->setLayer("axes");17             VolAxisRect->axis(QCPAxis::atBottom)->grid()->setLayer("grid");18             VolAxisRect->setAutoMargins(QCP::msLeft | QCP::msRight | QCP::msBottom);19             VolAxisRect->setMargins(QMargins(0, 0, 0, 0));20             d_ptr->m_pPlot->plotLayout()->addElement(1, 0, VolAxisRect);21 22             VolAxisRect->setMarginGroup(QCP::msLeft | QCP::msRight, d->m_pMarginGroup);23 24             EnableFixedTicker(QCPAxis::atLeft | QCPAxis::atRight);25 26             //拉取分时图下VOL指标数据27             Q_D(TimeSharingTrendPlot);28             QCPBars * bars = AddBars(VolAxisRect->axis(QCPAxis::atBottom), VolAxisRect->axis(QCPAxis::atLeft));29 30             return bars;31         }32         else33         {34         }35     }36     else37     {38         d->m_eQuota &= ~QCP::QT_VOL;39         d->m_pPlot->plotLayout()->remove(d_ptr->m_pPlot->plotLayout()->element(1, 0));40     }41 42     d->m_pPlot->plotLayout()->simplify();43 44     return nullptr;45 }

五、相关文章

  QCustomplot使用分享(一) 能做什么事

  QCustomplot使用分享(二) 源码解读

  QCustomplot使用分享(三) 图

  QCustomplot使用分享(四) QCPAbstractItem

 

QCustomplot使用分享(五) 布局