QT绘制会动的蚂蚁线

主要思路

设置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_OBJECT

public:
    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