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 ConicalGradient 45 \inqmlmodule QtGraphicalEffects 46 \since QtGraphicalEffects 1.0 47 \inherits QtQuick2::Item 48 \ingroup qtgraphicaleffects-gradient 49 \brief Draws a conical gradient. 50 51 A gradient is defined by two or more colors, which are blended seamlessly. 52 The colors start from the specified angle and end at 360 degrees larger 53 angle value. 54 55 \table 56 \header 57 \li Effect applied 58 \row 59 \li \image ConicalGradient.png 60 \endtable 61 62 \note This effect is available when running with OpenGL. 63 64 \section1 Example 65 66 The following example shows how to apply the effect. 67 \snippet ConicalGradient-example.qml example 68 69*/ 70Item { 71 id: rootItem 72 73 /*! 74 This property allows the effect output pixels to be cached in order to 75 improve the rendering performance. 76 77 Every time the source or effect properties are changed, the pixels in 78 the cache must be updated. Memory consumption is increased, because an 79 extra buffer of memory is required for storing the effect output. 80 81 It is recommended to disable the cache when the source or the effect 82 properties are animated. 83 84 By default, the property is set to \c false. 85 86 */ 87 property bool cached: false 88 89 /*! 90 This property defines the starting angle where the color at the gradient 91 position of 0.0 is rendered. Colors at larger position values are 92 rendered into larger angle values and blended seamlessly. Angle values 93 increase clockwise. 94 95 \table 96 \header 97 \li Output examples with different angle values 98 \li 99 \li 100 \row 101 \li \image ConicalGradient_angle1.png 102 \li \image ConicalGradient_angle2.png 103 \li \image ConicalGradient_angle3.png 104 \row 105 \li \b { angle: 0 } 106 \li \b { angle: 45 } 107 \li \b { angle: 185 } 108 \row 109 \li \l horizontalOffset: 0 110 \li \l horizontalOffset: 0 111 \li \l horizontalOffset: 0 112 \row 113 \li \l verticalOffset: 0 114 \li \l verticalOffset: 0 115 \li \l verticalOffset: 0 116 \endtable 117 118 */ 119 property real angle: 0.0 120 121 /*! 122 \qmlproperty real QtGraphicalEffects::ConicalGradient::horizontalOffset 123 \qmlproperty real QtGraphicalEffects::ConicalGradient::verticalOffset 124 125 The horizontalOffset and verticalOffset properties define the offset in 126 pixels for the center point of the gradient compared to the item center. 127 128 The value ranges from -inf to inf. By default, the properties are set to \c 129 0. 130 131 \table 132 \header 133 \li Output examples with different horizontalOffset values 134 \li 135 \li 136 \row 137 \li \image ConicalGradient_horizontalOffset1.png 138 \li \image ConicalGradient_horizontalOffset2.png 139 \li \image ConicalGradient_horizontalOffset3.png 140 \row 141 \li \b { horizontalOffset: -50 } 142 \li \b { horizontalOffset: 0 } 143 \li \b { horizontalOffset: 50 } 144 \row 145 \li \l angle: 0 146 \li \l angle: 0 147 \li \l angle: 0 148 \row 149 \li \l verticalOffset: 0 150 \li \l verticalOffset: 0 151 \li \l verticalOffset: 0 152 \endtable 153 */ 154 property real horizontalOffset: 0.0 155 property real verticalOffset: 0.0 156 157 /*! 158 This property defines the item that is going to be filled with gradient. 159 Source item gets rendered into an intermediate pixel buffer and the 160 alpha values from the result are used to determine the gradient's pixels 161 visibility in the display. The default value for source is undefined and 162 in that case whole effect area is filled with gradient. 163 164 \table 165 \header 166 \li Output examples with different source values 167 \li 168 \row 169 \li \image ConicalGradient_maskSource1.png 170 \li \image ConicalGradient_maskSource2.png 171 \row 172 \li \b { source: undefined } 173 \li \b { source: } 174 \row 175 \li \l angle: 0 176 \li \l angle: 0 177 \row 178 \li \l horizontalOffset: 0 179 \li \l horizontalOffset: 0 180 \row 181 \li \l verticalOffset: 0 182 \li \l verticalOffset: 0 183 \endtable 184 185 186 \note It is not supported to let the effect include itself, for 187 instance by setting source to the effect's parent. 188 */ 189 property variant source 190 191/*! 192 A gradient is defined by two or more colors, which are blended seamlessly. 193 The colors are specified as a set of GradientStop child items, each of which 194 defines a position on the gradient (from 0.0 to 1.0), and a color. 195 The position of each GradientStop is defined by the position property. 196 The color is defined by the color property. 197 198 \table 199 \header 200 \li Output examples with different gradient values 201 \li 202 \li 203 \row 204 \li \image ConicalGradient_gradient1.png 205 \li \image ConicalGradient_gradient2.png 206 \li \image ConicalGradient_gradient3.png 207 \row 208 \li \b {gradient:} \code 209Gradient { 210 GradientStop { 211 position: 0.000 212 color: Qt.rgba(1, 0, 0, 1) 213 } 214 GradientStop { 215 position: 0.167 216 color: Qt.rgba(1, 1, 0, 1) 217 } 218 GradientStop { 219 position: 0.333 220 color: Qt.rgba(0, 1, 0, 1) 221 } 222 GradientStop { 223 position: 0.500 224 color: Qt.rgba(0, 1, 1, 1) 225 } 226 GradientStop { 227 position: 0.667 228 color: Qt.rgba(0, 0, 1, 1) 229 } 230 GradientStop { 231 position: 0.833 232 color: Qt.rgba(1, 0, 1, 1) 233 } 234 GradientStop { 235 position: 1.000 236 color: Qt.rgba(1, 0, 0, 1) 237 } 238} 239 \endcode 240 \li \b {gradient:} \code 241Gradient { 242 GradientStop { 243 position: 0.0 244 color: "#F0F0F0" 245 } 246 GradientStop { 247 position: 0.5 248 color: "#000000" 249 } 250 GradientStop { 251 position: 1.0 252 color: "#F0F0F0" 253 } 254} 255 \endcode 256 \li \b {gradient:} \code 257Gradient { 258 GradientStop { 259 position: 0.0 260 color: "#00000000" 261 } 262 GradientStop { 263 position: 1.0 264 color: "#FF000000" 265 } 266} 267 \endcode 268 \row 269 \li \l angle: 0 270 \li \l angle: 0 271 \li \l angle: 0 272 \row 273 \li \l horizontalOffset: 0 274 \li \l horizontalOffset: 0 275 \li \l horizontalOffset: 0 276 \row 277 \li \l verticalOffset: 0 278 \li \l verticalOffset: 0 279 \li \l verticalOffset: 0 280 \endtable 281 282*/ 283 property Gradient gradient: Gradient { 284 GradientStop { position: 0.0; color: "white" } 285 GradientStop { position: 1.0; color: "black" } 286 } 287 288 SourceProxy { 289 id: maskSourceProxy 290 input: rootItem.source 291 } 292 293 Rectangle { 294 id: gradientRect 295 width: 16 296 height: 256 297 gradient: rootItem.gradient 298 smooth: true 299 } 300 301 ShaderEffectSource { 302 id: cacheItem 303 anchors.fill: parent 304 visible: rootItem.cached 305 smooth: true 306 rotation: shaderItem.rotation 307 sourceItem: shaderItem 308 live: true 309 hideSource: visible 310 } 311 312 ShaderEffect { 313 id: shaderItem 314 property variant gradientSource: ShaderEffectSource { 315 sourceItem: gradientRect 316 smooth: true 317 hideSource: true 318 visible: false 319 } 320 property variant maskSource: maskSourceProxy.output 321 property real startAngle: (rootItem.angle - 90) * Math.PI/180 322 property variant center: Qt.point(0.5 + horizontalOffset / width, 0.5 + verticalOffset / height) 323 324 anchors.fill: parent 325 326 fragmentShader: maskSource == undefined ? noMaskShader : maskShader 327 328 onFragmentShaderChanged: startAngleChanged() 329 330 property string noMaskShader: "qrc:/qt-project.org/imports/QtGraphicalEffects/shaders/conicalgradient_nomask.frag" 331 property string maskShader: "qrc:/qt-project.org/imports/QtGraphicalEffects/shaders/conicalgradient_mask.frag" 332 } 333} 334