1/**************************************************************************** 2** 3** Copyright (C) 2017 The Qt Company Ltd. 4** Contact: https://www.qt.io/licensing/ 5** 6** This file is part of the Qt Graphical Effects module. 7** 8** $QT_BEGIN_LICENSE:LGPL$ 9** Commercial License Usage 10** Licensees holding valid commercial Qt licenses may use this file in 11** accordance with the commercial license agreement provided with the 12** Software or, alternatively, in accordance with the terms contained in 13** a written agreement between you and The Qt Company. For licensing terms 14** and conditions see https://www.qt.io/terms-conditions. For further 15** information use the contact form at https://www.qt.io/contact-us. 16** 17** GNU Lesser General Public License Usage 18** Alternatively, this file may be used under the terms of the GNU Lesser 19** General Public License version 3 as published by the Free Software 20** Foundation and appearing in the file LICENSE.LGPL3 included in the 21** packaging of this file. Please review the following information to 22** ensure the GNU Lesser General Public License version 3 requirements 23** will be met: https://www.gnu.org/licenses/lgpl-3.0.html. 24** 25** GNU General Public License Usage 26** Alternatively, this file may be used under the terms of the GNU 27** General Public License version 2.0 or (at your option) the GNU General 28** Public license version 3 or any later version approved by the KDE Free 29** Qt Foundation. The licenses are as published by the Free Software 30** Foundation and appearing in the file LICENSE.GPL2 and LICENSE.GPL3 31** included in the packaging of this file. Please review the following 32** information to ensure the GNU General Public License requirements will 33** be met: https://www.gnu.org/licenses/gpl-2.0.html and 34** https://www.gnu.org/licenses/gpl-3.0.html. 35** 36** $QT_END_LICENSE$ 37** 38****************************************************************************/ 39 40import QtQuick 2.12 41import QtGraphicalEffects.private 1.12 42 43/*! 44 \qmltype RectangularGlow 45 \inqmlmodule QtGraphicalEffects 46 \since QtGraphicalEffects 1.0 47 \inherits QtQuick2::Item 48 \ingroup qtgraphicaleffects-glow 49 \brief Generates a blurred and colorized rectangle, which gives 50 the impression that the source is glowing. 51 52 This effect is intended to have good performance. The shape of the glow is 53 limited to a rectangle with a custom corner radius. For situations where 54 custom shapes are required, consider \l {QtGraphicalEffects::Glow} {Glow} 55 effect. 56 57 \table 58 \header 59 \li Effect applied 60 \row 61 \li \image RectangularGlow_applied.png 62 \endtable 63 64 \note This effect is available when running with OpenGL. 65 66 \section1 Example 67 68 The following example shows how to apply the effect. 69 \snippet RectangularGlow-example.qml example 70*/ 71Item { 72 id: rootItem 73 74 /*! 75 This property defines how many pixels outside the item area are reached 76 by the glow. 77 78 The value ranges from 0.0 (no glow) to inf (infinite glow). By default, 79 the property is set to \c 0.0. 80 81 \table 82 \header 83 \li Output examples with different glowRadius values 84 \li 85 \li 86 \row 87 \li \image RectangularGlow_glowRadius1.png 88 \li \image RectangularGlow_glowRadius2.png 89 \li \image RectangularGlow_glowRadius3.png 90 \row 91 \li \b { glowRadius: 10 } 92 \li \b { glowRadius: 20 } 93 \li \b { glowRadius: 40 } 94 \row 95 \li \l spread: 0 96 \li \l spread: 0 97 \li \l spread: 0 98 \row 99 \li \l color: #ffffff 100 \li \l color: #ffffff 101 \li \l color: #ffffff 102 \row 103 \li \l cornerRadius: 25 104 \li \l cornerRadius: 25 105 \li \l cornerRadius: 25 106 \endtable 107 108 */ 109 property real glowRadius: 0.0 110 111 /*! 112 This property defines how large part of the glow color is strengthened 113 near the source edges. 114 115 The value ranges from 0.0 (no strength increase) to 1.0 (maximum 116 strength increase). By default, the property is set to \c 0.0. 117 118 \table 119 \header 120 \li Output examples with different spread values 121 \li 122 \li 123 \row 124 \li \image RectangularGlow_spread1.png 125 \li \image RectangularGlow_spread2.png 126 \li \image RectangularGlow_spread3.png 127 \row 128 \li \b { spread: 0.0 } 129 \li \b { spread: 0.5 } 130 \li \b { spread: 1.0 } 131 \row 132 \li \l glowRadius: 20 133 \li \l glowRadius: 20 134 \li \l glowRadius: 20 135 \row 136 \li \l color: #ffffff 137 \li \l color: #ffffff 138 \li \l color: #ffffff 139 \row 140 \li \l cornerRadius: 25 141 \li \l cornerRadius: 25 142 \li \l cornerRadius: 25 143 \endtable 144 */ 145 property real spread: 0.0 146 147 /*! 148 This property defines the RGBA color value which is used for the glow. 149 150 By default, the property is set to \c "white". 151 152 \table 153 \header 154 \li Output examples with different color values 155 \li 156 \li 157 \row 158 \li \image RectangularGlow_color1.png 159 \li \image RectangularGlow_color2.png 160 \li \image RectangularGlow_color3.png 161 \row 162 \li \b { color: #ffffff } 163 \li \b { color: #55ff55 } 164 \li \b { color: #5555ff } 165 \row 166 \li \l glowRadius: 20 167 \li \l glowRadius: 20 168 \li \l glowRadius: 20 169 \row 170 \li \l spread: 0 171 \li \l spread: 0 172 \li \l spread: 0 173 \row 174 \li \l cornerRadius: 25 175 \li \l cornerRadius: 25 176 \li \l cornerRadius: 25 177 \endtable 178 */ 179 property color color: "white" 180 181 /*! 182 This property defines the corner radius that is used to draw a glow with 183 rounded corners. 184 185 The value ranges from 0.0 to half of the effective width or height of 186 the glow, whichever is smaller. This can be calculated with: \c{ 187 min(width, height) / 2.0 + glowRadius} 188 189 By default, the property is bound to glowRadius property. The glow 190 behaves as if the rectangle was blurred when adjusting the glowRadius 191 property. 192 193 \table 194 \header 195 \li Output examples with different cornerRadius values 196 \li 197 \li 198 \row 199 \li \image RectangularGlow_cornerRadius1.png 200 \li \image RectangularGlow_cornerRadius2.png 201 \li \image RectangularGlow_cornerRadius3.png 202 \row 203 \li \b { cornerRadius: 0 } 204 \li \b { cornerRadius: 25 } 205 \li \b { cornerRadius: 50 } 206 \row 207 \li \l glowRadius: 20 208 \li \l glowRadius: 20 209 \li \l glowRadius: 20 210 \row 211 \li \l spread: 0 212 \li \l spread: 0 213 \li \l spread: 0 214 \row 215 \li \l color: #ffffff 216 \li \l color: #ffffff 217 \li \l color: #ffffff 218 \endtable 219 */ 220 property real cornerRadius: glowRadius 221 222 /*! 223 This property allows the effect output pixels to be cached in order to 224 improve the rendering performance. 225 226 Every time the source or effect properties are changed, the pixels in 227 the cache must be updated. Memory consumption is increased, because an 228 extra buffer of memory is required for storing the effect output. 229 230 It is recommended to disable the cache when the source or the effect 231 properties are animated. 232 233 By default, the property is set to \c false. 234 */ 235 property bool cached: false 236 237 ShaderEffectSource { 238 id: cacheItem 239 anchors.fill: shaderItem 240 visible: rootItem.cached 241 smooth: true 242 sourceItem: shaderItem 243 live: true 244 hideSource: visible 245 } 246 247 ShaderEffect { 248 id: shaderItem 249 250 x: (parent.width - width) / 2.0 251 y: (parent.height - height) / 2.0 252 width: parent.width + rootItem.glowRadius * 2 + cornerRadius * 2 253 height: parent.height + rootItem.glowRadius * 2 + cornerRadius * 2 254 255 function clampedCornerRadius() { 256 var maxCornerRadius = Math.min(rootItem.width, rootItem.height) / 2 + glowRadius; 257 return Math.max(0, Math.min(rootItem.cornerRadius, maxCornerRadius)) 258 } 259 260 property color color: rootItem.color 261 property real inverseSpread: 1.0 - rootItem.spread 262 property real relativeSizeX: ((inverseSpread * inverseSpread) * rootItem.glowRadius + cornerRadius * 2.0) / width 263 property real relativeSizeY: relativeSizeX * (width / height) 264 property real spread: rootItem.spread / 2.0 265 property real cornerRadius: clampedCornerRadius() 266 267 fragmentShader: "qrc:/qt-project.org/imports/QtGraphicalEffects/shaders/rectangularglow.frag" 268 } 269} 270