LinearGradient.qml 8.6 KB

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