qml demo分析(customgeometry-贝塞尔曲线)

一、效果展示

　　本篇文章还是带来一个简单的qt示例分析，且看图1效果。

图1 贝塞尔曲线

二、源码分析

　　该示例代码所在目录quick\scenegraph\customgeometry，感兴趣的同学可以自己去找，这篇文章我还是主要讲解源码，不涉及其他方面。

　　废话不多述，下面开始源码剖析。本篇讲解的示例看似简单，却是在C++和qml之间的一座桥梁，他告诉我们C++和qml是怎么混合编程的，在这篇文章中有几个重要的函数或者宏，例如：qmlRegisterType、Q_PROPERTY。

　　1、main文件

 int main(int argc, char **argv)
 {
     QGuiApplication app(argc, argv);

     qmlRegisterType<BezierCurve>("CustomGeometry", , , "BezierCurve");//注册自定义Quick控件到qml系统环境中

     QQuickView view;
     QSurfaceFormat format = view.format();
     format.setSamples();
     view.setFormat(format);
     view.setSource(QUrl("qrc:///scenegraph/customgeometry/main.qml"));
     view.show();

     app.exec();
 }

　　上述代码第5行使用了qmlRegisterType函数将C++中自定义的QQuickItem类型注册到qml环境中，4个参数分别是：包名、主版本号、子版本号和控件名称

　　qml文件可以通过QQuickView对象来加载，并展示。参考Qml文件的两种加载方式|启动Qt quick app的两种方法

　　2、自定义QQuickItem类型

 class BezierCurve : public QQuickItem
 {
     Q_OBJECT

     Q_PROPERTY(QPointF p1 READ p1 WRITE setP1 NOTIFY p1Changed)//使用Q_PROPERTY进行声明的宏可以通过属性系统进行操作，例如qss中qproperty-p1:1,1  qml中p1: Qt.point(0, 1)
     Q_PROPERTY(QPointF p2 READ p2 WRITE setP2 NOTIFY p2Changed)
     Q_PROPERTY(QPointF p3 READ p3 WRITE setP3 NOTIFY p3Changed)
     Q_PROPERTY(QPointF p4 READ p4 WRITE setP4 NOTIFY p4Changed)

     Q_PROPERTY(int segmentCount READ segmentCount WRITE setSegmentCount NOTIFY segmentCountChanged)//WRITE操作之后，发生NOTIFY指定的信号

 public:
     BezierCurve(QQuickItem *parent = );
     ~BezierCurve();

 //! [2]
     QSGNode *updatePaintNode(QSGNode *, UpdatePaintNodeData *);//qml文件中通过SequentialAnimation动画修改p2和p3的值，并触发update函数
 //! [2]

     QPointF p1() const { return m_p1; }
     QPointF p2() const { return m_p2; }
     QPointF p3() const { return m_p3; }
     QPointF p4() const { return m_p4; }

     int segmentCount() const { return m_segmentCount; }

     void setP1(const QPointF &p);
     void setP2(const QPointF &p);
     void setP3(const QPointF &p);
     void setP4(const QPointF &p);

     void setSegmentCount(int count);

 signals:
     void p1Changed(const QPointF &p);
     void p2Changed(const QPointF &p);
     void p3Changed(const QPointF &p);
     void p4Changed(const QPointF &p);

     void segmentCountChanged(int count);

 private:
     QPointF m_p1;
     QPointF m_p2;
     QPointF m_p3;
     QPointF m_p4;

     int m_segmentCount;
 };

　　自定义QQuickItem类型头文件函数中第5-8行都使用了Q_PROPERTY宏，该宏的作用是成员p可以用个p接口访问、通过setP接口设置，当成员p发生变化的时候会有pChanged信号发出。访问接口在头文件中已经实现，下边我们看一个设置接口的实现

 void BezierCurve::setP1(const QPointF &p)
 {
     if (p == m_p1)
         return;

     m_p1 = p;
     emit p1Changed(p);
     update();
 }

　　设置接口也相对简单，当调用该接口的时候，发出指定信号。

　　3、qml文件中使用自定义类型

 import QtQuick 2.0
 import CustomGeometry 1.0 //导入自定义包
 //! [1] //! [2]
 Item {
     width:
     height: 

     BezierCurve {//直接使用控件名称   导入方式也可以改为import CustomGeometry 1.0 as MyCustom，那么控件使用方式改为MyCustom.BezierCurve
         id: line
         anchors.fill: parent
         anchors.margins:
 //! [2] //! [3]
         property real t//自定义属性
         SequentialAnimation on t {//执行顺序动画
             NumberAnimation { to: ; duration: ; easing.type: Easing.InOutQuad }
             NumberAnimation { to: ; duration: ; easing.type: Easing.InOutQuad }
             loops: Animation.Infinite//无限循环
         }

         p2: Qt.point(t,  - t)//只有通过Q_PROPERTY宏声明过的属性才可以这样访问
         p3: Qt.point( - t, t)
     }
 //! [3] //! [4]
     Text {
         anchors.bottom: line.bottom

         x:
         width: parent.width -
         wrapMode: Text.WordWrap

         text: "This curve is a custom scene graph item, implemented using GL_LINE_STRIP"
     }
 }

总结：理解qmlRegisterType、Q_PROPERTY的功能非常重要， 他们是你学习qml很重要的一个环节。个人觉着C++和qml混编是一个趋势，虽然QWidget目前开发比较流行，但视图模型分离会让开发效率更高效。

注：该文章是个人学习之用，仅供参考。错误之处还请大家谅解