diff options
author | Laszlo Agocs <laszlo.agocs@qt.io> | 2016-12-03 21:30:12 +0100 |
---|---|---|
committer | Laszlo Agocs <laszlo.agocs@qt.io> | 2016-12-19 17:03:46 +0000 |
commit | c9023c28764e70cd1c6f9cfc3506e6185299548e (patch) | |
tree | 1578cf3ea1f97b024f036b923cb1e02fee0b92cc /tests/manual | |
parent | 25277124d8b7581a9390702ad3d4bcd4be8dedd7 (diff) |
Add QQuickPathItem and its backend infra
The generic backend uses the triangulator from QtGui, but is in
fact OpenGL-only for now due to materials.
The NVPR backend uses GL_NV_path_rendering on NVIDIA hardware with
OpenGL 4.3+ or OpenGL ES 3.1+.
The software backend simply uses QPainter.
With the generic backend each PathItem is backed by a non-visual root node
and 0, 1 or 2 child geometry nodes, depending on the presence of visible
stroking and filling. The potentially expensive triangulation happens on
updatePolish(), on the gui thread. This is proven to provide much smoother
results when compared to doing the geometry generation on the render thread
in updatePaintNode(), in particular on power-limited embedded devices.
The NVPR backend uses a QSGRenderNode in DepthAware mode so that the batch
renderer can continue to rely on the depth buffer and use opaque batches.
Due to not relying on slow CPU-side triangulation, this backend uses 5-10
times less CPU, even when properties of the path or its elements are
animated.
The path itself is specified with the PathView's Path, PathLine, PathArc,
PathQuad, etc. types. This allows for consistency with PathView and the
2D Canvas and avoids a naming mess in the API. However, there won't be a
100% symmetry: backends like NVPR will not rely on QPainterPath but process
the path elements on their own (as QPainterPath is essentially useless with
these APIs), which can lead to differences in the supported path elements.
The supported common set is currently Move, Line, Quad, Cubic, Arc.
The patch introduces PathMove, which is essentially PathLine but maps to
moveTo instead of lineTo. More types may get added later (e.g. NVPR can do
a wide variety of optimized rounded rects, but this requires directly
specifying a GL_ROUNDED_RECTx_NV command, thus neededing a dedicated Path
type on our side too)
For filling with gradients only linear gradients are supported at the
moment.
In addition to the declarative API, a more lightweight, QObject-less
JS-callable API should be considered as well for the future.
Change-Id: I335ad64b425ee279505d60e3e57ac6841e1cbd24
Reviewed-by: Andy Nichols <andy.nichols@qt.io>
Diffstat (limited to 'tests/manual')
-rw-r--r-- | tests/manual/pathitem/main.cpp | 64 | ||||
-rw-r--r-- | tests/manual/pathitem/pathitem.pro | 6 | ||||
-rw-r--r-- | tests/manual/pathitem/pathitem.qrc | 5 | ||||
-rw-r--r-- | tests/manual/pathitem/pathitemtest.qml | 303 |
4 files changed, 378 insertions, 0 deletions
diff --git a/tests/manual/pathitem/main.cpp b/tests/manual/pathitem/main.cpp new file mode 100644 index 0000000000..62ef4385d6 --- /dev/null +++ b/tests/manual/pathitem/main.cpp @@ -0,0 +1,64 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +#include <QGuiApplication> +#include <QSurfaceFormat> +#include <QQuickView> +#include <QQmlEngine> + +int main(int argc, char **argv) +{ + QGuiApplication app(argc, argv); + + QQuickView view; + + if (app.arguments().contains(QStringLiteral("--multisample"))) { + QSurfaceFormat fmt; + fmt.setSamples(4); + view.setFormat(fmt); + } + + view.setResizeMode(QQuickView::SizeRootObjectToView); + view.resize(1024, 768); + view.setSource(QUrl("qrc:/pathitemtest/pathitemtest.qml")); + view.show(); + + return app.exec(); +} diff --git a/tests/manual/pathitem/pathitem.pro b/tests/manual/pathitem/pathitem.pro new file mode 100644 index 0000000000..291b0e3ab9 --- /dev/null +++ b/tests/manual/pathitem/pathitem.pro @@ -0,0 +1,6 @@ +TEMPLATE = app + +QT += quick qml +SOURCES += main.cpp +RESOURCES += pathitem.qrc +OTHER_FILES += pathitemtest.qml diff --git a/tests/manual/pathitem/pathitem.qrc b/tests/manual/pathitem/pathitem.qrc new file mode 100644 index 0000000000..d128548ccf --- /dev/null +++ b/tests/manual/pathitem/pathitem.qrc @@ -0,0 +1,5 @@ +<RCC> + <qresource prefix="/pathitemtest"> + <file>pathitemtest.qml</file> + </qresource> +</RCC> diff --git a/tests/manual/pathitem/pathitemtest.qml b/tests/manual/pathitem/pathitemtest.qml new file mode 100644 index 0000000000..cf8a3deece --- /dev/null +++ b/tests/manual/pathitem/pathitemtest.qml @@ -0,0 +1,303 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the QtQuick module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.9 // to get PathItem + +Rectangle { + id: root + width: 1024 + height: 768 + + property color col: "lightsteelblue" + gradient: Gradient { + GradientStop { position: 0.0; color: Qt.tint(root.col, "#20FFFFFF") } + GradientStop { position: 0.1; color: Qt.tint(root.col, "#20AAAAAA") } + GradientStop { position: 0.9; color: Qt.tint(root.col, "#20666666") } + GradientStop { position: 1.0; color: Qt.tint(root.col, "#20000000") } + } + + Row { + anchors.top: parent.top + anchors.centerIn: parent + spacing: 20 + + Column { + spacing: 20 + + Rectangle { + border.color: "purple" + color: "transparent" + width: 200 + height: 100 + PathItem { + id: triangle + anchors.fill: parent + strokeWidth: 4 + strokeColor: "red" + fillGradient: PathLinearGradient { + x1: 0; y1: 0 + x2: 200; y2: 100 + PathGradientStop { position: 0; color: "blue" } + PathGradientStop { position: 0.2; color: "green" } + PathGradientStop { position: 0.4; color: "red" } + PathGradientStop { position: 0.6; color: "yellow" } + PathGradientStop { position: 1; color: "cyan" } + } + fillColor: "blue" // ignored with the gradient set + strokeStyle: PathItem.DashLine + dashPattern: [ 1, 4 ] + path: Path { + PathLine { x: 200; y: 100 } + PathLine { x: 0; y: 100 } + PathLine { x: 0; y: 0 } + } + transform: Rotation { origin.x: 100; origin.y: 50; axis { x: 0; y: 1; z: 0 } + SequentialAnimation on angle { + NumberAnimation { from: 0; to: 75; duration: 2000 } + NumberAnimation { from: 75; to: -75; duration: 4000 } + NumberAnimation { from: -75; to: 0; duration: 2000 } + loops: Animation.Infinite + } + } + } + } + + Rectangle { + border.color: "purple" + color: "transparent" + width: 200 + height: 100 + PathItem { + id: someCurve + anchors.fill: parent + property color sc: "gray" + strokeColor: sc + property color fc: "yellow" + fillColor: fc + path: Path { + startX: 20; startY: 10 + PathQuad { x: 50; y: 80; controlX: 0; controlY: 80 } + PathLine { x: 150; y: 80 } + PathQuad { x: 180; y: 10; controlX: 200; controlY: 80 } + PathLine { x: 20; y: 10 } + } + // Dynamic changes via property bindings etc. all work but can + // be computationally expense with the generic backend for properties + // that need retriangulating on every change. Should be cheap with NVPR. + NumberAnimation on strokeWidth { + from: 1; to: 20; duration: 10000 + } + // Changing colors for a solid stroke or fill is simple and + // (relatively) cheap. However, changing to/from transparent + // stroke/fill color and stroke width 0 are special as these + // change the scenegraph node tree (with the generic backend). + Timer { + interval: 2000 + running: true + repeat: true + onTriggered: someCurve.fillColor = (someCurve.fillColor === someCurve.fc ? "transparent" : someCurve.fc) + } + Timer { + interval: 1000 + running: true + repeat: true + onTriggered: someCurve.strokeColor = (someCurve.strokeColor === someCurve.sc ? "transparent" : someCurve.sc) + } + } + } + + Rectangle { + border.color: "purple" + color: "transparent" + width: 300 + height: 100 + PathItem { + id: linesAndMoves + anchors.fill: parent + strokeColor: "black" + path: Path { + startX: 0; startY: 50 + PathLine { relativeX: 100; y: 50 } + PathMove { relativeX: 100; y: 50 } + PathLine { relativeX: 100; y: 50 } + } + } + } + + Rectangle { + border.color: "purple" + color: "transparent" + width: 200 + height: 120 + PathItem { + id: joinTest + anchors.fill: parent + strokeColor: "black" + strokeWidth: 16 + fillColor: "transparent" + capStyle: PathItem.RoundCap + path: Path { + startX: 30 + startY: 30 + PathLine { x: 100; y: 100 } + PathLine { x: 30; y: 100 } + } + Timer { + interval: 1000 + repeat: true + running: true + property variant styles: [ PathItem.BevelJoin, PathItem.MiterJoin, PathItem.RoundJoin ] + onTriggered: { + for (var i = 0; i < styles.length; ++i) + if (styles[i] === joinTest.joinStyle) { + joinTest.joinStyle = styles[(i + 1) % styles.length]; + break; + } + } + } + } + } + + Rectangle { + border.color: "purple" + color: "transparent" + width: 200 + height: 100 + PathItem { + id: star + anchors.fill: parent + strokeColor: "blue" + fillColor: "lightGray" + strokeWidth: 2 + path: Path { + PathMove { x: 90; y: 50 } + PathLine { x: 50 + 40 * Math.cos(0.8 * 1 * Math.PI); y: 50 + 40 * Math.sin(0.8 * 1 * Math.PI) } + PathLine { x: 50 + 40 * Math.cos(0.8 * 2 * Math.PI); y: 50 + 40 * Math.sin(0.8 * 2 * Math.PI) } + PathLine { x: 50 + 40 * Math.cos(0.8 * 3 * Math.PI); y: 50 + 40 * Math.sin(0.8 * 3 * Math.PI) } + PathLine { x: 50 + 40 * Math.cos(0.8 * 4 * Math.PI); y: 50 + 40 * Math.sin(0.8 * 4 * Math.PI) } + PathLine { x: 90; y: 50 } + } + Timer { + interval: 1000 + onTriggered: star.fillRule = (star.fillRule === PathItem.OddEvenFill ? PathItem.WindingFill : PathItem.OddEvenFill) + repeat: true + running: true + } + } + } + + Rectangle { + border.color: "purple" + color: "transparent" + width: 200 + height: 100 + PathItem { + anchors.fill: parent + strokeWidth: 4 + strokeColor: "black" + fillColor: "transparent" + path: Path { + startX: 20; startY: 10 + PathCubic { + id: cb + x: 180; y: 10 + control1X: -10; control1Y: 90; control2Y: 90 + NumberAnimation on control2X { from: 400; to: 0; duration: 5000; loops: Animation.Infinite } + } + } + } + } + } + + Column { + spacing: 20 + + Rectangle { + border.color: "purple" + color: "transparent" + width: 200 + height: 100 + PathItem { + anchors.fill: parent + fillColor: "transparent" + strokeColor: "red" + strokeWidth: 4 + path: Path { + startX: 10; startY: 40 + PathArc { + x: 10; y: 60 + radiusX: 40; radiusY: 40 + useLargeArc: true + } + } + } + } + } + } + + Rectangle { + id: stackTestRect + SequentialAnimation on opacity { + NumberAnimation { from: 0; to: 1; duration: 5000 } + PauseAnimation { duration: 2000 } + NumberAnimation { from: 1; to: 0; duration: 5000 } + PauseAnimation { duration: 2000 } + loops: Animation.Infinite + id: opAnim + } + color: "blue" + anchors.margins: 10 + anchors.fill: parent + } + MouseArea { + anchors.fill: parent + onClicked: stackTestRect.visible = !stackTestRect.visible + } +} |