Colorize.qml 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  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 Colorize
  43. \inqmlmodule QtGraphicalEffects
  44. \since QtGraphicalEffects 1.0
  45. \inherits QtQuick2::Item
  46. \ingroup qtgraphicaleffects-color
  47. \brief Sets the color in the HSL color space.
  48. The effect is similar to what happens when a colorized glass is put on top
  49. of a grayscale image. Colorize uses the hue, saturation, and lightness (HSL)
  50. color space. You can specify a desired value for each property. You can
  51. shift all HSL values with the
  52. \l{QtGraphicalEffects::HueSaturation}{HueSaturation} effect.
  53. Alternatively, you can use the
  54. \l{QtGraphicalEffects::ColorOverlay}{ColorOverlay} effect to colorize the
  55. source item in the RGBA color space.
  56. \table
  57. \header
  58. \li Source
  59. \li Effect applied
  60. \row
  61. \li \image Original_bug.png
  62. \li \image Colorize_bug.png
  63. \endtable
  64. \note This effect is available when running with OpenGL.
  65. \section1 Example
  66. The following example shows how to apply the effect.
  67. \snippet Colorize-example.qml example
  68. */
  69. Item {
  70. id: rootItem
  71. /*!
  72. This property defines the source item that provides the source pixels
  73. for the effect.
  74. \note It is not supported to let the effect include itself, for
  75. instance by setting source to the effect's parent.
  76. */
  77. property variant source
  78. /*!
  79. This property defines the hue value which is used to colorize the
  80. source.
  81. The value ranges from 0.0 to 1.0. By default, the property is set to \c
  82. 0.0, which produces a slightly red color.
  83. \table
  84. \header
  85. \li Allowed hue values
  86. \row
  87. \li \image Colorize_hue_scale.png
  88. \endtable
  89. \table
  90. \header
  91. \li Output examples with different hue values
  92. \li
  93. \li
  94. \row
  95. \li \image Colorize_hue1.png
  96. \li \image Colorize_hue2.png
  97. \li \image Colorize_hue3.png
  98. \row
  99. \li \b { hue: 0.2 }
  100. \li \b { hue: 0.5 }
  101. \li \b { hue: 0.8 }
  102. \row
  103. \li \l saturation: 1
  104. \li \l saturation: 1
  105. \li \l saturation: 1
  106. \row
  107. \li \l lightness: 0
  108. \li \l lightness: 0
  109. \li \l lightness: 0
  110. \endtable
  111. */
  112. property real hue: 0.0
  113. /*!
  114. This property defines the saturation value which is used to colorize the
  115. source.
  116. The value ranges from 0.0 (desaturated) to 1.0 (saturated). By default,
  117. the property is set to \c 1.0 (saturated).
  118. \table
  119. \header
  120. \li Output examples with different saturation values
  121. \li
  122. \li
  123. \row
  124. \li \image Colorize_saturation1.png
  125. \li \image Colorize_saturation2.png
  126. \li \image Colorize_saturation3.png
  127. \row
  128. \li \b { saturation: 0 }
  129. \li \b { saturation: 0.5 }
  130. \li \b { saturation: 1 }
  131. \row
  132. \li \l hue: 0
  133. \li \l hue: 0
  134. \li \l hue: 0
  135. \row
  136. \li \l lightness: 0
  137. \li \l lightness: 0
  138. \li \l lightness: 0
  139. \endtable
  140. */
  141. property real saturation: 1.0
  142. /*!
  143. This property defines how much the source lightness value is increased
  144. or decreased.
  145. Unlike hue and saturation properties, lightness does not set the used
  146. value, but it shifts the existing source pixel lightness value.
  147. The value ranges from -1.0 (decreased) to 1.0 (increased). By default,
  148. the property is set to \c 0.0 (no change).
  149. \table
  150. \header
  151. \li Output examples with different lightness values
  152. \li
  153. \li
  154. \row
  155. \li \image Colorize_lightness1.png
  156. \li \image Colorize_lightness2.png
  157. \li \image Colorize_lightness3.png
  158. \row
  159. \li \b { lightness: -0.75 }
  160. \li \b { lightness: 0 }
  161. \li \b { lightness: 0.75 }
  162. \row
  163. \li \l hue: 0
  164. \li \l hue: 0
  165. \li \l hue: 0
  166. \row
  167. \li \l saturation: 1
  168. \li \l saturation: 1
  169. \li \l saturation: 1
  170. \endtable
  171. */
  172. property real lightness: 0.0
  173. /*!
  174. This property allows the effect output pixels to be cached in order to
  175. improve the rendering performance.
  176. Every time the source or effect properties are changed, the pixels in
  177. the cache must be updated. Memory consumption is increased, because an
  178. extra buffer of memory is required for storing the effect output.
  179. It is recommended to disable the cache when the source or the effect
  180. properties are animated.
  181. By default, the property is set to \c false.
  182. */
  183. property bool cached: false
  184. SourceProxy {
  185. id: sourceProxy
  186. input: rootItem.source
  187. interpolation: input && input.smooth ? SourceProxy.LinearInterpolation : SourceProxy.NearestInterpolation
  188. }
  189. ShaderEffectSource {
  190. id: cacheItem
  191. anchors.fill: parent
  192. visible: rootItem.cached
  193. smooth: true
  194. sourceItem: shaderItem
  195. live: true
  196. hideSource: visible
  197. }
  198. ShaderEffect {
  199. id: shaderItem
  200. property variant source: sourceProxy.output
  201. property real hue: rootItem.hue
  202. property real saturation: rootItem.saturation
  203. property real lightness: rootItem.lightness
  204. anchors.fill: parent
  205. fragmentShader: "qrc:/qt-project.org/imports/QtGraphicalEffects/shaders/colorize.frag"
  206. }
  207. }