From 149a1dd7e0e51c10c0fba4b2bd291b313b439c06 Mon Sep 17 00:00:00 2001 From: Johan Thelin Date: Fri, 12 Nov 2021 11:11:43 +0100 Subject: [PATCH] ch09: WIP, all examples in place --- docs/ch09-shapes/gradients.md | 8 +- docs/ch09-shapes/paths.md | 24 ++- docs/ch09-shapes/src/shapes/fillmode.qml | 105 ++++++++++++ docs/ch09-shapes/src/shapes/gradients.qml | 200 ++++++++++++++++++++++ docs/ch09-shapes/src/shapes/paths.qml | 65 ++++++- 5 files changed, 393 insertions(+), 9 deletions(-) create mode 100644 docs/ch09-shapes/src/shapes/fillmode.qml diff --git a/docs/ch09-shapes/gradients.md b/docs/ch09-shapes/gradients.md index bfa5db12..377e87b3 100644 --- a/docs/ch09-shapes/gradients.md +++ b/docs/ch09-shapes/gradients.md @@ -2,4 +2,10 @@ discuss how gradients and fills work -<<< @/docs/ch09-shapes/src/shapes/gradients.qml#global +<<< @/docs/ch09-shapes/src/shapes/fillmode.qml#oddeven +<<< @/docs/ch09-shapes/src/shapes/fillmode.qml#winding + +<<< @/docs/ch09-shapes/src/shapes/gradients.qml#solid +<<< @/docs/ch09-shapes/src/shapes/gradients.qml#linear +<<< @/docs/ch09-shapes/src/shapes/gradients.qml#conical +<<< @/docs/ch09-shapes/src/shapes/gradients.qml#radial diff --git a/docs/ch09-shapes/paths.md b/docs/ch09-shapes/paths.md index 313b3a1c..fe6f5134 100644 --- a/docs/ch09-shapes/paths.md +++ b/docs/ch09-shapes/paths.md @@ -4,9 +4,31 @@ discuss the various path elements available <<< @/docs/ch09-shapes/src/shapes/basic.qml#global + +PathMove, PathLine + <<< @/docs/ch09-shapes/src/shapes/paths.qml#line + + +PathPolyline, PathMultiline + <<< @/docs/ch09-shapes/src/shapes/paths.qml#polyline + + +PathArc, PathAngleArc + <<< @/docs/ch09-shapes/src/shapes/paths.qml#arc + +PathQuad + <<< @/docs/ch09-shapes/src/shapes/paths.qml#quad -<<< @/docs/ch09-shapes/src/shapes/paths.qml#cube + +PathCube + +<<< @/docs/ch09-shapes/src/shapes/paths.qml#cubic + +PathCurve + <<< @/docs/ch09-shapes/src/shapes/paths.qml#curve + +PathSvg diff --git a/docs/ch09-shapes/src/shapes/fillmode.qml b/docs/ch09-shapes/src/shapes/fillmode.qml new file mode 100644 index 00000000..aed511fa --- /dev/null +++ b/docs/ch09-shapes/src/shapes/fillmode.qml @@ -0,0 +1,105 @@ +/* +Copyright (c) 2021-2021, Juergen Bocklage Ryannel and Johan Thelin +All rights reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + +1. Redistributions of source code must retain the above copyright notice, this + list of conditions and the following disclaimer. + +2. 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. + +3. Neither the name of the copyright holder 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 HOLDER 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. +*/ + +// #region global +import QtQuick +import QtQuick.Shapes + +Rectangle { + id: root + width: 400 + height: 200 + +// #region oddeven + Shape { + ShapePath { + strokeWidth: 3 + strokeColor: "darkgray" + fillColor: "orange" + + fillRule: ShapePath.OddEvenFill + + PathPolyline { + path: [ + Qt.point(100, 20), + Qt.point(150, 180), + Qt.point( 20, 75), + Qt.point(180, 75), + Qt.point( 50, 180), + Qt.point(100, 20), + ] + } + } + } +// #endregion oddeven + +// #region winding + Shape { + ShapePath { + strokeWidth: 3 + strokeColor: "darkgray" + fillColor: "orange" + + fillRule: ShapePath.WindingFill + + PathPolyline { + path: [ + Qt.point(300, 20), + Qt.point(350, 180), + Qt.point(220, 75), + Qt.point(380, 75), + Qt.point(250, 180), + Qt.point(300, 20), + ] + } + } + } +// #endregion winding + + Text { + x: 0 + y: 180 + width: 200 + + text: "OddEvenFill" + horizontalAlignment: Text.AlignHCenter + } + Text { + x: 200 + y: 180 + width: 200 + + text: "WindingFill" + horizontalAlignment: Text.AlignHCenter + } + + +} +// #endregion global diff --git a/docs/ch09-shapes/src/shapes/gradients.qml b/docs/ch09-shapes/src/shapes/gradients.qml index e69de29b..1ea3bd54 100644 --- a/docs/ch09-shapes/src/shapes/gradients.qml +++ b/docs/ch09-shapes/src/shapes/gradients.qml @@ -0,0 +1,200 @@ +/* +Copyright (c) 2021-2021, Juergen Bocklage Ryannel and Johan Thelin +All rights reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + +1. Redistributions of source code must retain the above copyright notice, this + list of conditions and the following disclaimer. + +2. 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. + +3. Neither the name of the copyright holder 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 HOLDER 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. +*/ + +// #region global +import QtQuick +import QtQuick.Shapes + +Rectangle { + id: root + width: 400 + height: 400 + +// #region solid + Shape { + ShapePath { + strokeWidth: 3 + strokeColor: "darkgray" + + fillColor: "lightgreen" + + startX: 20; startY: 140 + + PathLine { + x: 180 + y: 140 + } + PathArc { + x: 20 + y: 140 + radiusX: 80 + radiusY: 80 + direction: PathArc.Counterclockwise + useLargeArc: true + } + } + } +// #endregion solid + +// #region conical + Shape { + ShapePath { + strokeWidth: 3 + strokeColor: "darkgray" + + fillGradient: ConicalGradient { + centerX: 300; centerY: 100 + angle: 360 + + GradientStop { position: 0.0; color: "lightgreen" } + GradientStop { position: 0.7; color: "yellow" } + GradientStop { position: 1.0; color: "darkgreen" } + } + + startX: 220; startY: 140 + + PathLine { + x: 380 + y: 140 + } + PathArc { + x: 220 + y: 140 + radiusX: 80 + radiusY: 80 + direction: PathArc.Counterclockwise + useLargeArc: true + } + } + } +// #endregion conical + +// #region linear + Shape { + ShapePath { + strokeWidth: 3 + strokeColor: "darkgray" + + fillGradient: LinearGradient { + x1: 50; y1: 300 + x2: 150; y2: 280 + + GradientStop { position: 0.0; color: "lightgreen" } + GradientStop { position: 0.7; color: "yellow" } + GradientStop { position: 1.0; color: "darkgreen" } + } + + startX: 20; startY: 340 + + PathLine { + x: 180 + y: 340 + } + PathArc { + x: 20 + y: 340 + radiusX: 80 + radiusY: 80 + direction: PathArc.Counterclockwise + useLargeArc: true + } + } + } +// #endregion linear + +// #region radial + Shape { + ShapePath { + strokeWidth: 3 + strokeColor: "darkgray" + + fillGradient: RadialGradient { + centerX: 300; centerY: 250; centerRadius: 120 + focalX: 300; focalY: 220; focalRadius: 10 + + GradientStop { position: 0.0; color: "lightgreen" } + GradientStop { position: 0.7; color: "yellow" } + GradientStop { position: 1.0; color: "darkgreen" } + } + + startX: 220; startY: 340 + + PathLine { + x: 380 + y: 340 + } + PathArc { + x: 220 + y: 340 + radiusX: 80 + radiusY: 80 + direction: PathArc.Counterclockwise + useLargeArc: true + } + } + } +// #endregion radial + + Text { + x: 0 + y: 150 + width: 200 + + text: "Solid Colour" + horizontalAlignment: Text.AlignHCenter + } + Text { + x: 200 + y: 150 + width: 200 + + text: "ConicalGradient" + horizontalAlignment: Text.AlignHCenter + } + Text { + x: 0 + y: 350 + width: 200 + + text: "LinearGradient" + horizontalAlignment: Text.AlignHCenter + } + Text { + x: 200 + y: 350 + width: 200 + + text: "RadialGradient" + horizontalAlignment: Text.AlignHCenter + } + + +} +// #endregion global diff --git a/docs/ch09-shapes/src/shapes/paths.qml b/docs/ch09-shapes/src/shapes/paths.qml index 692e60bd..9c78782a 100644 --- a/docs/ch09-shapes/src/shapes/paths.qml +++ b/docs/ch09-shapes/src/shapes/paths.qml @@ -63,7 +63,7 @@ Rectangle { path: [ Qt.point(220, 100), Qt.point(260, 20), - Qt.point(300, 180), + Qt.point(300, 170), Qt.point(340, 60), Qt.point(380, 100) ] @@ -104,7 +104,7 @@ Rectangle { } // #endregion quad -// #region cube +// #region cubic Shape { ShapePath { strokeWidth: 3 @@ -119,7 +119,7 @@ Rectangle { } } } -// #endregion cube +// #endregion cubic // #region curve Shape { @@ -130,7 +130,7 @@ Rectangle { startX: 420; startY: 300 PathCurve { x: 460; y: 220 } - PathCurve { x: 500; y: 380 } + PathCurve { x: 500; y: 370 } PathCurve { x: 540; y: 270 } PathCurve { x: 580; y: 300 } } @@ -142,7 +142,7 @@ Rectangle { Marker { x: 220; y: 100 } Marker { x: 260; y: 20 } - Marker { x: 300; y: 180 } + Marker { x: 300; y: 170 } Marker { x: 340; y: 60 } Marker { x: 380; y: 100 } @@ -160,8 +160,59 @@ Rectangle { Marker { x: 420; y: 300 } Marker { x: 460; y: 220 } - Marker { x: 500; y: 380 } + Marker { x: 500; y: 370 } Marker { x: 540; y: 270 } - Marker { x: 580; y: 300 } + Marker { x: 560; y: 300 } + + Text { + x: 0 + y: 180 + width: 200 + + text: "PathLine" + horizontalAlignment: Text.AlignHCenter + } + Text { + x: 200 + y: 180 + width: 200 + + text: "PathPolyline" + horizontalAlignment: Text.AlignHCenter + } + Text { + x: 400 + y: 180 + width: 200 + + text: "PathArc" + horizontalAlignment: Text.AlignHCenter + } + Text { + x: 0 + y: 380 + width: 200 + + text: "PathQuad" + horizontalAlignment: Text.AlignHCenter + } + Text { + x: 200 + y: 380 + width: 200 + + text: "PathCubic" + horizontalAlignment: Text.AlignHCenter + } + Text { + x: 400 + y: 380 + width: 200 + + text: "PathCurve" + horizontalAlignment: Text.AlignHCenter + } + + } // #endregion global