diff options
-rw-r--r-- | doc/src/images/declarative-pathattribute.png | bin | 481 -> 7207 bytes | |||
-rw-r--r-- | doc/src/snippets/declarative/pathview/dummydata/MenuModel.qml | 15 | ||||
-rw-r--r-- | doc/src/snippets/declarative/pathview/pathattributes.qml | 34 | ||||
-rw-r--r-- | doc/src/snippets/declarative/pathview/pathview.qml | 28 | ||||
-rw-r--r-- | doc/src/snippets/declarative/pathview/pics/qtlogo-64.png | bin | 0 -> 2991 bytes | |||
-rw-r--r-- | src/declarative/fx/qfxpath.cpp | 90 | ||||
-rw-r--r-- | src/declarative/fx/qfxpathview.cpp | 28 |
7 files changed, 115 insertions, 80 deletions
diff --git a/doc/src/images/declarative-pathattribute.png b/doc/src/images/declarative-pathattribute.png Binary files differindex 04215db..57cd049 100644 --- a/doc/src/images/declarative-pathattribute.png +++ b/doc/src/images/declarative-pathattribute.png diff --git a/doc/src/snippets/declarative/pathview/dummydata/MenuModel.qml b/doc/src/snippets/declarative/pathview/dummydata/MenuModel.qml new file mode 100644 index 0000000..5b973d7 --- /dev/null +++ b/doc/src/snippets/declarative/pathview/dummydata/MenuModel.qml @@ -0,0 +1,15 @@ +ListModel2 { + id: MenuModel + ListElement { + name: "Bill Jones" + icon: "pics/qtlogo-64.png" + } + ListElement { + name: "Jane Doe" + icon: "pics/qtlogo-64.png" + } + ListElement { + name: "John Smith" + icon: "pics/qtlogo-64.png" + } +} diff --git a/doc/src/snippets/declarative/pathview/pathattributes.qml b/doc/src/snippets/declarative/pathview/pathattributes.qml new file mode 100644 index 0000000..44789f2 --- /dev/null +++ b/doc/src/snippets/declarative/pathview/pathattributes.qml @@ -0,0 +1,34 @@ +Rect { + width: 240; height: 200; color: 'white' +//! [0] +//! [1] + Component { + id: Delegate + Item { + id: Wrapper + width: 80; height: 80 + scale: PathView.scale + opacity: PathView.opacity + VerticalLayout { + Image { anchors.horizontalCenter: Name.horizontalCenter; width: 64; height: 64; source: icon } + Text { id: Name; text: name; font.size: 16} + } + } + } +//! [1] +//! [2] + PathView { + anchors.fill: parent; model: MenuModel; delegate: Delegate + path: Path { + startX: 120; startY: 100 + PathAttribute { name: "scale"; value: 1.0 } + PathAttribute { name: "opacity"; value: 1.0 } + PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 } + PathAttribute { name: "scale"; value: 0.3 } + PathAttribute { name: "opacity"; value: 0.5 } + PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 } + } + } +//! [2] +//! [0] +} diff --git a/doc/src/snippets/declarative/pathview/pathview.qml b/doc/src/snippets/declarative/pathview/pathview.qml new file mode 100644 index 0000000..11df0a2 --- /dev/null +++ b/doc/src/snippets/declarative/pathview/pathview.qml @@ -0,0 +1,28 @@ +Rect { + width: 240; height: 200; color: 'white' +//! [0] +//! [1] + Component { + id: Delegate + Item { + id: Wrapper + width: 80; height: 80 + VerticalLayout { + Image { anchors.horizontalCenter: Name.horizontalCenter; width: 64; height: 64; source: icon } + Text { id: Name; text: name; font.size: 16} + } + } + } +//! [1] +//! [2] + PathView { + anchors.fill: parent; model: MenuModel; delegate: Delegate + path: Path { + startX: 120; startY: 100 + PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 } + PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 } + } + } +//! [2] +//! [0] +} diff --git a/doc/src/snippets/declarative/pathview/pics/qtlogo-64.png b/doc/src/snippets/declarative/pathview/pics/qtlogo-64.png Binary files differnew file mode 100644 index 0000000..4f68e16 --- /dev/null +++ b/doc/src/snippets/declarative/pathview/pics/qtlogo-64.png diff --git a/src/declarative/fx/qfxpath.cpp b/src/declarative/fx/qfxpath.cpp index f08671d..26aa10e 100644 --- a/src/declarative/fx/qfxpath.cpp +++ b/src/declarative/fx/qfxpath.cpp @@ -164,16 +164,7 @@ void QFxPath::setStartY(qreal y) \i \l PathPercent - a way to spread out items along various segments of the path. \endlist - \code - <Path startX="240" startY="350"> - <PathAttribute name="scale" value="1.0"/> - <PathAttribute name="opacity" value="1"/> - <PathQuad x="240" y="150" controlX="660" controlY="250"/> - <PathAttribute name="scale" value="0.1"/> - <PathAttribute name="opacity" value="-0.5"/> - <PathCubic x="240" y="350" control1X="-180" control1Y="250" control2X="0" control2Y="25"/> - </Path> - \endcode + \snippet doc/src/snippets/declarative/pathview/pathattributes.qml 2 */ QList<QFxPathElement *>* QFxPath::pathElements() @@ -493,31 +484,15 @@ void QFxCurve::setY(qreal y) an attribute at any particular point is interpolated from the PathAttributes bounding the point. - The example below shows a path with the items scaled to 10% at the ends of - the path and scaled 100% along the PathLine in the middle. Note the use - of the PathView.scale attached property to set the scale of the delegate. + The example below shows a path with the items scaled to 30% with opacity 50% + at the top of the path and scaled 100% with opacity 100% at the bottom. + Note the use of the PathView.scale and PathView.opacity attached properties + to set the scale and opacity of the delegate. \table \row \o \image declarative-pathattribute.png \o - \code - <Component id="Delegate"> - <Rect id="Wrapper" width="20" height="20" scale="{PathView.scale}" color="steelblue"/> - </Component> - <PathView width="200" height="100" model="{Model}" delegate="{Delegate}"> - <path> - <Path startX="20" startY="0"> - <PathAttribute name="scale" value="0.1"/> - <PathQuad x="50" y="80" controlX="0" controlY="80"/> - <PathAttribute name="scale" value="1"/> - <PathLine x="150" y="80"/> - <PathAttribute name="scale" value="1"/> - <PathQuad x="180" y="0" controlX="200" controlY="80"/> - <PathAttribute name="scale" value="0.1"/> - </Path> - </path> - </PathView> - \endcode + \snippet doc/src/snippets/declarative/pathview/pathattributes.qml 0 \endtable \sa Path @@ -583,9 +558,10 @@ void QFxPathAttribute::setValue(qreal value) 0,100 to 200,100: \code - <Path startX="0" startY="100"> - <PathLine x="200" y="100"/> - </Path> + Path { + startX: 0; startY: 100 + PathLine { x: 200; y: 100 } + } \endcode \sa Path, PathQuad, PathCubic @@ -624,9 +600,10 @@ void QFxPathLine::addToPath(QPainterPath &path) \o \image declarative-pathquad.png \o \code - <Path startX="0" startY="0"> - <PathQuad x="200" y="0" controlX="100" controlY="150"/> - </Path> + Path { + startX: 0; startY: 0 + PathQuad x: 200; y: 0; controlX: 100; controlY: 150 } + } \endcode \endtable @@ -707,10 +684,13 @@ void QFxPathQuad::addToPath(QPainterPath &path) \o \image declarative-pathcubic.png \o \code - <Path startX="20" startY="0"> - <PathCubic x="180" y="0" control1X="-10" control1Y="90" - control2X="210" control2Y="90"/> - </Path> + Path { + startX: 20; startY: 0 + PathCubic { + x: 180; y: 0; control1X: -10; control1Y: 90 + control2X: 210; control2Y: 90 + } + } \endcode \endtable @@ -834,24 +814,26 @@ void QFxPathCubic::addToPath(QPainterPath &path) \o \image declarative-nopercent.png \o \code - <Path startX="20" startY="0"> - <PathQuad x="50" y="80" controlX="0" controlY="80"/> - <PathLine x="150" y="80"/> - <PathQuad x="180" y="0" controlX="200" controlY="80"/> - </Path> + Path { + startX: 20; startY: 0 + PathQuad { x: 50; y: 80; controlX: 0; controlY: 80 } + PathLine { x: 150; y: 80 } + PathQuad { x: 180; y: 0; controlX: 200; controlY: 80 } + } \endcode \row \o \image declarative-percent.png \o \code - <Path startX="20" startY="0"> - <PathQuad x="50" y="80" controlX="0" controlY="80"/> - <PathPercent value=".25"/> - <PathLine x="150" y="80"/> - <PathPercent value=".75"/> - <PathQuad x="180" y="0" controlX="200" controlY="80"/> - <PathPercent value="1"/> - </Path> + Path { + startX: 20; startY: 0 + PathQuad { x: 50; y: 80; controlX: 0; controlY: 80 } + PathPercent { value: 0.25 } + PathLine { x: 150; y: 80 } + PathPercent { value: 0.75 } + PathQuad { x: 180; y: 0; controlX: 200; controlY: 80 } + PathPercent { value: 1 } + } \endcode \endtable diff --git a/src/declarative/fx/qfxpathview.cpp b/src/declarative/fx/qfxpathview.cpp index a2ea8ee..4785a52 100644 --- a/src/declarative/fx/qfxpathview.cpp +++ b/src/declarative/fx/qfxpathview.cpp @@ -41,7 +41,6 @@ #include <math.h> #include <QDebug> -#include <QPen> #include <QEvent> #include "qmlbindablevalue.h" #include "qmlstate.h" @@ -51,7 +50,6 @@ #include "qfxpathview.h" #include "qfxpathview_p.h" #include <QGraphicsSceneEvent> -#include <QTimer> static const int FlickThreshold = 5; @@ -103,13 +101,7 @@ private: The items are laid out along a path defined by a \l Path and may be flicked to scroll. - \code - <PathView id="pathview" delegate="{contactDelegate}"> - <resources><Component id="contactDelegate">...</Component></resources> - <model>...</model> - <path>...</path> - </PathView> - \endcode + \snippet doc/src/snippets/declarative/pathview/pathview.qml 0 \image pathview.gif @@ -320,23 +312,7 @@ void QFxPathView::setDragMargin(qreal dragMargin) The delegate provides a template describing what each item in the view should look and act like. Here is an example delegate: - \code - <PathView delegate="{contactDelegate}" ...> - <resources> - <Component id="contactDelegate"> - <Item id="wrapper" scale="{PathView.sc}" opacity="{PathView.op}" z="{PathView.z}"> - <Image id="pic" width="100" height="100" file="{portrait}" - anchors.horizontalCenter="{parent.horizontalCenter}"/> - <Text id="name" text="{firstName + ' ' + lastName}" - font.size="20" - anchors.top="{pic.bottom}" anchors.topMargin="5" - anchors.horizontalCenter="{parent.horizontalCenter}"/> - </Item> - </Component> - </resources> - ... - </PathView> - \endcode + \snippet doc/src/snippets/declarative/pathview/pathview.qml 1 */ /*! |