在QML中使用QPainter

亦凉 2022-03-12 01:40 408阅读 0赞

### **【写在前面】** ###

要想在 qml 中进行绘图，有很多方法，

1、在我之前的博客中，就讲过如何在 qml 中使用 opengl，这是一种方法，但它要求 opengl 的基础。

2、一种方法是使用 QPainter，它的好处是提供很多易用和实用的绘图 API，而且在很多在 widgets 的使用的代码可以直接移到qml中来使用。

3、当然还有一种方法就是使用场景图 API，这种我了解的不多，以后再说。

--------------------

### **【正文开始】** ###

先上效果图(因为很漂亮)：

![20190305133116949.gif][]

可以看到，效果很不错，接下来我开始讲解如何在 qml 中使用 QPainter 的步骤：

1、继承自 QQuickPaintedItem。

2、QQuickPaintedItem 有一个纯虚函数 paint(QPainter \*painter)，重写它，而参数为我们提供了一个 QPainter，使用它来进行自己的绘图。

#ifndef MAGICPOOL_H
    #define MAGICPOOL_H
    
    #include "magicfish.h"
    #include <QPainterPath>
    #include <QQuickPaintedItem>
    
    class MagicPool : public QQuickPaintedItem
    {
        Q_OBJECT
    
        Q_PROPERTY(bool moving READ moving CONSTANT)
    
    public:
        MagicPool(QQuickPaintedItem *parent = nullptr);
    
        bool moving() const { return m_moving; }
    
    public slots:
        void updateValue();
        void updateMove();
        void moveFish(qreal x, qreal y, bool hasCircle);
    
    protected:
        void paint(QPainter *painter);
    
    private:
        qreal calcIncludedAngle(const QPointF &center, const QPointF &head, const QPointF &touch);
        QPointF calcPoint(const QPointF &pos, qreal length, qreal angle);
        qreal getLength(const QPointF &pos1, const QPointF &pos2);
    
    private:
        bool m_moving;
        bool m_startCircle;
        QTimer *m_circleTimer;
        QTimer *m_moveTimer;
        QTimer *m_swimTimer;
        int m_circleRadius;
        int m_circleAlpha;
        QPointF m_pos;
    
        MagicFish *m_fish;
    
        QPainterPath m_path;
        qreal m_moveStep;
    };
    
    #endif // MAGICPOOL_H

3、使用 qmlRegisterType 注册到 qml 中使用。

#include "magicpool.h"
    #include <QGuiApplication>
    #include <QQmlApplicationEngine>
    
    int main(int argc, char *argv[])
    {
        QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    
        QGuiApplication app(argc, argv);
    
        qmlRegisterType<MagicPool>("an.utility", 1, 0, "MagicPool");
        QQmlApplicationEngine engine;
        engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
        if (engine.rootObjects().isEmpty())
            return -1;
    
        return app.exec();
    }

4、在 qml 中导入使用。

import QtQuick 2.9
    import QtQuick.Window 2.2
    import an.utility 1.0
    
    Window
    {
        visible: true
        width: 640
        height: 480
        flags: Qt.FramelessWindowHint | Qt.Tool
        color: "transparent"
        title: qsTr("Magic Fish~~~")
    
        Rectangle
        {
            anchors.fill: parent
            color: "#1109A3DC"
        }
    
        MagicPool
        {
            id: magicPool
    
            anchors.fill: parent
    
            function randomMove()
            {
                var r_x = Math.random() * width;
                var r_y = Math.random() * height;
                magicPool.moveFish(r_x, r_y, false);
            }
    
            Timer
            {
                interval: 1500
                repeat: true
                running: true
                onTriggered:
                {
                    if (Math.random() > 0.6 && !magicPool.moving) magicPool.randomMove();
                }
            }
    
            Component.onCompleted: randomMove();
    
            MouseArea
            {
                anchors.fill: parent
                onClicked: magicPool.moveFish(mouse.x, mouse.y, true);
            }
        }
    }

因为这里只讲如何在 qml 使用 QPainter，而具体的绘制过程有点复杂，具体可见代码。

> 实现来自：[http://www.qtcn.org/bbs/read-htm-tid-65412.html][http_www.qtcn.org_bbs_read-htm-tid-65412.html]
> 
> 原理来自：[https://www.jianshu.com/p/3dd3d1524851][https_www.jianshu.com_p_3dd3d1524851]

--------------------

### **【结语】 ** ###

好了，这篇其实很简单，而且 QPainter 用起来也简单方便，当然，在 qml 中确实也有更好的方法(也更复杂)来绘图，但是具体喜欢哪种还是取决于个人。

然后，附上代码地址，我就放在了 QmlControls中了：[https://github.com/mengps/QmlControls][https_github.com_mengps_QmlControls]

[20190305133116949.gif]: /images/20220312/265e058686e04de2871948abf1218018.png
[http_www.qtcn.org_bbs_read-htm-tid-65412.html]: http://www.qtcn.org/bbs/read-htm-tid-65412.html
[https_www.jianshu.com_p_3dd3d1524851]: https://www.jianshu.com/p/3dd3d1524851
[https_github.com_mengps_QmlControls]: https://github.com/mengps/QmlControls