Question

我有一堆椭圆，这些椭圆最初排在路径的顶部，应该沿着QPainterPath移动。我可以在第一个椭圆上使用它，但是我不知道如何为其他椭圆找到正确的位置。

有没有一种方法可以检查它是否通过了路径的末尾并将其移回起点？

class Animation : public QAbstractAnimation
{
  public:
    Animation(const QPainterPath& path, QObject *parent = Q_NULLPTR);
    virtual void updateCurrentTime(int ms) override;
    virtual int duration() const override;
    QPainterPath mPath;
    QVector<EllipseGraphicsItem*> mAnimationElements;
};


Animation::Animation (const QPainterPath& path, QObject *parent) : QAbstractAnimation(parent)
, mPath(path)
{
    qreal pos = 0;
    qreal length = mPath.length();
    while (pos < length)
    {
        qreal percent = path.percentAtLength(pos);
        QPointF pointAtPercent = path.pointAtPercent(percent);
        pos += 40;
        EllipseGraphicsItem * item = new EllipseGraphicsItem(parentItem());
        mAnimationElements.append(item);
        item->setPos(pointAtPercent);
    }
}

void Animation::updateCurrentTime(int ms)
{
     QPointF point = mPath.pointAtPercent(qreal(ms) / 6000);

     if (mAnimationElements.size() > 0)
          mAnimationElements[0]->setPos(point);

     for (int i = 0; i < mAnimationElements.size(); i++) {
         // how to update each circle's position?
     }
}

开始动画：

QPainterPath path;
path.moveTo(10, 10);
path.lineTo(QPointF(500, 10));
path.lineTo(QPointF(500, 700));
path.lineTo(QPointF(10, 700));
Animation *animation = new Animation(path, this);
animation->setLoopCount(-1);
animation->start();

Answer 1

Imho，将QGraphicsObject与QPropertyAnimation结合使用会更容易：

使用介于0和路径长度之间的属性，并根据元素的值和它们在列表中的位置计算元素的位置。

一个简单的例子：

class AnimatedEllipses: public QGraphicsObject
{
    Q_OBJECT
    Q_PROPERTY(int progress READ progress WRITE setProgress)
private:
    QGraphicsPathItem path;
    QList<QGraphicsEllipseItem*> ellipses;
    int propProgress;
public:
    int progress() const { return propProgress;}
    void setProgress(int value)
    {
        propProgress = value;
        int index = 0;
        for (QGraphicsEllipseItem* ellipse: ellipses)
        {
            // Keep value between 0 and length.
            int lgt = (propProgress + index * 40) % int(path.path().length());
            qreal percent = path.path().percentAtLength(lgt);
            ++index;
            ellipse->setPos(path.path().pointAtPercent(percent));
        }
    }
    AnimatedEllipses(QPainterPath const& path): QGraphicsObject(), path(path), propProgress(0)
    {
        qreal pos = 0;
        qreal length = path.length();
        while (pos < length)
        {
            qreal percent = path.percentAtLength(pos);
            QPointF pointAtPercent = path.pointAtPercent(percent);
            pos += 40;
            QGraphicsEllipseItem * item = new QGraphicsEllipseItem(-10, -10, 20, 20, this);
            item->setPos(pointAtPercent);
            ellipses << item;
        }

        QPropertyAnimation* animation = new QPropertyAnimation(this, "progress");
        animation->setStartValue(0);
        animation->setEndValue(length);
        animation->setDuration(10000);
        animation->setLoopCount(-1);
        animation->start();
    }



    // QGraphicsItem interface
public:
    QRectF boundingRect() const { return path.boundingRect();}
    void paint(QPainter* painter, const QStyleOptionGraphicsItem* option, QWidget* widget){}
};

通过模，您可以为每个椭圆创建无限循环。

沿QPainterPath设置椭圆动画

1 个答案: