如何使用QGraphicsLineItem实现带1-3px动态描边的虚线？

一、设置虚线样式 #

要将QGraphicsLineItem设为虚线，核心是通过QPen配置虚线模式：

• 创建QPen对象，指定线条颜色与初始宽度；
• 调用setDashPattern()定义虚线的实线/空白段长度，参数为qreal类型向量，每两个元素对应一组“实线段+空白段”的循环单元；
• 将配置好的QPen通过setPen()赋值给QGraphicsLineItem。

示例代码：

// 创建线条项
QGraphicsLineItem* lineItem = new QGraphicsLineItem(QLineF(50, 50, 200, 50));

// 配置虚线画笔
QPen dashedPen(Qt::black);
dashedPen.setWidth(1); // 初始宽度1px
// 虚线模式：2px实线 + 2px空白，循环重复
dashedPen.setDashPattern(QVector<qreal>{2, 2});

// 应用画笔
lineItem->setPen(dashedPen);

二、实现描边宽度1px→3px的动画 #

Qt中可通过两种方式实现宽度动画，以下是具体方案：

方法1：子类化QGraphicsLineItem添加自定义属性 #

由于QGraphicsLineItem未直接暴露penWidth属性，子类化后注册自定义属性，便于QPropertyAnimation直接绑定：

class AnimatedLineItem : public QGraphicsLineItem
{
    Q_OBJECT
    Q_PROPERTY(int penWidth READ penWidth WRITE setPenWidth) // 注册动画属性

public:
    explicit AnimatedLineItem(const QLineF& line, QGraphicsItem* parent = nullptr)
        : QGraphicsLineItem(line, parent) {}

    int penWidth() const { return pen().width(); }

    void setPenWidth(int width) {
        QPen currentPen = pen();
        currentPen.setWidth(width);
        setPen(currentPen);
    }
};

绑定动画并启动：

// 创建自定义线条项并设置初始虚线样式
AnimatedLineItem* animatedLine = new AnimatedLineItem(QLineF(50, 100, 200, 100));
QPen dashedPen(Qt::red);
dashedPen.setWidth(1);
dashedPen.setDashPattern(QVector<qreal>{3, 1});
animatedLine->setPen(dashedPen);

// 创建并配置动画
QPropertyAnimation* widthAnimation = new QPropertyAnimation(animatedLine, "penWidth");
widthAnimation->setDuration(1000); // 动画时长1秒
widthAnimation->setStartValue(1);
widthAnimation->setEndValue(3);
widthAnimation->setLoopCount(-1); // 无限循环（可选）
widthAnimation->start();

方法2：使用QVariantAnimation（无需子类化） #

通过监听动画值变化，实时更新画笔宽度，无需修改原有类结构：

QGraphicsLineItem* lineItem = new QGraphicsLineItem(QLineF(50, 150, 200, 150));
// 设置初始虚线样式
QPen dashedPen(Qt::blue);
dashedPen.setWidth(1);
dashedPen.setDashPattern(QVector<qreal>{4, 2});
lineItem->setPen(dashedPen);

// 创建动画
QVariantAnimation* widthAnim = new QVariantAnimation();
widthAnim->setDuration(1500);
widthAnim->setStartValue(1);
widthAnim->setEndValue(3);
widthAnim->setLoopCount(-1);

// 绑定值变化信号，实时更新画笔
connect(widthAnim, &QVariantAnimation::valueChanged, [=](const QVariant& value) {
    QPen currentPen = lineItem->pen();
    currentPen.setWidth(value.toInt());
    lineItem->setPen(currentPen);
});

widthAnim->start();

注意事项 #

• 虚线模式向量可自定义，比如{5,3}代表5px实线+3px空白，数值越大间隔越宽；
• 若需要往返动画（1px→3px→1px），可添加setEasingCurve(QEasingCurve::InOutQuad)并设置循环，或手动切换动画方向；
• 动画时长单位为毫秒，可根据需求调整。

内容的提问来源于stack exchange，提问作者Chris P