From e9f73408166f95596167ccaa79ecda522714daa8 Mon Sep 17 00:00:00 2001 From: Leena Miettinen Date: Wed, 2 Dec 2020 18:34:46 +0100 Subject: [PATCH] Doc: Add missing docs for 2D effects Moved the section to its own topic, because it was getting very long. Also described the properties of each effect. Fixes: QDS-3229 Change-Id: Ie93f4ca956bdca4afbd31e7606a47c4e1d1e5bb4 Reviewed-by: Thomas Hartmann --- .../qtquick/library/qtquick-data-models.qdoc | 4 + .../src/qtquick/qtquick-buttons.qdoc | 6 +- .../src/qtquick/qtquick-components.qdoc | 7 +- doc/qtdesignstudio/examples/doc/sidemenu.qdoc | 2 +- .../images/icons/displace-16px.png | Bin 0 -> 335 bytes .../images/icons/gamma-adjust-16px.png | Bin 0 -> 273 bytes .../images/icons/gaussian-blur-16px.png | Bin 0 -> 333 bytes .../images/icons/inner-shadow-16px.png | Bin 0 -> 208 bytes .../images/icons/levels-16px.png | Bin 0 -> 108 bytes .../images/icons/recursive-blur-16px.png | Bin 0 -> 335 bytes .../images/icons/threshold-16px.png | Bin 0 -> 147 bytes .../images/studio-2d-effects.png | Bin 0 -> 10924 bytes .../src/qtdesignstudio-toc.qdoc | 1 + .../src/qtdesignstudio-visual-effects.qdocinc | 117 ------ .../qtdesignstudio-visual-effects.qdoc | 376 ++++++++++++++++++ .../qtquickdesigner-components.qdoc | 5 +- 16 files changed, 392 insertions(+), 126 deletions(-) create mode 100644 doc/qtdesignstudio/images/icons/displace-16px.png create mode 100644 doc/qtdesignstudio/images/icons/gamma-adjust-16px.png create mode 100644 doc/qtdesignstudio/images/icons/gaussian-blur-16px.png create mode 100644 doc/qtdesignstudio/images/icons/inner-shadow-16px.png create mode 100644 doc/qtdesignstudio/images/icons/levels-16px.png create mode 100644 doc/qtdesignstudio/images/icons/recursive-blur-16px.png create mode 100644 doc/qtdesignstudio/images/icons/threshold-16px.png create mode 100644 doc/qtdesignstudio/images/studio-2d-effects.png delete mode 100644 doc/qtdesignstudio/src/qtdesignstudio-visual-effects.qdocinc create mode 100644 doc/qtdesignstudio/src/qtquickdesigner-components/qtdesignstudio-visual-effects.qdoc diff --git a/doc/qtcreator/src/qtquick/library/qtquick-data-models.qdoc b/doc/qtcreator/src/qtquick/library/qtquick-data-models.qdoc index 24cdb187e3a..f807f45e0fc 100644 --- a/doc/qtcreator/src/qtquick/library/qtquick-data-models.qdoc +++ b/doc/qtcreator/src/qtquick/library/qtquick-data-models.qdoc @@ -26,7 +26,11 @@ /*! \page quick-data-models.html \previouspage quick-controls.html + \if defined(qtdesignstudio) + \nextpage quick-2d-effects.html + \else \nextpage quick-buttons.html + \endif \title Lists and Other Data Models diff --git a/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc b/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc index 8b59984afff..288a80ec58d 100644 --- a/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc @@ -30,8 +30,12 @@ // ********************************************************************** /*! - \previouspage quick-data-models.html \page quick-buttons.html + \if defined(qtdesignstudio) + \previouspage quick-2d-effects.html + \else + \previouspage quick-data-models.html + \endif \nextpage quick-scalable-image.html \title Creating Buttons diff --git a/doc/qtcreator/src/qtquick/qtquick-components.qdoc b/doc/qtcreator/src/qtquick/qtquick-components.qdoc index e54e3ca020e..20460bbe152 100644 --- a/doc/qtcreator/src/qtquick/qtquick-components.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-components.qdoc @@ -123,14 +123,13 @@ \li \l Images \li \l {User Interaction Methods} \li \l {Lists and Other Data Models} + \if defined(qtdesignstudio) + \li \l {2D Effects} + \endif \endlist \include qtquick-animation-types.qdocinc qtquick animation types - \if defined(qtdesignstudio) - \include qtdesignstudio-visual-effects.qdocinc qml visual effects - \endif - \include qtquick-mcu-support.qdocinc mcu qtquick components \section1 Styling Controls diff --git a/doc/qtdesignstudio/examples/doc/sidemenu.qdoc b/doc/qtdesignstudio/examples/doc/sidemenu.qdoc index 06131795b50..da4fe61e485 100644 --- a/doc/qtdesignstudio/examples/doc/sidemenu.qdoc +++ b/doc/qtdesignstudio/examples/doc/sidemenu.qdoc @@ -231,5 +231,5 @@ alias to be able to switch the image inside the stack. For more information about the available Qt graphical effects, see - \l {Applying Visual Effects}. + \l {2D Effects}. */ diff --git a/doc/qtdesignstudio/images/icons/displace-16px.png b/doc/qtdesignstudio/images/icons/displace-16px.png new file mode 100644 index 0000000000000000000000000000000000000000..dc2306b93bc09d2d7da2c291d6d6aa33b45e685d GIT binary patch literal 335 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4i*LmhONKMUokK+ig~&?hDb=39<=oqVUS^e z@IUoJp||5Jc8+y(q+FZS>>ak4q&PM@N1Jfy`cAYkV|6$WSusC@PR%!`?8wbFGmuiM9bj(js^8ULdTHN6|PlA?F}yz2guxA5PG zsGQ7e6QX}9J<9u=6!<3diof1(EhV{`D;O{TN?KP}e6X>jVqGZny^g29PDk!mN;(}f z)p}9%W1rVu9p!%3`oH|HTIfnEJzCXPTez}qPQe~Gp9sl7?qe3ucZt59w_{}?%kHVy0&a0Oeq~@_VDNPHb6Mw<&;$UKjgoW# literal 0 HcmV?d00001 diff --git a/doc/qtdesignstudio/images/icons/gamma-adjust-16px.png b/doc/qtdesignstudio/images/icons/gamma-adjust-16px.png new file mode 100644 index 0000000000000000000000000000000000000000..c4b16cad6e972725ff67c4de3a94056ba44d7925 GIT binary patch literal 273 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4i*LmhONKMUokK+-0*a943Us5J?O8^oFK#S z;Qp!kX4W%m81%BkEq7!*d9?5SLyw?+465wv>UrlG%h{i9ILx%2>guU}zPL0&C(36< z_0;W3g3S?=*R1{-*yEUDYNG0H*kgNgeGt!LrIp7F)b3h+SSr$dVx?72!MZe+Unea} z)#VezE{A;yo;GFi*=_u-FH%E;dd!R`Eq$T-`ruy6#aiq3YP#5W&$7F!sy{7RAhlnr e%*XY(yz1A6RY~lNQWzK*7(8A5T-G@yGywo{1#&9@ literal 0 HcmV?d00001 diff --git a/doc/qtdesignstudio/images/icons/gaussian-blur-16px.png b/doc/qtdesignstudio/images/icons/gaussian-blur-16px.png new file mode 100644 index 0000000000000000000000000000000000000000..8abcc21164bff2e3c8f35102255e35d08860130f GIT binary patch literal 333 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s7MLb;`Lo9lGC-3!Q4isp$ zZ%xR5sjX6bzNqDF0jTmau!Vem}|=#XY;w5 zDfI8TJ@q&E_C5AwkY|=nU<{e0{6ivCURl-ppVI4gr#=*EHdu88;fQN1oS@wQ$O-WQk@PwwrAMs!?8o-C!0^$W*;d9rR@11*&>+Y k|J}H?XIHuzQys&+!;U9zyF8e{z`(%Z>FVdQ&MBb@0PqfoVE_OC literal 0 HcmV?d00001 diff --git a/doc/qtdesignstudio/images/icons/inner-shadow-16px.png b/doc/qtdesignstudio/images/icons/inner-shadow-16px.png new file mode 100644 index 0000000000000000000000000000000000000000..dfd605d1cc730306b7a0043018bb371e21bd8d19 GIT binary patch literal 208 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s7rhB?LhFJ72ogB!;WXR*< z{&9UZhy4}fuXb^2+b{o}@7NioQNrCRt)aOk|HPJ)2hYUa5L_-_#kS#};^z#e?6qG# zH%*9A5%cO^q4aY1cb~dV>u-N8GB=i)9m4jly7x89qYcj;6_|hDRG84{nin#mL0#<8 zhdWLJ-?G>ndG^FQGR@oPDDq8zeniK?TJ>#_4d2V`RWIH!KgVz{w0+O+<@wkB85kHC NJYD@<);T3K0RW3sQ}qA< literal 0 HcmV?d00001 diff --git a/doc/qtdesignstudio/images/icons/levels-16px.png b/doc/qtdesignstudio/images/icons/levels-16px.png new file mode 100644 index 0000000000000000000000000000000000000000..07cd3642e5e432e75de45681906691439b02b3fa GIT binary patch literal 108 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRdMrH;E236Z!B?bltwg8_HR|W=#6)RSpxxYe( zfq{XsB*-tA!Qt7BGzJC+5l=G$zS7%^gVDNPH Kb6Mw<&;$UWvKgZQ literal 0 HcmV?d00001 diff --git a/doc/qtdesignstudio/images/icons/recursive-blur-16px.png b/doc/qtdesignstudio/images/icons/recursive-blur-16px.png new file mode 100644 index 0000000000000000000000000000000000000000..e12e40b7b85e4b777ccc4f76609515d2f1672ad6 GIT binary patch literal 335 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 yq=lSLVD= \uicontrol Effects to the - component in \uicontrol Navigator. - - The following table summarizes the available effects and contains links to - the documentation of the inherited QML type. - - \table - \header - \li Icon - \li Qt Quick Studio Effect - \li Description - \row - \li \inlineimage icons/blend-mode-16px.png - \li \l [QML] {Blend} - \li Merges two source components by using a blend mode. - - The default mode is \c subtract, where the pixel value from the - component that is going to be blended over the source component - is subtracted from the source and written. - - For a list of possible values and examples of their use, see - \l{Blend::mode}{Blend.mode}. - \row - \li \inlineimage icons/fast-blur-16px.png - \li \l {FastBlur}{Blur} - \li Applies a fast blur effect to one or more source components. - \row - \li \inlineimage icons/brightness-contrast-16px.png - \li \l {BrightnessContrast}{Brightness Contrast} - \li Adjusts brightness and contrast. - \row - \li \inlineimage icons/colourize-16px.png - \li \l {ColorOverlay}{Color Overlay} - \li Alters the colors of the source component by applying an overlay - color. - \row - \li \inlineimage icons/colourize-16px.png - \li \l Colorize - \li Sets the color in the HSL color space. - \row - \li \inlineimage icons/directional-blur-16px.png - \li \l {DirectionalBlur}{Directional Blur} - \li Applies blur effect to the specified direction. - \row - \li \inlineimage icons/drop-shadow-16px.png - \li \l {DropShadow}{Drop Shadow} - \li Generates a soft shadow behind the source component. - \row - \li \inlineimage icons/glow-16px.png - \li \l [QML] {Glow} - \li Generates a halo-like glow around the source component. - \row - \li \inlineimage icons/hue-saturation-16px.png - \li \l {HueSaturation}{Hue Saturation} - \li Alters the source component colors in the HSL color space. - \row - \li \inlineimage icons/opacity-mask-16px.png - \li \l {OpacityMask}{Mask} - \li Masks the source component with another component. - \row - \li \inlineimage icons/mask-blur-16px.png - \li \l {MaskedBlur}{Masked Blur} - \li Applies a blur effect with a varying intesity. - The \l GradientStop type is used to specify the color used at a - given position in a gradient, as represented by a gradient stop. - The default positions for the stops are 0.20, 0.50, 0.80, and 1.00. - The default color is black. - \row - \li \inlineimage icons/radial-blur-16px.png - \li \l {RadialBlur}{Radial Blur} - \li Applies directional blur in a circular direction around the - component's center point. - \row - \li \inlineimage icons/desaturation-16px.png - \li \l {Desaturate}{Saturation} - \li Reduces the saturation of the colors. - \row - \li \inlineimage icons/zoom-blur-16px.png - \li \l {ZoomBlur}{Zoom Blur} - \li Applies directional blur effect towards source component's center - point. - \endtable - -//! [qml visual effects] -*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/qtdesignstudio-visual-effects.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/qtdesignstudio-visual-effects.qdoc new file mode 100644 index 00000000000..dd56ac8855e --- /dev/null +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/qtdesignstudio-visual-effects.qdoc @@ -0,0 +1,376 @@ +/**************************************************************************** +** +** Copyright (C) 2020 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** 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. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \page quick-2d-effects.html + \previouspage quick-data-models.html + \nextpage quick-buttons.html + + \title 2D Effects + + \QDS provides a set of Qt Quick Studio effects that inherit the types in the + \l {Qt Graphical Effects} module. To apply a visual effect to a component, + drag-and-drop it from \uicontrol Library > \uicontrol Effects to the + component in \uicontrol Navigator. + + \image studio-2d-effects.png "Effects tab in Library" + + Effects have one or more source properties for specifying the visual input + for which the effect is applied to an item. The altered visual output is + then presented in the effect item itself. The source can be another, often + hidden, item in the QML scene. More complex effects can have multiple + sources. The source item type can be any QML type, even video or another + effect. Pipelining multiple effects together is a simple way to create + even more impressive output. + + Each effect has a set of properties that can be used to configure the effect + output. Properties can be animated just like any other QML properties. The + QML type documentation contains property descriptions and basic usage + examples. + + In addition to the effects described in this topic, you can set linear, + radial, and conical gradients. For more information, see + \l{Picking Gradients}. + + \section1 Caching and Borders + + The \uicontrol Cached property allows the effect output pixels to be cached + in order to improve the rendering performance. Every time the source or + effect properties are changed, the pixels in the cache must be updated. + Memory consumption is increased, because an extra buffer of memory is + required for storing the effect output. We recommend that you disable the + cache when the source or the effect properties are animated. + + The \uicontrol {Transparent border} property determines the blur behavior + near the edges of the item, where the pixel blurring is affected by + the pixels outside the source edges. + + If the property is set to \c true, the pixels outside the source are + interpreted as being transparent, which is similar to OpenGL clamp-to-border + extension. The blur is expanded slightly outside the effect item area. + + If the property is set to \c false, the pixels outside the source are + interpreted as containing the same color as the pixels at the edge of + the item, which is similar to OpenGL clamp-to-edge behavior. The blur + does not expand outside the effect item area. + + \section1 Summary of 2D Effects + + The following table summarizes the available effects and contains links to + the documentation of the inherited QML type. + + \note The effects are available when running with OpenGL. + + \table + \header + \li Icon + \li Qt Quick Studio Effect + \li Description + \row + \li \inlineimage icons/blend-mode-16px.png + \li \l [QML] {Blend} + \li Merges two source components by using a blend mode. + + The default \uicontrol Mode is \c subtract, where the pixel value + from the component specified in the \uicontrol {Foreground source} + field, which is going to be blended over the source component, + is subtracted from the source and written over it. + + For a list of possible \uicontrol Mode values and examples of their + use, see \l{Blend::mode}{Blend.mode}. + \row + \li \inlineimage icons/brightness-contrast-16px.png + \li \l {BrightnessContrast}{Brightness Contrast} + \li Adjusts \uicontrol Brightness and \uicontrol Contrast. + \row + \li \inlineimage icons/colourize-16px.png + \li \l {ColorOverlay}{Color Overlay} + \li Alters the colors of the source component by applying an + \uicontrol {Overlay Color}. You can use the color picker + to \l{Picking Colors}{select the color}. + \row + \li \inlineimage icons/colourize-16px.png + \li \l Colorize + \li Sets the color in the HSL color space by specifying \uicontrol Hue, + \uicontrol Lightness, and \uicontrol Saturation values. + \row + \li \inlineimage icons/desaturation-16px.png + \li \l {Desaturate}{Desaturation} + \li Reduces the saturation of the colors by the value set in the + \uicontrol Desaturation field. The value ranges from \c 0.0 + (no change) to \c 1.0 (desaturated). Desaturated pixel values are + calculated as averages of the original RGB component values + of the source item. + \row + \li \inlineimage icons/directional-blur-16px.png + \li \l {DirectionalBlur}{Directional Blur} + \li Applies a blur effect to the specified direction. The value of the + \uicontrol Angle field, defines the direction of the blur. This + effect makes the source item appear to be moving in the direction of + the blur. Blur is applied to both sides of each pixel, and therefore + setting the direction to \c 0 and \c 180 provides the same result. + + The value of the \uicontrol Length field specifies the perceived + amount of movement for each pixel. The movement is divided evenly + to both sides of each pixel. + + The quality of the blur depends on the value of the + \uicontrol Samples field. If the \uicontrol Length value is large, + more samples are needed to preserve high visual quality. + \row + \li \inlineimage icons/displace-16px.png + \li \l Displace + \li Moves the pixels of the source item according to the displacement + map specified in the \uicontrol {Displacement source} field. + + The value of the \uicontrol Displacement field specifies the + scale for the displacement. The larger the scale, the larger the + displacement of the pixels. The value set to \c 0.0 causes no + displacement. The value of \c -1.0 sets the inverted maximum shift + according to the displacement source value, while \c 1.0 sets the + maximum shift. + \row + \li \inlineimage icons/drop-shadow-16px.png + \li \l {DropShadow}{Drop Shadow} + \li Generates a soft shadow behind the source component using a + gaussian blur. This effect blurs the alpha channel of the input and + colorizes the result, which it then places behind the source object + to create a soft shadow. You can set the shadow's color in the + \uicontrol {Drop Shadow Color} field and change its location in the + \uicontrol {Horizontal offset} and \uicontrol {Vertical offset} + fields. + + The value of the \uicontrol Radius field specifies the softness of + the shadow. A larger radius causes the edges of the shadow to appear + more blurry. The ideal blur is achieved by setting the value of the + \uicontrol Samples field to twice as large as the highest required + radius value plus one (\c {samples = 1 + radius * 2}). + + The soft shadow is created by blurring the image live using a + gaussian blur, which is a costly operation. Fullscreen gaussian + blur with even a moderate number of samples will only run at 60 + FPS on high-end graphics hardware. + \row + \li \inlineimage icons/fast-blur-16px.png + \li \l {FastBlur}{Fast Blur} + \li Applies a fast blur effect to one or more source components. + \uicontrol {Fast Blur} offers lower blur quality than + \uicontrol {Gaussian Blur}, but it is faster to render. + This effect softens the source content by blurring it with + an algorithm that uses source content downscaling and + bilinear filtering. Use this effect if the source content + is rapidly changing and the highest possible blur quality + is not needed. + + The value of the \uicontrol Radius field specifies the distance of + the neighboring pixels that affect the blurring of an individual + pixel. A larger radius increases the blur effect. The fast blur + algorithm may internally reduce the accuracy of the radius in order + to provide good rendering performance. + \row + \li \inlineimage icons/gamma-adjust-16px.png + \li \l [QML] {GammaAdjust}{Gamma Adjust} + \li Alters the luminance of the source item. This effect is applied + to each pixel according to the curve that is pre-defined as a + power-law expression, where the value of the \uicontrol Gamma + field is used as the reciprocal scaling exponent. + \row + \li \inlineimage icons/gaussian-blur-16px.png + \li \l [QML] {GaussianBlur}{Gaussian Blur} + \li Applies a gaussian blur effect to one or more source components. + The effect softens the image by blurring it with an algorithm that + uses the gaussian function to calculate the effect. The effect + produces higher quality than \uicontrol {Fast Blur}, but is slower + to render. Performing blur live is a costly operation. Fullscreen + gaussian blur with even a moderate number of \uicontrol Samples + will only run at 60 FPS on high-end graphics hardware. + + The value of the \uicontrol Radius field specifies the distance of + the neighboring pixels that affect the blurring of an individual + pixel. The value of the \uicontrol Distance field is a parameter to + the gaussian function that is used when calculating neighboring + pixel weights for the blurring. A larger deviation causes an image + to appear more blurry, but it also reduces the quality of the blur. + A very large deviation value causes the effect to look a bit similar + to what, for exmple, a box blur algorithm produces. A too small + deviation value makes the effect insignificant for the pixels near + the radius. + \row + \li \inlineimage icons/glow-16px.png + \li \l [QML] {Glow} + \li Generates a halo-like glow around the source component. This effect + blurs the alpha channel of the source and colorizes it with + \uicontrol {Glow color}. It then places the alpha channel behind the + source, resulting in a halo or glow around the object. The quality + of the blurred edge can be controlled by using the values of the + \uicontrol Samples and \uicontrol Radius and the strength of the + glow can be changed using the value of the \uicontrol Spread field. + \row + \li \inlineimage icons/hue-saturation-16px.png + \li \l {HueSaturation}{Hue Saturation} + \li Alters the source component colors in the HSL color space. + This effect is similar to the \uicontrol Colorize effect, but + the \uicontrol Hue and \uicontrol Saturation values are handled + differently. This effect always shifts these values, as well as + the \uicontrol Lightness value from the original, instead of + setting them. + \row + \li \inlineimage icons/inner-shadow-16px.png + \li \l {InnerShadow}{Inner Shadow} + \li Generates a colorized and blurred shadow inside the source using + the color that you specify in the \uicontrol {Inner Shadow Color} + field. + + The quality of the shadow can be controlled by the values of the + \uicontrol Samples and \uicontrol Radius fields. Ideally, the + sample value should be twice as large as the highest required + radius value. For example, if the radius is animated between + \c 0.0 and \c 4.0, samples should be set to \c 8. + + The value of the \uicontrol Spread field specifies how large a part + of the shadow color is strengthened near the source edges. + The effect produces a high quality shadow image, and therefore the + rendering speed of the shadow might not be the highest possible. + The rendering speed is reduced especially if the shadow edges are + heavily softened. For use cases that require faster rendering speed + at the cost of high visual quality, select the \uicontrol Fast + check box. + \row + \li \inlineimage icons/levels-16px.png + \li \l {LevelAdjust}{Level Adjust} + \li Adjusts color levels in the RGBA color space. This effect adjusts + the source item colors separately for each color channel. Source + item contrast can be adjusted and color balance altered. + + The value of the \uicontrol Gamma field specifies the change factor + for how the value of each pixel color channel is altered according + to the equation. Setting the gamma values under + \c QtVector3d(1.0, 1.0, 1.0) makes the image darker, whereas the + values above \c QtVector3d(1.0, 1.0, 1.0) lighten it. The value + ranges from \c QtVector3d(0.0, 0.0, 0.0) (darkest) to \c inf + (lightest). + + You can specify the maximum and minimum input and output levels for + each color channel. \uicontrol {Maximum input} sets the white-point, + which means that all pixels with a higher value are rendered as + white (per color channel). Decreasing this value lightens the light + areas. To darken the light areas and to increase the contrast, + decrease the value of the \uicontrol {Maximum output} field. + + The value of the \uicontrol {Minimum input} field sets the minimum + input level for each color channel. It sets the black-point, which + means that all pixels with a lower value are rendered as black + (per color channel). Increasing this value darkens the dark areas. + To lighten the dark areas and to reduce the contrast, increase the + value of the \uicontrol {Minimum output} field. + \row + \li \inlineimage icons/mask-blur-16px.png + \li \l {MaskedBlur}{Masked Blur} + \li Softens the image by blurring it. The intensity of the blur can be + controlled for each pixel by specifying a \uicontrol {Mask source}, + so that some parts of the source are blurred more than others. + + The value of the \uicontrol Radius field specifies the distance of + the neighboring pixels that affect the blurring of an individual + pixel. + + The value of the \uicontrol Samples field specifies, how many + samples are taken per pixel when blur calculation is done. Larger + samples produce better quality, but are slower to render. + \row + \li \inlineimage icons/opacity-mask-16px.png + \li \l {OpacityMask}{Opacity Mask} + \li Masks the source component with another component specified in the + \uicontrol {Mask source} field. The mask item gets rendered into an + intermediate pixel buffer and the alpha values from the result are + used to determine the visibility of the source item's pixels in the + display. + + Select the \uicontrol Invert check box to specify that the + resulting opacity is the source alpha multiplied with the + inverse of the mask alpha: \c {As * (1 - Am)}. When this property + is \c false, the resulting opacity is the source alpha multiplied + with the mask alpha: \c {As * Am}. + \row + \li \inlineimage icons/radial-blur-16px.png + \li \l {RadialBlur}{Radial Blur} + \li Applies a directional blur effect in a circular direction around the + component's center point. This effect makes the source item appear + to be rotating into the direction of the blur. Other available + motionblur effects are \uicontrol {Zoom Blur} and + \uicontrol {Directional Blur}. + + The value of the \uicontrol Angle field specifies both the direction + of the blur and the level of blurring. The larger the angle, the + more blurred the result. The quality of the blur depends on the + value or the \uicontrol Samples field. If the angle is large, more + samples are needed to preserve high visual quality. + \row + \li \inlineimage icons/recursive-blur-16px.png + \li \l {RecursiveBlur}{Recursive Blur} + \li Blurs repeatedly, providing a strong blur effect. This effect + softens the image by blurring it with an algorithm that uses a + recursive feedback loop to blur the source as many times as + set in the \uicontrol Loops field. + + The value of the \uicontrol Radius field specifies the distance of + the neighboring pixels that affect the blurring of an individual + pixel. + + The effect may produce more blurred results than + \uicontrol {Fast Blur} or \uicontrol {Gaussian Blur}, + but the result is produced asynchronously and takes more time. + \row + \li \inlineimage icons/threshold-16px.png + \li \l {ThresholdMask}{Threshold Mask} + \li Masks the source item with another item specified by + \uicontrol {Mask source}. The value of the \uicontrol Spread + field determines the smoothness of the mask edges near the + \uicontrol Threshold alpha value. Setting spread to \c 0.0 uses + the mask with the specified threshold. Setting higher spread values + softens the transition from the transparent mask pixels towards + opaque mask pixels by adding interpolated values between them. + \row + \li \inlineimage icons/zoom-blur-16px.png + \li \l {ZoomBlur}{Zoom Blur} + \li Applies a directional blur effect towards source component's + center point. This effect makes the source item appear to be + moving towards the center point in Z-direction or the camera + appear to be zooming rapidly. + + The value of the \uicontrol Length field specifies the maximum + perceived amount of movement for each pixel. The amount is smaller + near the center specified by the \uicontrol {Horizontal offset} and + \uicontrol {Vertical offset} fields and reaches the specified value + at the edges. + + The quality of the blur depends on the value of the + \uicontrol Samples field. If the length value is large, + more samples are needed to preserve high visual quality. + + Other available motion blur effects are + \uicontrol {Directional Blur} and \uicontrol {Radial Blur}. + \endtable +*/ diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/qtquickdesigner-components.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/qtquickdesigner-components.qdoc index da170cef0cf..8d1b90f7268 100644 --- a/doc/qtdesignstudio/src/qtquickdesigner-components/qtquickdesigner-components.qdoc +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/qtquickdesigner-components.qdoc @@ -31,7 +31,8 @@ The Qt Quick Studio Components module provides sets of components and effects enhanced for creating animated UIs. The components inherit \l {Qt Quick Shapes QML Types}. The effects inherit the types in the - \l {Qt Graphical Effects} module. + \l {Qt Graphical Effects} module. For more information about the effects, + see \l{2D Effects}. \section1 Using Studio Components @@ -46,6 +47,4 @@ \annotatedlist qtquickstudio-components - \include qtdesignstudio-visual-effects.qdocinc qml visual effects - */