ConicalGradient.qml 8.0 KB

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