ConicalGradient.qml 9.7 KB

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