（QT-UI）十四、在时间轴上绘制一段段时间片

   本系列预计实现

①刻度上方文字显示，

②时间轴拖动效果，

③时间轴刻度缩放，

④时间轴和其他控件联动显示，

⑤鼠标放置到时间轴，显示具体时间。

⑥通过定时器，实时更新时间轴

⑦时间轴上绘制时间片

 完整代码可见GitHub - 754816/QT_TimeLine: qt时间轴实现效果

1、基础思路

使用QPainter函数，根据时间片的起止时间，绘制矩形框。首先在外部类，获取对应的时间片，信息，通常为一个开始时间（QDateTime startTime）和一个结束时间（QDateTime endTime）为一组时间片，需要校验结束时间要比开始时间大才为正确的时间片，将时间片保存在容器（QVector）中。然后在绘制将单个时间片的开始时间，结束时间，分别转换为时间轴上的起止坐标，再构造成矩形框。最后调用painter.drawRects(vector);完成时间片的绘制

如图所示，这里绘制了今日08:00:00-10:35:00等四段时间片。

2、代码实现

首先构造时间片，定义结构体，然后填充四段时间片

//=========hpp=========
struct TimeInfo_t
{QDateTime beginTime;      //时间片开始时间QDateTime endTime;        //结束时间
};
QVector<TimeInfo_t> m_VodVec;//=========cpp=========
void MyTimeLine::InitializeUI()
{//预先构造今日的四段时间片QDate date = QDate::currentDate();TimeInfo_t tempInfo1;tempInfo1.beginTime = QDateTime(date, QTime(20,0,0));tempInfo1.endTime = QDateTime(date, QTime(22,0,0));TimeInfo_t tempInfo2;tempInfo2.beginTime = QDateTime(date, QTime(8,0,0));tempInfo2.endTime = QDateTime(date, QTime(10,35,0));TimeInfo_t tempInfo3;tempInfo3.beginTime = QDateTime(date, QTime(11,11,11));tempInfo3.endTime = QDateTime(date, QTime(12,34,56));TimeInfo_t tempInfo4;tempInfo4.beginTime = QDateTime(date, QTime(16,25,25));tempInfo4.endTime = QDateTime(date, QTime(16,26,26));m_VodVec = {tempInfo1, tempInfo2, tempInfo3, tempInfo4};
}

然后添加计算时间片的函数，将起止时间，转换为时间轴上的坐标。将传入的时间减去当前显示的时间（m_MoveDateTime），得到时间差t1，用时间差t1除以时间间隔（m_IntervalType），得到占有的时间比例，如当前时间间隔为1小时，t1为2小时，则计算出的ratio的值为2。再用ratio乘以每个时间间隔对应的像素宽度，得到相对于当前显示的时间的偏移像素。

QVector<QRect> MyTimeLine::CalVodRects()
{auto func_px = [&](QDateTime time){int px = 0;int mid =  this->size().width() / 2;//将传入的时间减去当前显示的时间（m_MoveDateTime），得到时间差t1qint64 t1 = time.toSecsSinceEpoch() - m_MoveDateTime.toSecsSinceEpoch();//用时间差t1除以时间间隔（m_IntervalType），得到占有的时间比例//如当前时间间隔为1小时，t1为2小时，则计算出的ratio的值为2double ratio = (double)t1 / (double)m_IntervalType;//再用ratio乘以每个时间间隔对应的像素宽度，得到相对于当前显示的时间的偏移像素px = ratio * m_blockWidth + this->size().width() / 2;return px;};int TimeLineHeight = this->size().height();QVector<QRect> VodRects;for(auto iter : m_VodVec){int begin = func_px(iter.beginTime);int end = func_px(iter.endTime) - begin;VodRects.push_back(QRect(begin, 0,  end, TimeLineHeight));//qDebug () << "begin:" << begin << "end:" << end;}return VodRects;
}

在这个过程中已经，实现了考虑时间轴的拖动和缩放，始终是计算相对于时间轴的当前时间的前后偏移情况。

最后在PaintEvent函数中，使用drawRects函数，添加绘制效果

void MyTimeLine::paintEvent(QPaintEvent *event)
{QPainter painter(this);QPen pen;//设置为自定义的浅绿色 const QColor TransGreen = QColor(150, 220, 100, 80);//半透明绿色pen.setColor(TimeLineStyle::TransGreen);        QBrush brush1(TimeLineStyle::TransGreen);painter.setBrush(brush1);painter.setPen(pen);painter.drawRects(VodTimes);
}