LinearGradient.qml 10 KB

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