From 3e3e22b2eb1ac2cc3fa33de3810962cd95be9988 Mon Sep 17 00:00:00 2001 From: Martin Jones Date: Fri, 1 May 2009 10:06:55 +1000 Subject: PathView format conversion. --- doc/src/images/declarative-pathattribute.png | Bin 481 -> 7207 bytes .../declarative/pathview/dummydata/MenuModel.qml | 15 ++++ .../declarative/pathview/pathattributes.qml | 34 ++++++++ doc/src/snippets/declarative/pathview/pathview.qml | 28 +++++++ .../declarative/pathview/pics/qtlogo-64.png | Bin 0 -> 2991 bytes src/declarative/fx/qfxpath.cpp | 90 +++++++++------------ src/declarative/fx/qfxpathview.cpp | 28 +------ 7 files changed, 115 insertions(+), 80 deletions(-) create mode 100644 doc/src/snippets/declarative/pathview/dummydata/MenuModel.qml create mode 100644 doc/src/snippets/declarative/pathview/pathattributes.qml create mode 100644 doc/src/snippets/declarative/pathview/pathview.qml create mode 100644 doc/src/snippets/declarative/pathview/pics/qtlogo-64.png diff --git a/doc/src/images/declarative-pathattribute.png b/doc/src/images/declarative-pathattribute.png index 04215db..57cd049 100644 Binary files a/doc/src/images/declarative-pathattribute.png and b/doc/src/images/declarative-pathattribute.png differ 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 new file mode 100644 index 0000000..4f68e16 Binary files /dev/null and b/doc/src/snippets/declarative/pathview/pics/qtlogo-64.png differ 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 - - - - - - - - - \endcode + \snippet doc/src/snippets/declarative/pathview/pathattributes.qml 2 */ QList* 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 - - - - - - - - - - - - - - - - - \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 } + } \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 } + } \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 + } + } \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 } + } \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: 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 #include -#include #include #include "qmlbindablevalue.h" #include "qmlstate.h" @@ -51,7 +50,6 @@ #include "qfxpathview.h" #include "qfxpathview_p.h" #include -#include 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 - - ... - ... - ... - - \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 - - - - - - - - - - ... - - \endcode + \snippet doc/src/snippets/declarative/pathview/pathview.qml 1 */ /*! -- cgit v0.12