【qml】QuickPaintedItem绘图，视觉错误旋转图例

一、说明

这个是qml的自会demo，受到视频 这是什么原理，看着也太好玩了的启发，用qml来实现。

绘制 还是要用QuickPaintedItem来实现，不为别的，就是想用GPU来绘制。

二、效果

三、RotateItem类

RotateItem.h

#ifndef ROTATEITEM_H
#define ROTATEITEM_H

#include <QQuickPaintedItem>

class RotateItem : public QQuickPaintedItem
{
    Q_OBJECT
public:
    RotateItem(QQuickItem *parent=0);

//signals:


    // QQuickPaintedItem interface
public:
    virtual void paint(QPainter *painter) override;

    int getSpeed() const;
    void setSpeed(int newSpeed);

signals:
    void speedChanged();

private:
    int speed=10;
    Q_PROPERTY(int speed READ getSpeed WRITE setSpeed NOTIFY speedChanged)
};

#endif // ROTATEITEM_H

RotateItem.cpp

#include "RotateItem.h"

#include <QPainter>
#include <QDebug>
#define qout if( 1 ) qDebug() << __FUNCTION__ << __LINE__ << ": "

RotateItem::RotateItem(QQuickItem *parent)
    :QQuickPaintedItem(parent)
{

}

void RotateItem::paint(QPainter *painter)
{
    auto itemSize = size();
//    qout << itemSize;

//    painter->setPen(Qt::cyan);
//    painter->drawLine(0,height()/2,width(),     height()/2);
//    painter->drawLine(width()/2, 0,width()/2,   height());

    painter->save();
    painter->translate(itemSize.width()/2,itemSize.height()/2);
    painter->rotate(speed);

    double side = qMin(itemSize.width(), itemSize.height())-1;
    QPen pen;
    pen.setWidth(side/8);
    painter->setPen(pen);

//    painter->drawRect(-side/2,-side/2,side,side);
    auto rect = QRect(-side/2+pen.width()/2,-side/2+pen.width()/2,
                      side-pen.width(),side-pen.width());

    side *=2./3;
    auto rect1 = QRect(-side/2+pen.width()/2,-side/2+pen.width()/2,
                      side-pen.width(),side-pen.width());

    side *=1./2;
    auto rect2 = QRect(-side/2+pen.width()/2,-side/2+pen.width()/2,
                      side-pen.width(),side-pen.width());

//    painter->drawEllipse(rect);
//    painter->drawEllipse(rect1);

    pen.setColor(QColor("#01113e"));
    pen.setCapStyle(Qt::FlatCap);
    pen.setJoinStyle(Qt::MiterJoin);
    painter->setPen(pen);

    // rect
    int args = 9;
    int spanAngle  = 360/args ;

    for (int i = 0; i < args; ++i) {
        painter->drawArc(rect,0,spanAngle*16/2);
        painter->rotate(-spanAngle);
    }

    // rect1
    args = 7;
    spanAngle  = 360/args ;

    for (int i = 0; i < args; ++i) {
        painter->drawArc(rect1,0,spanAngle*16/2);
        painter->rotate(-spanAngle);
    }

    // rect2
    args = 5;
    spanAngle  = 360/args ;

    for (int i = 0; i < args; ++i) {
        painter->drawArc(rect2,0,spanAngle*16/2);
        painter->rotate(-spanAngle);
    }


//    pen.setWidth(1);
//    painter->setPen(pen);
    painter->restore();

}

int RotateItem::getSpeed() const
{
    return speed;
}

void RotateItem::setSpeed(int newSpeed)
{
    if (speed == newSpeed)
        return;
    speed = newSpeed;
    update();
//    emit speedChanged();
}

四、main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import RotateItem 1.0

Item {
    anchors.fill: parent;

   RotateItem{
       id:rotateItem;
       anchors.fill: parent;
       fillColor: "#c4ccde"
   }

    Timer{
        id: timer
        interval: 1000/60;
        repeat: true
        triggeredOnStart: true;
        running: true
        property int speed: 45      // 特殊值：40
        property int idx: 0
        onTriggered: {
            rotateItem.speed = speed * idx++;
            idx %= (360/speed);
        }
    }
    MouseArea{
        anchors.fill: parent
        onClicked: {
            timer.running = !timer.running;
        }
    }
}