本系列预计实现
①刻度上方文字显示,
②时间轴拖动效果,
③时间轴刻度缩放,
④时间轴和其他控件联动显示,
⑤鼠标放置到时间轴,显示具体时间。
⑥通过定时器,实时更新时间轴
⑦时间轴上绘制时间片
完整代码可见GitHub - 754816/QT_TimeLine: qt时间轴实现效果
1、基础思路
使用QPainter函数,根据时间片的起止时间,绘制矩形框。首先在外部类,获取对应的时间片,信息,通常为一个开始时间(QDateTime startTime)和一个结束时间(QDateTime endTime)为一组时间片,需要校验结束时间要比开始时间大才为正确的时间片,将时间片保存在容器(QVector)中。然后在绘制将单个时间片的开始时间,结束时间,分别转换为时间轴上的起止坐标,再构造成矩形框。最后调用painter.drawRects(vector);完成时间片的绘制
如图所示,这里绘制了今日08:00:00-10:35:00等四段时间片。
2、代码实现
首先构造时间片,定义结构体,然后填充四段时间片
cpp
//=========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乘以每个时间间隔对应的像素宽度,得到相对于当前显示的时间的偏移像素。
cpp
QVector<QRect> MyTimeLine::CalVodRects()
{
auto func_px = [&](QDateTime time)
{
int px = 0;
int mid = this->size().width() / 2;
//将传入的时间减去当前显示的时间(m_MoveDateTime),得到时间差t1
qint64 t1 = time.toSecsSinceEpoch() - m_MoveDateTime.toSecsSinceEpoch();
//用时间差t1除以时间间隔(m_IntervalType),得到占有的时间比例
//如当前时间间隔为1小时,t1为2小时,则计算出的ratio的值为2
double 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函数,添加绘制效果
cpp
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);
}