From 7c71f37130fc6025bb0b3b739216a02fc8efa290 Mon Sep 17 00:00:00 2001 From: Leena Miettinen Date: Wed, 25 Aug 2021 18:38:27 +0200 Subject: [PATCH] Doc: Indicate which 2D effects are available in Qt 6 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fix field names that were changed in the Properties view. Task-number: QDS-4561 Change-Id: Ib0190ae50ba127be0667d4a4a649bd5d6cd88882 Reviewed-by: Henning Gründl Reviewed-by: Thomas Hartmann --- .../studio-2d-effects-caching-and-border.png | Bin 0 -> 4016 bytes .../qtdesignstudio-visual-effects.qdoc | 69 +++++++++++++----- 2 files changed, 51 insertions(+), 18 deletions(-) create mode 100644 doc/qtdesignstudio/images/studio-2d-effects-caching-and-border.png diff --git a/doc/qtdesignstudio/images/studio-2d-effects-caching-and-border.png b/doc/qtdesignstudio/images/studio-2d-effects-caching-and-border.png new file mode 100644 index 0000000000000000000000000000000000000000..d0753da996cef1e5e68dbc71a2d24c101e5b232b GIT binary patch literal 4016 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 Z(BPf(x3z3L85kHCJYD@<);T3K0RV=M>~#PD literal 0 HcmV?d00001 diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/qtdesignstudio-visual-effects.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/qtdesignstudio-visual-effects.qdoc index bbd1eb61ac7..b91e8004bcc 100644 --- a/doc/qtdesignstudio/src/qtquickdesigner-components/qtdesignstudio-visual-effects.qdoc +++ b/doc/qtdesignstudio/src/qtquickdesigner-components/qtdesignstudio-visual-effects.qdoc @@ -36,6 +36,10 @@ \image studio-2d-effects.png "Effects tab in Library" + \note The availability of effects depends on whether you selected + \uicontrol {Qt 5} or \uicontrol {Qt 6} when \l{Creating Projects} + {creating your project}. + Effects have one or more source properties for specifying the visual input for which the effect is applied to a component. The altered visual output is then presented in the effect component itself. The source can be another, @@ -55,6 +59,11 @@ \section1 Caching and Borders + Specify common properties for 2D effects in the \uicontrol Caching or + \uicontrol {Caching and Border} section. + + \image studio-2d-effects-caching-and-border.png "Studio Effects Caching and Border properties" + 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. @@ -78,7 +87,8 @@ \section1 Summary of 2D Effects The following table summarizes the available effects and contains links to - the developer documentation of the inherited component. + the developer documentation of the inherited component. The Qt 6 column + indicates which effects are available for Qt 6 projects. \note The effects are available when running with OpenGL. @@ -86,10 +96,12 @@ \header \li Icon \li Effect + \li Qt 6 \li Description \row \li \inlineimage icons/blend-mode-16px.png \li \l [QML] {Blend} + \li \li Merges two source components by using a blend mode. The default \uicontrol Mode is \c subtract, where the pixel value @@ -102,21 +114,25 @@ \row \li \inlineimage icons/brightness-contrast-16px.png \li \l {BrightnessContrast}{Brightness Contrast} + \li \inlineimage ok.png \li Adjusts \uicontrol Brightness and \uicontrol Contrast. \row \li \inlineimage icons/colourize-16px.png \li \l {ColorOverlay}{Color Overlay} + \li \inlineimage ok.png \li Alters the colors of the source component by applying an - \uicontrol {Overlay Color}. You can use the color picker + \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 \inlineimage ok.png \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 \inlineimage ok.png \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 @@ -125,8 +141,9 @@ \row \li \inlineimage icons/directional-blur-16px.png \li \l {DirectionalBlur}{Directional Blur} + \li \inlineimage ok.png \li Applies a blur effect to the specified direction. The value of the - \uicontrol Angle field, defines the direction of the blur. This + \uicontrol Angle field defines the direction of the blur. This effect makes the source component 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. @@ -141,6 +158,7 @@ \row \li \inlineimage icons/displace-16px.png \li \l Displace + \li \inlineimage ok.png \li Moves the pixels of the source component according to the displacement map specified in the \uicontrol {Displacement source} field. @@ -153,13 +171,14 @@ \row \li \inlineimage icons/drop-shadow-16px.png \li \l {DropShadow}{Drop Shadow} + \li \inlineimage ok.png \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 component 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. + \uicontrol {Drop shadow color} field and change its location in the + horizontal (\uicontrol H) and vertical (\uicontrol V) + \uicontrol 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 @@ -174,6 +193,7 @@ \row \li \inlineimage icons/fast-blur-16px.png \li \l {FastBlur}{Fast Blur} + \li \inlineimage ok.png \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. @@ -191,6 +211,7 @@ \row \li \inlineimage icons/gamma-adjust-16px.png \li \l [QML] {GammaAdjust}{Gamma Adjust} + \li \inlineimage ok.png \li Alters the luminance of the source component. 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 @@ -198,6 +219,7 @@ \row \li \inlineimage icons/gaussian-blur-16px.png \li \l [QML] {GaussianBlur}{Gaussian Blur} + \li \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 @@ -219,6 +241,7 @@ \row \li \inlineimage icons/glow-16px.png \li \l [QML] {Glow} + \li \inlineimage ok.png \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 @@ -229,6 +252,7 @@ \row \li \inlineimage icons/hue-saturation-16px.png \li \l {HueSaturation}{Hue Saturation} + \li \inlineimage ok.png \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 @@ -238,8 +262,9 @@ \row \li \inlineimage icons/inner-shadow-16px.png \li \l {InnerShadow}{Inner Shadow} + \li \li Generates a colorized and blurred shadow inside the source using - the color that you specify in the \uicontrol {Inner Shadow Color} + 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 @@ -259,6 +284,7 @@ \row \li \inlineimage icons/levels-16px.png \li \l {LevelAdjust}{Level Adjust} + \li \inlineimage ok.png \li Adjusts color levels in the RGBA color space. This effect adjusts the source component colors separately for each color channel. Source component contrast can be adjusted and color balance altered. @@ -271,22 +297,24 @@ 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. + You can specify the maximum and minimum \uicontrol Input and + \uicontrol 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 + 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. + value of the \uicontrol Minimum output field. \row \li \inlineimage icons/mask-blur-16px.png \li \l {MaskedBlur}{Masked Blur} + \li \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. @@ -301,6 +329,7 @@ \row \li \inlineimage icons/opacity-mask-16px.png \li \l {OpacityMask}{Opacity Mask} + \li \inlineimage ok.png \li Masks the source component with another component specified in the \uicontrol {Mask source} field. The mask component gets rendered into an intermediate pixel buffer and the alpha values from the result are @@ -315,6 +344,7 @@ \row \li \inlineimage icons/radial-blur-16px.png \li \l {RadialBlur}{Radial Blur} + \li \li Applies a directional blur effect in a circular direction around the component's center point. This effect makes the source component appear to be rotating into the direction of the blur. Other available @@ -329,6 +359,7 @@ \row \li \inlineimage icons/recursive-blur-16px.png \li \l {RecursiveBlur}{Recursive Blur} + \li \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 @@ -344,6 +375,7 @@ \row \li \inlineimage icons/threshold-16px.png \li \l {ThresholdMask}{Threshold Mask} + \li \inlineimage ok.png \li Masks the source component with another component specified by \uicontrol {Mask source}. The value of the \uicontrol Spread field determines the smoothness of the mask edges near the @@ -354,6 +386,7 @@ \row \li \inlineimage icons/zoom-blur-16px.png \li \l {ZoomBlur}{Zoom Blur} + \li \li Applies a directional blur effect towards source component's center point. This effect makes the source component appear to be moving towards the center point in Z-direction or the camera @@ -361,9 +394,9 @@ 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. + near the center specified by the horizontal (\uicontrol H) and + vertical (\uicontrol V) \uicontrol 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,