From 03191936c4b990a2255240cc553b758d1a36b4f4 Mon Sep 17 00:00:00 2001 From: Leena Miettinen Date: Tue, 27 Oct 2020 16:20:25 +0100 Subject: Doc: Update information about using gradients Describe setting properties for linear, radial, and conical radients that are supported for Studio Components. Add screenshots and a gif that illustrates adding and removing gradient stops. Change-Id: I9dfbee044b0ae37b217cc833c77f886c391292ba Reviewed-by: Thomas Hartmann --- .../images/qtquick-designer-color-picker.png | Bin 23560 -> 31703 bytes ...tquick-designer-gradient-properties-conical.png | Bin 0 -> 18094 bytes ...qtquick-designer-gradient-properties-linear.png | Bin 0 -> 14118 bytes ...qtquick-designer-gradient-properties-radial.png | Bin 0 -> 19980 bytes .../images/qtquick-designer-gradient-stops.gif | Bin 0 -> 96155 bytes .../images/qtquick-designer-gradient-types.png | Bin 0 -> 26469 bytes doc/qtcreator/src/qtquick/qtquick-properties.qdoc | 68 ++++++++++++++++++++- .../doc/images/loginui1-background-gradient.png | Bin 33876 -> 17222 bytes doc/qtdesignstudio/examples/doc/loginui1.qdoc | 13 ++-- 9 files changed, 73 insertions(+), 8 deletions(-) create mode 100644 doc/qtcreator/images/qtquick-designer-gradient-properties-conical.png create mode 100644 doc/qtcreator/images/qtquick-designer-gradient-properties-linear.png create mode 100644 doc/qtcreator/images/qtquick-designer-gradient-properties-radial.png create mode 100644 doc/qtcreator/images/qtquick-designer-gradient-stops.gif create mode 100644 doc/qtcreator/images/qtquick-designer-gradient-types.png (limited to 'doc') diff --git a/doc/qtcreator/images/qtquick-designer-color-picker.png b/doc/qtcreator/images/qtquick-designer-color-picker.png index d5fe52a64f..d35f62e952 100644 Binary files a/doc/qtcreator/images/qtquick-designer-color-picker.png and b/doc/qtcreator/images/qtquick-designer-color-picker.png differ diff --git a/doc/qtcreator/images/qtquick-designer-gradient-properties-conical.png b/doc/qtcreator/images/qtquick-designer-gradient-properties-conical.png new file mode 100644 index 0000000000..72dd3b3d26 Binary files /dev/null and b/doc/qtcreator/images/qtquick-designer-gradient-properties-conical.png differ diff --git a/doc/qtcreator/images/qtquick-designer-gradient-properties-linear.png b/doc/qtcreator/images/qtquick-designer-gradient-properties-linear.png new file mode 100644 index 0000000000..3a94f97b69 Binary files /dev/null and b/doc/qtcreator/images/qtquick-designer-gradient-properties-linear.png differ diff --git a/doc/qtcreator/images/qtquick-designer-gradient-properties-radial.png b/doc/qtcreator/images/qtquick-designer-gradient-properties-radial.png new file mode 100644 index 0000000000..10daa7fc43 Binary files /dev/null and b/doc/qtcreator/images/qtquick-designer-gradient-properties-radial.png differ diff --git a/doc/qtcreator/images/qtquick-designer-gradient-stops.gif b/doc/qtcreator/images/qtquick-designer-gradient-stops.gif new file mode 100644 index 0000000000..2153f3b019 Binary files /dev/null and b/doc/qtcreator/images/qtquick-designer-gradient-stops.gif differ diff --git a/doc/qtcreator/images/qtquick-designer-gradient-types.png b/doc/qtcreator/images/qtquick-designer-gradient-types.png new file mode 100644 index 0000000000..53ab8c9907 Binary files /dev/null and b/doc/qtcreator/images/qtquick-designer-gradient-types.png differ diff --git a/doc/qtcreator/src/qtquick/qtquick-properties.qdoc b/doc/qtcreator/src/qtquick/qtquick-properties.qdoc index dd7f3cb2a0..5b69fc310e 100644 --- a/doc/qtcreator/src/qtquick/qtquick-properties.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-properties.qdoc @@ -138,15 +138,77 @@ You can use either a solid color (3) or a gradient (4). You can select the gradient in the \uicontrol {Gradient Picker} (5). - The gradient stops (6) specify the color used at a given position in a - gradient. Drag them along the slider to set their values. - The \uicontrol Original field displays the original color of the item, whereas the \uicontrol New field displays the current color. The \uicontrol Recent field displays the colors that you have last selected. \section1 Picking Gradients + A gradient is defined by two or more colors, which will be blended + seamlessly. The colors are specified as a set of gradient stops, + each of which defines a position on the gradient bar from 0.0 to 1.0 + and a color. Drag the gradient stops along the gradient bar to set their + values. Select the arrow below a gradient stop to see its value as + a number. + + To add gradient stops, move the cursor over the gradient bar and point at + it with the finger-shaped cursor. To remove gradient stops, pull them away + from the gradient line. + + \image qtquick-designer-gradient-stops.gif + + Calculating gradients can be computationally expensive compared to the + use of solid color fills or images. Consider using gradients only for + static items in a UI. + + \if defined(qtdesignstudio) + \section2 Setting Gradient Properties + + Select the arrow below the gradient button to set gradient properties + for Studio Components. + + \image qtquick-designer-gradient-types.png "Gradients supported by Studio Components" + + \section3 Linear Gradients + + A \e {linear gradient} interpolates colors between start and end points. + Outside these points, the gradient is either padded, reflected, or repeated + depending on the spread type. Set start and end points for horizontal and + vertical interpolation in the \uicontrol X1, \uicontrol X2, \uicontrol Y1, + and \uicontrol Y2 fields. + + \image qtquick-designer-gradient-properties-linear.png "Linear gradient properties" + + \section3 Radial Gradients + + A \e {radial gradient} interpolates colors between a focal circle and a + center circle. Points outside the cone defined by the two circles will + be transparent. Outside the end points, the gradient is either padded, + reflected, or repeated depending on the spread type. + + \image qtquick-designer-gradient-properties-radial.png "Radial gradient properties" + + You can set the center and focal radius in the \uicontrol {Center radius} + and \uicontrol {Focal radius} fields. For simple radial gradients, set to + the focal radius to 0. + + You can set the center and focal points in the \uicontrol CenterX, + \uicontrol CenterY, \uicontrol FocalX, and \uicontrol FocalY fields. + To specify a simple radial gradient, set the focal X and focal Y to + the value of center X and center Y, respectively. + + \section3 Conical Gradients + + A \e {conical gradient} interpolates colors counter-clockwise around a + center point. Set the horizontal and vertical center point of the gradient + in the \uicontrol CenterX and \uicontrol CenterY fields and the start angle + in the \uicontrol Angle field. + + \image qtquick-designer-gradient-properties-conical.png "Conical gradient properties" + \endif + + \section2 Selecting Web Gradients + The \uicontrol {Gradient Picker} enables you to specify \l{https://webgradients.com/}{WebGradients} for QML types that support \l QGradient. diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-background-gradient.png b/doc/qtdesignstudio/examples/doc/images/loginui1-background-gradient.png index 40564fbb14..27c7a34dfd 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1-background-gradient.png and b/doc/qtdesignstudio/examples/doc/images/loginui1-background-gradient.png differ diff --git a/doc/qtdesignstudio/examples/doc/loginui1.qdoc b/doc/qtdesignstudio/examples/doc/loginui1.qdoc index 53e76feb66..f3bbd84369 100644 --- a/doc/qtdesignstudio/examples/doc/loginui1.qdoc +++ b/doc/qtdesignstudio/examples/doc/loginui1.qdoc @@ -156,11 +156,14 @@ properties in \uicontrol Properties. \li In the \uicontrol Color field, select the \inlineimage icon_color_gradient.png - (\uicontrol Gradient) button to add a linear gradient to the - screen background. In this example, the color changes from - white to green (#41cd52), with a stop point set at position 0.5. - You can use your favorite colors or select a predefined gradient - in the \uicontrol {Gradient Picker}. + (\uicontrol {Linear Gradient}) button to add a linear gradient to + the screen background. Click the start point (1) and end point (2) + to specify the gradient colors. Drag and drop the points along the + gradient bar to specify where the gradient starts and ends. In this + tutorial, the color changes from white to green (#41cd52), starting + mid-screen, at position 0.5. You can use your favorite colors or + select a predefined gradient in the \uicontrol {Gradient Picker}. + For more information, see \l{Picking Gradients}. \image loginui1-background-gradient.png "Rectangle color properties" \li Select \e Text in \uicontrol Navigator to display its properties in \uicontrol Properties. -- cgit v1.2.3