RadialGradient.qml 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373
  1. // Copyright (C) 2020 The Qt Company Ltd.
  2. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
  3. // Qt-Security score:significant reason:default
  4. import QtQuick
  5. import Qt5Compat.GraphicalEffects.private
  6. /*!
  7. \qmltype RadialGradient
  8. \inqmlmodule Qt5Compat.GraphicalEffects
  9. \since QtGraphicalEffects 1.0
  10. \inherits QtQuick2::Item
  11. \ingroup qtgraphicaleffects-gradient
  12. \brief Draws a radial gradient.
  13. A gradient is defined by two or more colors, which are blended seamlessly.
  14. The colors start from the middle of the item and end at the borders.
  15. \table
  16. \header
  17. \li Effect applied
  18. \row
  19. \li \image RadialGradient.png
  20. \endtable
  21. \section1 Example
  22. The following example shows how to apply the effect.
  23. \snippet RadialGradient-example.qml example
  24. */
  25. Item {
  26. id: rootItem
  27. /*!
  28. This property allows the effect output pixels to be cached in order to
  29. improve the rendering performance.
  30. Every time the source or effect properties are changed, the pixels in
  31. the cache must be updated. Memory consumption is increased, because an
  32. extra buffer of memory is required for storing the effect output.
  33. It is recommended to disable the cache when the source or the effect
  34. properties are animated.
  35. By default, the property is set to \c false.
  36. */
  37. property bool cached: false
  38. /*!
  39. \qmlproperty real RadialGradient::horizontalOffset
  40. \qmlproperty real RadialGradient::verticalOffset
  41. The horizontalOffset and verticalOffset properties define the offset in
  42. pixels for the center point of the gradient compared to the item center.
  43. The values range from -inf to inf. By default, these properties are set
  44. to \c 0.
  45. \table
  46. \header
  47. \li Output examples with different horizontalOffset values
  48. \li
  49. \li
  50. \row
  51. \li \image RadialGradient_horizontalOffset1.png
  52. \li \image RadialGradient_horizontalOffset2.png
  53. \li \image RadialGradient_horizontalOffset3.png
  54. \row
  55. \li \b { horizontalOffset: -150 }
  56. \li \b { horizontalOffset: 0 }
  57. \li \b { horizontalOffset: 150 }
  58. \row
  59. \li \l verticalOffset: 0
  60. \li \l verticalOffset: 0
  61. \li \l verticalOffset: 0
  62. \row
  63. \li \l horizontalRadius: 300
  64. \li \l horizontalRadius: 300
  65. \li \l horizontalRadius: 300
  66. \row
  67. \li \l verticalRadius: 300
  68. \li \l verticalRadius: 300
  69. \li \l verticalRadius: 300
  70. \row
  71. \li \l angle: 0
  72. \li \l angle: 0
  73. \li \l angle: 0
  74. \endtable
  75. */
  76. property real horizontalOffset: 0.0
  77. property real verticalOffset: 0.0
  78. /*!
  79. \qmlproperty real RadialGradient::horizontalRadius
  80. \qmlproperty real RadialGradient::verticalRadius
  81. The horizontalRadius and verticalRadius properties define the shape and
  82. size of the radial gradient. If the radiuses are equal, the shape of the
  83. gradient is a circle. If the horizontal and vertical radiuses differ,
  84. the shape is elliptical. The radiuses are given in pixels.
  85. The value ranges from -inf to inf. By default, horizontalRadius is bound
  86. to width and verticalRadius is bound to height.
  87. \table
  88. \header
  89. \li Output examples with different horizontalRadius values
  90. \li
  91. \li
  92. \row
  93. \li \image RadialGradient_horizontalRadius1.png
  94. \li \image RadialGradient_horizontalRadius2.png
  95. \row
  96. \li \b { horizontalRadius: 300 }
  97. \li \b { horizontalRadius: 100 }
  98. \row
  99. \li \l horizontalOffset: 0
  100. \li \l horizontalOffset: 0
  101. \row
  102. \li \l verticalOffset: 0
  103. \li \l verticalOffset: 0
  104. \row
  105. \li \l verticalRadius: 300
  106. \li \l verticalRadius: 300
  107. \row
  108. \li \l angle: 0
  109. \li \l angle: 0
  110. \row
  111. \li \l gradient: QQuickGradient(0xa05fb10)
  112. \li \l gradient: QQuickGradient(0xa05fb10)
  113. \endtable
  114. */
  115. property real horizontalRadius: width
  116. property real verticalRadius: height
  117. /*!
  118. This property defines the rotation of the gradient around its center
  119. point. The rotation is only visible when the
  120. \l{RadialGradient::horizontalRadius}{horizontalRadius} and
  121. \l{RadialGradient::verticalRadius}{verticalRadius} properties are not
  122. equal. The angle is given in degrees and the default value is \c 0.
  123. \table
  124. \header
  125. \li Output examples with different angle values
  126. \li
  127. \li
  128. \row
  129. \li \image RadialGradient_angle1.png
  130. \li \image RadialGradient_angle2.png
  131. \li \image RadialGradient_angle3.png
  132. \row
  133. \li \b { angle: 0 }
  134. \li \b { angle: 45 }
  135. \li \b { angle: 90 }
  136. \row
  137. \li \l horizontalOffset: 0
  138. \li \l horizontalOffset: 0
  139. \li \l horizontalOffset: 0
  140. \row
  141. \li \l verticalOffset: 0
  142. \li \l verticalOffset: 0
  143. \li \l verticalOffset: 0
  144. \row
  145. \li \l horizontalRadius: 100
  146. \li \l horizontalRadius: 100
  147. \li \l horizontalRadius: 100
  148. \row
  149. \li \l verticalRadius: 300
  150. \li \l verticalRadius: 300
  151. \li \l verticalRadius: 300
  152. \endtable
  153. */
  154. property real angle: 0.0
  155. /*!
  156. This property defines the item that is going to be filled with gradient.
  157. Source item gets rendered into an intermediate pixel buffer and the
  158. alpha values from the result are used to determine the gradient's pixels
  159. visibility in the display. The default value for source is undefined and
  160. in that case whole effect area is filled with gradient.
  161. \table
  162. \header
  163. \li Output examples with different source values
  164. \li
  165. \li
  166. \row
  167. \li \image RadialGradient_maskSource1.png
  168. \li \image RadialGradient_maskSource2.png
  169. \row
  170. \li \b { source: undefined }
  171. \li \b { source: Image { source: images/butterfly.png } }
  172. \row
  173. \li \l horizontalOffset: 0
  174. \li \l horizontalOffset: 0
  175. \row
  176. \li \l verticalOffset: 0
  177. \li \l verticalOffset: 0
  178. \row
  179. \li \l horizontalRadius: 300
  180. \li \l horizontalRadius: 300
  181. \row
  182. \li \l verticalRadius: 300
  183. \li \l verticalRadius: 300
  184. \row
  185. \li \l angle: 0
  186. \li \l angle: 0
  187. \endtable
  188. \note It is not supported to let the effect include itself, for
  189. instance by setting source to the effect's parent.
  190. */
  191. property variant source
  192. /*!
  193. A gradient is defined by two or more colors, which are blended
  194. seamlessly. The colors are specified as a set of GradientStop child
  195. items, each of which defines a position on the gradient from 0.0 to 1.0
  196. and a color. The position of each GradientStop is defined by setting the
  197. position property. The color is defined by setting the color property.
  198. \table
  199. \header
  200. \li Output examples with different gradient values
  201. \li
  202. \li
  203. \row
  204. \li \image RadialGradient_gradient1.png
  205. \li \image RadialGradient_gradient2.png
  206. \li \image RadialGradient_gradient3.png
  207. \row
  208. \li \b {gradient:} \code
  209. Gradient {
  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
  241. Gradient {
  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:}
  257. \code
  258. Gradient {
  259. GradientStop {
  260. position: 0.0
  261. color: "#00000000"
  262. }
  263. GradientStop {
  264. position: 1.0
  265. color: "#FF000000"
  266. }
  267. }
  268. \endcode
  269. \row
  270. \li \l horizontalOffset: 0
  271. \li \l horizontalOffset: 0
  272. \li \l horizontalOffset: 0
  273. \row
  274. \li \l verticalOffset: 0
  275. \li \l verticalOffset: 0
  276. \li \l verticalOffset: 0
  277. \row
  278. \li \l horizontalRadius: 300
  279. \li \l horizontalRadius: 300
  280. \li \l horizontalRadius: 300
  281. \row
  282. \li \l verticalRadius: 300
  283. \li \l verticalRadius: 300
  284. \li \l verticalRadius: 300
  285. \row
  286. \li \l angle: 0
  287. \li \l angle: 0
  288. \li \l angle: 0
  289. \endtable
  290. */
  291. property Gradient gradient: Gradient {
  292. GradientStop { position: 0.0; color: "white" }
  293. GradientStop { position: 1.0; color: "black" }
  294. }
  295. SourceProxy {
  296. id: maskSourceProxy
  297. input: rootItem.source
  298. }
  299. ShaderEffectSource {
  300. id: gradientSource
  301. sourceItem: Rectangle {
  302. width: 16
  303. height: 256
  304. gradient: rootItem.gradient
  305. smooth: true
  306. }
  307. smooth: true
  308. hideSource: true
  309. visible: false
  310. }
  311. ShaderEffectSource {
  312. id: cacheItem
  313. anchors.fill: parent
  314. visible: rootItem.cached
  315. smooth: true
  316. sourceItem: shaderItem
  317. live: true
  318. hideSource: visible
  319. }
  320. ShaderEffect {
  321. id: shaderItem
  322. property variant gradientImage: gradientSource
  323. property variant maskSource: maskSourceProxy.output
  324. property variant center: Qt.point(0.5 + rootItem.horizontalOffset / width, 0.5 + rootItem.verticalOffset / height)
  325. property real horizontalRatio: rootItem.horizontalRadius > 0 ? width / (2 * rootItem.horizontalRadius) : width * 16384
  326. property real verticalRatio: rootItem.verticalRadius > 0 ? height / (2 * rootItem.verticalRadius) : height * 16384
  327. property real angle: -rootItem.angle / 360 * 2 * Math.PI
  328. property variant matrixData: Qt.point(Math.sin(angle), Math.cos(angle))
  329. anchors.fill: parent
  330. vertexShader: "qrc:/qt-project.org/imports/Qt5Compat/GraphicalEffects/shaders_ng/radialgradient.vert.qsb"
  331. fragmentShader: maskSource == undefined ? noMaskShader : maskShader
  332. onFragmentShaderChanged: horizontalRatioChanged()
  333. property string maskShader: "qrc:/qt-project.org/imports/Qt5Compat/GraphicalEffects/shaders_ng/radialgradient_mask.frag.qsb"
  334. property string noMaskShader: "qrc:/qt-project.org/imports/Qt5Compat/GraphicalEffects/shaders_ng/radialgradient_nomask.frag.qsb"
  335. }
  336. }