当前位置：首页 > news >正文

QT绘制会动的蚂蚁线

news 来源：原创 2025/6/19 21:39:27

主要思路

设置DashPattern，线的样式

然后通过定时器不停地改变DashOffset，就会导致蚂蚁线每次从线的不同的起点绘制，产生动起来的效果

主要接口

设置线条样式

void QPen::setDashPattern(const QVector<qreal> &pattern)

参数pattern的个数必须为偶数

其中奇数位置表示横线的长度，偶数位置表示空白间隙的长度

比如{1,3,1,3}

则表示先是1px的破折线，然后是3px的空白，再是1px的破折线，然后是3px的空白

如下：

- - 结束。

设置线条绘制偏移

void QPen::setDashOffset(qreal offset)

offset的单位是px；

改变这个值就会使得线条的绘制从线的不同起点绘制

比如{1,3,1,3}

- - 结束。

比如这里设为1，那么上面的就会为

- -结束。

可以看到绘制起点是线的样式往后偏移了1px

通常前面pattern设置的总长度为1个周期，比如{1,3,1,3}，那么1个周期就是1+3+1+3=8。即偏移设为8的时候，就相当于将偏移设为0；

举例：

#ifndef WIDGET_H
#define WIDGET_H#include <QWidget>
#include <QPainter>class Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr) : QWidget(parent){startTimer(100);//开启内部的定时器,间隔越短，蚂蚁线动的越快}~Widget()=default;
protected:void paintEvent(QPaintEvent* ev) override{QPainter p(this);QPen pen;pen.setWidth(3);pen.setColor(Qt::red);pen.setDashPattern({2,3,2,3});//一个周期为2px的线段，3px的空白，2px的线段，3px的空白pen.setDashOffset(offset);//定时器事件中改变这个偏移值p.setPen(pen);p.translate(this->rect().center());p.drawRect(0,0,200,200);}void timerEvent(QTimerEvent* ev) override{offset+=1.0;//这个步长越大蚂蚁线动的越快if(offset==10)//一个周期结束后，偏移置为0，周期长度就是pattern中指定的总和,这里是2+3+2+3{offset=0;}update();//刷新}private:qreal offset=0;};
#endif // WIDGET_H