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

一、效果展示

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

图1 贝塞尔曲线

二、源码分析

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

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

　　1、main文件

 1 int main(int argc, char **argv)
 2 {
 3     QGuiApplication app(argc, argv);
 4
 5     qmlRegisterType<BezierCurve>("CustomGeometry", 1, 0, "BezierCurve");//注册自定义Quick控件到qml系统环境中
 6
 7     QQuickView view;
 8     QSurfaceFormat format = view.format();
 9     format.setSamples(16);
10     view.setFormat(format);
11     view.setSource(QUrl("qrc:///scenegraph/customgeometry/main.qml"));
12     view.show();
13
14     app.exec();
15 }

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

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

　　2、自定义QQuickItem类型

 1 class BezierCurve : public QQuickItem
 2 {
 3     Q_OBJECT
 4
 5     Q_PROPERTY(QPointF p1 READ p1 WRITE setP1 NOTIFY p1Changed)//使用Q_PROPERTY进行声明的宏可以通过属性系统进行操作，例如qss中qproperty-p1:1,1  qml中p1: Qt.point(0, 1)
 6     Q_PROPERTY(QPointF p2 READ p2 WRITE setP2 NOTIFY p2Changed)
 7     Q_PROPERTY(QPointF p3 READ p3 WRITE setP3 NOTIFY p3Changed)
 8     Q_PROPERTY(QPointF p4 READ p4 WRITE setP4 NOTIFY p4Changed)
 9
10     Q_PROPERTY(int segmentCount READ segmentCount WRITE setSegmentCount NOTIFY segmentCountChanged)//WRITE操作之后，发生NOTIFY指定的信号
11
12 public:
13     BezierCurve(QQuickItem *parent = 0);
14     ~BezierCurve();
15
16 //! [2]
17     QSGNode *updatePaintNode(QSGNode *, UpdatePaintNodeData *);//qml文件中通过SequentialAnimation动画修改p2和p3的值，并触发update函数
18 //! [2]
19
20     QPointF p1() const { return m_p1; }
21     QPointF p2() const { return m_p2; }
22     QPointF p3() const { return m_p3; }
23     QPointF p4() const { return m_p4; }
24
25     int segmentCount() const { return m_segmentCount; }
26
27     void setP1(const QPointF &p);
28     void setP2(const QPointF &p);
29     void setP3(const QPointF &p);
30     void setP4(const QPointF &p);
31
32     void setSegmentCount(int count);
33
34 signals:
35     void p1Changed(const QPointF &p);
36     void p2Changed(const QPointF &p);
37     void p3Changed(const QPointF &p);
38     void p4Changed(const QPointF &p);
39
40     void segmentCountChanged(int count);
41
42 private:
43     QPointF m_p1;
44     QPointF m_p2;
45     QPointF m_p3;
46     QPointF m_p4;
47
48     int m_segmentCount;
49 };

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

1 void BezierCurve::setP1(const QPointF &p)
2 {
3     if (p == m_p1)
4         return;
5
6     m_p1 = p;
7     emit p1Changed(p);
8     update();
9 }

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

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

 1 import QtQuick 2.0
 2 import CustomGeometry 1.0 //导入自定义包
 3 //! [1] //! [2]
 4 Item {
 5     width: 300
 6     height: 200
 7
 8     BezierCurve {//直接使用控件名称   导入方式也可以改为import CustomGeometry 1.0 as MyCustom，那么控件使用方式改为MyCustom.BezierCurve
 9         id: line
10         anchors.fill: parent
11         anchors.margins: 20
12 //! [2] //! [3]
13         property real t//自定义属性
14         SequentialAnimation on t {//执行顺序动画
15             NumberAnimation { to: 1; duration: 2000; easing.type: Easing.InOutQuad }
16             NumberAnimation { to: 0; duration: 2000; easing.type: Easing.InOutQuad }
17             loops: Animation.Infinite//无限循环
18         }
19
20         p2: Qt.point(t, 1 - t)//只有通过Q_PROPERTY宏声明过的属性才可以这样访问
21         p3: Qt.point(1 - t, t)
22     }
23 //! [3] //! [4]
24     Text {
25         anchors.bottom: line.bottom
26
27         x: 20
28         width: parent.width - 40
29         wrapMode: Text.WordWrap
30
31         text: "This curve is a custom scene graph item, implemented using GL_LINE_STRIP"
32     }
33 }

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

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