Glow.qml 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
  1. /****************************************************************************
  2. **
  3. ** Copyright (C) 2017 The Qt Company Ltd.
  4. ** Copyright (C) 2017 Jolla Ltd, author: <gunnar.sletta@jollamobile.com>
  5. ** Contact: https://www.qt.io/licensing/
  6. **
  7. ** This file is part of the Qt Graphical Effects module.
  8. **
  9. ** $QT_BEGIN_LICENSE:LGPL$
  10. ** Commercial License Usage
  11. ** Licensees holding valid commercial Qt licenses may use this file in
  12. ** accordance with the commercial license agreement provided with the
  13. ** Software or, alternatively, in accordance with the terms contained in
  14. ** a written agreement between you and The Qt Company. For licensing terms
  15. ** and conditions see https://www.qt.io/terms-conditions. For further
  16. ** information use the contact form at https://www.qt.io/contact-us.
  17. **
  18. ** GNU Lesser General Public License Usage
  19. ** Alternatively, this file may be used under the terms of the GNU Lesser
  20. ** General Public License version 3 as published by the Free Software
  21. ** Foundation and appearing in the file LICENSE.LGPL3 included in the
  22. ** packaging of this file. Please review the following information to
  23. ** ensure the GNU Lesser General Public License version 3 requirements
  24. ** will be met: https://www.gnu.org/licenses/lgpl-3.0.html.
  25. **
  26. ** GNU General Public License Usage
  27. ** Alternatively, this file may be used under the terms of the GNU
  28. ** General Public License version 2.0 or (at your option) the GNU General
  29. ** Public license version 3 or any later version approved by the KDE Free
  30. ** Qt Foundation. The licenses are as published by the Free Software
  31. ** Foundation and appearing in the file LICENSE.GPL2 and LICENSE.GPL3
  32. ** included in the packaging of this file. Please review the following
  33. ** information to ensure the GNU General Public License requirements will
  34. ** be met: https://www.gnu.org/licenses/gpl-2.0.html and
  35. ** https://www.gnu.org/licenses/gpl-3.0.html.
  36. **
  37. ** $QT_END_LICENSE$
  38. **
  39. ****************************************************************************/
  40. import QtQuick 2.12
  41. import QtGraphicalEffects.private 1.12
  42. /*!
  43. \qmltype Glow
  44. \inqmlmodule QtGraphicalEffects
  45. \since QtGraphicalEffects 1.0
  46. \inherits QtQuick2::Item
  47. \ingroup qtgraphicaleffects-glow
  48. \brief Generates a halo like glow around the source item.
  49. The Glow effect blurs the alpha channel of the source and colorizes it
  50. with \l {Glow::color}{color} and places it behind the source, resulting in a halo or glow
  51. around the object. The quality of the blurred edge can be controlled using
  52. \l samples and \l radius and the strength of the glow can be changed using
  53. \l spread.
  54. \table
  55. \header
  56. \li Source
  57. \li Effect applied
  58. \row
  59. \li \image Original_butterfly_black.png
  60. \li \image Glow_butterfly.png
  61. \endtable
  62. The glow is created by blurring the image live using a gaussian blur.
  63. Performing blur live is a costly operation. Fullscreen gaussian blur with
  64. even a moderate number of samples will only run at 60 fps on highend
  65. graphics hardware.
  66. \note This effect is available when running with OpenGL.
  67. \section1 Example
  68. The following example shows how to apply the effect.
  69. \snippet Glow-example.qml example
  70. */
  71. Item {
  72. id: root
  73. DropShadowBase {
  74. id: dps
  75. anchors.fill: parent
  76. color: "white"
  77. spread: 0.5
  78. horizontalOffset: 0
  79. verticalOffset: 0
  80. }
  81. /*!
  82. This property defines the source item that is going to be used as source
  83. for the generated glow.
  84. \note It is not supported to let the effect include itself, for
  85. instance by setting source to the effect's parent.
  86. */
  87. property alias source: dps.source
  88. /*!
  89. Radius defines the softness of the glow. A larger radius causes the
  90. edges of the glow to appear more blurry.
  91. Depending on the radius value, value of the \l{Glow::samples}{samples}
  92. should be set to sufficiently large to ensure the visual quality.
  93. The ideal blur is achieved by selecting \c samples and \c radius such
  94. that \c {samples = 1 + radius * 2}, such as:
  95. \table
  96. \header \li Radius \li Samples
  97. \row \li 0 \e{(no blur)} \li 1
  98. \row \li 1 \li 3
  99. \row \li 2 \li 5
  100. \row \li 3 \li 7
  101. \endtable
  102. By default, the property is set to \c {floor(samples/2)}.
  103. \table
  104. \header
  105. \li Output examples with different radius values
  106. \li
  107. \li
  108. \row
  109. \li \image Glow_radius1.png
  110. \li \image Glow_radius2.png
  111. \li \image Glow_radius3.png
  112. \row
  113. \li \b { radius: 0 }
  114. \li \b { radius: 6 }
  115. \li \b { radius: 12 }
  116. \row
  117. \li \l samples: 25
  118. \li \l samples: 25
  119. \li \l samples: 25
  120. \row
  121. \li \l color: #ffffff
  122. \li \l color: #ffffff
  123. \li \l color: #ffffff
  124. \row
  125. \li \l spread: 0
  126. \li \l spread: 0
  127. \li \l spread: 0
  128. \endtable
  129. */
  130. property alias radius: dps.radius
  131. /*!
  132. This property defines how many samples are taken per pixel when edge
  133. softening blur calculation is done. Larger value produces better
  134. quality, but is slower to render.
  135. Ideally, this value should be twice as large as the highest required
  136. radius value plus one, such as:
  137. \table
  138. \header \li Radius \li Samples
  139. \row \li 0 \e{(no blur)} \li 1
  140. \row \li 1 \li 3
  141. \row \li 2 \li 5
  142. \row \li 3 \li 7
  143. \endtable
  144. By default, the property is set to \c 9.
  145. This property is not intended to be animated. Changing this property will
  146. cause the underlying OpenGL shaders to be recompiled.
  147. */
  148. property alias samples: dps.samples
  149. /*!
  150. This property defines how large part of the glow color is strengthened
  151. near the source edges.
  152. The values range from 0.0 to 1.0. By default, the property is set to \c
  153. 0.5.
  154. \note The implementation is optimized for medium and low spread values.
  155. Depending on the source, spread values closer to 1.0 may yield visually
  156. asymmetrical results.
  157. \table
  158. \header
  159. \li Output examples with different spread values
  160. \li
  161. \li
  162. \row
  163. \li \image Glow_spread1.png
  164. \li \image Glow_spread2.png
  165. \li \image Glow_spread3.png
  166. \row
  167. \li \b { spread: 0.0 }
  168. \li \b { spread: 0.5 }
  169. \li \b { spread: 1.0 }
  170. \row
  171. \li \l radius: 8
  172. \li \l radius: 8
  173. \li \l radius: 8
  174. \row
  175. \li \l samples: 17
  176. \li \l samples: 17
  177. \li \l samples: 17
  178. \row
  179. \li \l color: #ffffff
  180. \li \l color: #ffffff
  181. \li \l color: #ffffff
  182. \endtable
  183. */
  184. property alias spread: dps.spread
  185. /*!
  186. This property defines the RGBA color value which is used for the glow.
  187. By default, the property is set to \c "white".
  188. \table
  189. \header
  190. \li Output examples with different color values
  191. \li
  192. \li
  193. \row
  194. \li \image Glow_color1.png
  195. \li \image Glow_color2.png
  196. \li \image Glow_color3.png
  197. \row
  198. \li \b { color: #ffffff }
  199. \li \b { color: #00ff00 }
  200. \li \b { color: #aa00ff00 }
  201. \row
  202. \li \l radius: 8
  203. \li \l radius: 8
  204. \li \l radius: 8
  205. \row
  206. \li \l samples: 17
  207. \li \l samples: 17
  208. \li \l samples: 17
  209. \row
  210. \li \l spread: 0.5
  211. \li \l spread: 0.5
  212. \li \l spread: 0.5
  213. \endtable
  214. */
  215. property alias color: dps.color
  216. /*!
  217. \internal
  218. Starting Qt 5.6, this property has no effect. It is left here
  219. for source compatibility only.
  220. ### Qt 6: remove
  221. */
  222. property bool fast: false
  223. /*!
  224. This property allows the effect output pixels to be cached in order to
  225. improve the rendering performance.
  226. Every time the source or effect properties are changed, the pixels in
  227. the cache must be updated. Memory consumption is increased, because an
  228. extra buffer of memory is required for storing the effect output.
  229. It is recommended to disable the cache when the source or the effect
  230. properties are animated.
  231. By default, the property is set to \c false.
  232. */
  233. property alias cached: dps.cached
  234. /*!
  235. This property determines whether or not the effect has a transparent
  236. border.
  237. When set to \c true, the exterior of the item is padded with a
  238. transparent edge, making sampling outside the source texture use
  239. transparency instead of the edge pixels. Without this property, an
  240. image which has opaque edges will not get a blurred edge.
  241. By default, the property is set to \c true. Set it to false if the source
  242. already has a transparent edge to make the blurring a tiny bit faster.
  243. In the snippet below, the Rectangle on the left has transparent borders
  244. and has blurred edges, whereas the Rectangle on the right does not.
  245. \snippet Glow-transparentBorder-example.qml example
  246. \image Glow-transparentBorder.png
  247. */
  248. property alias transparentBorder: dps.transparentBorder
  249. }