上一篇博客写了QWidget的自绘控件，链接： QWidget自绘控件

现在记录一下在qml中如何调用自绘控件

话不多说，先看图，再看代码。

 同样的用最后一个当例子

#ifndef WATERPROGRESSBAR_H
#define WATERPROGRESSBAR_H

#include <QQuickPaintedItem>

class WaterProgressBar : public QQuickPaintedItem
{
    Q_OBJECT

    Q_PROPERTY(int value READ value WRITE setVaule)

public:
    explicit WaterProgressBar(QQuickItem *parent = nullptr);

    int value() const;
    void setVaule(int value);

public slots:
    void updaterWater();

protected:
    void paint(QPainter *painter) override;
    void mousePressEvent(QMouseEvent *event) override;
    void mouseReleaseEvent(QMouseEvent *event) override;
    void mouseMoveEvent(QMouseEvent *event) override;

private:
    int m_value;
    qreal m_offset;

    bool m_isPressed;
    QPoint m_startPoint;

    void drawWater(QPainter* painter);
    void drawText(QPainter* painter);
    void drawBg(QPainter* painter);
};

#endif // WATERPROGRESSBAR_H

#include "WaterProgressBar.h"
#include <QPainter>
#include <QtMath>
#include <QTimer>
#include <QMouseEvent>

WaterProgressBar::WaterProgressBar(QQuickItem *parent) : QQuickPaintedItem(parent)
{
    m_value = 0;
    m_offset = 0;

    m_isPressed = false;

    QTimer *timer = new QTimer(this);
    connect(timer, &QTimer::timeout, this, &WaterProgressBar::updaterWater);
    timer->start(30);//定时30毫秒

    setAcceptHoverEvents(true);
    setAcceptedMouseButtons(Qt::AllButtons);
    setFlag(ItemAcceptsInputMethod, true);
}

void WaterProgressBar::setVaule(int value)
{
    m_value = value;
    update();
}

void WaterProgressBar::updaterWater()
{
    m_offset=m_offset+0.15;//波浪偏移
    if (m_offset >= 360)
        m_offset = 0;
    update();
}

void WaterProgressBar::paint(QPainter *painter)
{
    qreal side = qMin(width(), height());

    painter->setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
    painter->translate(width() / 2, height() / 2);
    painter->scale(side / 200.0, side / 200.0);

    drawBg(painter);//画背景
    drawWater(painter);//画水波浪
    drawText(painter);//画中间数值
}

void WaterProgressBar::drawWater(QPainter* painter)
{
    int radius = 100;//坐标系高度，上为-，下为+

    if (m_value == 0){//没波浪，不用画
        return;
    }
    else if (m_value == 100) {//波浪满，直接画圆
        painter->save();
        painter->setPen(Qt::NoPen);
        painter->setBrush(QBrush(QColor(100, 180, 250, 230)));
        painter->drawEllipse(QRect(-radius, -radius, radius*2, radius*2));
        painter->restore();
    }
    else//画波浪
    {
        int height = 2*(-m_value+50);//波浪在坐标系中的高度位置
        painter->save();
        QPainterPath wavePath; //波浪区域
        QPainterPath wavePath2; //波浪区域
        wavePath.moveTo(-radius, radius);//第一点坐标为（0,height）;
        for(int x = -radius; x < radius; x++)  //x从0~w的值而改变，从而得到正弦曲线
        {
            double waveY = 4*qSin(1.8*(x*M_PI/180 + m_offset)) + height;// waveY随着x的值改变而改变，从而得到正弦曲线
            wavePath.lineTo(x, waveY);   //从上一个绘制点画一条线到（x，waveY）；
        }
        wavePath.lineTo(radius, radius); //右下角，坐标（width, height），移动到右下角结束点,整体形成一个闭合路径

        wavePath2.moveTo(-radius, radius);//第一点坐标为（0,height）;
        for(int x = -radius; x < radius; x++)  //x从0~w的值而改变，从而得到正弦曲线
        {
            double waveY = 4*qSin(1.8*(x*M_PI/180 + m_offset + 2)) + height;// waveY随着x的值改变而改变，从而得到正弦曲线
            wavePath2.lineTo(x, waveY);   //从上一个绘制点画一条线到（x，waveY）；
        }
        wavePath2.lineTo(radius, radius); //右下角，坐标（width, height），移动到右下角结束点,整体形成一个闭合路径

        QPainterPath bigPath;
        bigPath.addEllipse(QRect(-radius, -radius, radius*2, radius*2));
        wavePath = bigPath.intersected(wavePath);
        wavePath2 = bigPath.intersected(wavePath2);

        painter->setPen(Qt::NoPen);
        painter->setBrush(QBrush(QColor(100, 184, 255, 80)));
        painter->drawPath(wavePath);      //绘制路径
        painter->setBrush(QBrush(QColor(100, 180, 250, 230)));
        painter->drawPath(wavePath2);      //绘制路径
        painter->restore();
    }
}

void WaterProgressBar::drawText(QPainter* painter){
    int radius = 40;
    painter->save();
    QString text = QString("%1%").arg(m_value);
    QFont font = painter->font();
    font.setPixelSize(40);
    painter->setFont(font);
    QPen pen = painter->pen();
    pen.setColor(Qt::white);
    pen.setWidth(4);
    painter->setPen(pen);
    QRect rect(-radius,-radius,radius*2,radius*2);
    painter->drawText(rect,Qt::AlignCenter,text);
    painter->restore();
}

void WaterProgressBar::drawBg(QPainter* painter){
    int outRadius = 100;
    painter->save();
    painter->setPen(Qt::NoPen);
    painter->setBrush(QColor(40,40,40));
    QRect rect(-outRadius,-outRadius,outRadius*2,outRadius*2);
    painter->drawEllipse(rect);
    painter->restore();
}

void WaterProgressBar::mousePressEvent(QMouseEvent *event)
{
    m_isPressed = true;
    m_startPoint = event->pos();
}

void WaterProgressBar::mouseReleaseEvent(QMouseEvent *event)
{
    Q_UNUSED(event)
    m_isPressed = false;
}

void WaterProgressBar::mouseMoveEvent(QMouseEvent *event)
{
    if (m_isPressed)
    {
        if (m_startPoint.x()<=0 || m_startPoint.x()>=width())
        {
            m_startPoint = event->pos();
            return;
        }
        if (event->pos().x() > m_startPoint.x())
        {
            int addVaule = qCeil((100-m_value)*1.0/(width()-m_startPoint.x()));
            if (m_value < 100)
                setVaule(m_value+addVaule);
        }
        else if (event->pos().x() < m_startPoint.x()){
            int addVaule = qCeil(m_value*1.0/m_startPoint.x());
            if (m_value > 0)
                setVaule(m_value-addVaule);
        }
        m_startPoint = event->pos();
    }
}

int WaterProgressBar::value() const
{
    return m_value;
}

代码与QWidget的基本一样，主要修改为以下几点：

1.继承自QQuickPaintedItem

2.重写paintEvent改为重写paint

3.增加qml可访问的属性，方法

Q_PROPERTY(int value READ value WRITE setVaule)

4.如果要接收mouse事件，就要加上

setAcceptHoverEvents(true);
setAcceptedMouseButtons(Qt::AllButtons);
setFlag(ItemAcceptsInputMethod, true);