Glow.qml 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. // Copyright (C) 2020 The Qt Company Ltd.
  2. // Copyright (C) 2017 Jolla Ltd, author: <gunnar.sletta@jollamobile.com>
  3. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
  4. // Qt-Security score:significant reason:default
  5. import QtQuick
  6. import Qt5Compat.GraphicalEffects.private
  7. /*!
  8. \qmltype Glow
  9. \inqmlmodule Qt5Compat.GraphicalEffects
  10. \since QtGraphicalEffects 1.0
  11. \inherits QtQuick2::Item
  12. \ingroup qtgraphicaleffects-glow
  13. \brief Generates a blurred and colorized image of the source and places it
  14. behind the original, giving impression that the source is glowing.
  15. \table
  16. \header
  17. \li Source
  18. \li Effect applied
  19. \row
  20. \li \image Original_butterfly_black.png
  21. \li \image Glow_butterfly.png
  22. \endtable
  23. \section1 Example
  24. The following example shows how to apply the effect.
  25. \snippet Glow-example.qml example
  26. */
  27. Item {
  28. id: root
  29. DropShadowBase {
  30. id: dps
  31. anchors.fill: parent
  32. color: "white"
  33. spread: 0.5
  34. horizontalOffset: 0
  35. verticalOffset: 0
  36. }
  37. /*!
  38. This property defines the source item that is going to be used as source
  39. for the generated glow.
  40. \note It is not supported to let the effect include itself, for
  41. instance by setting source to the effect's parent.
  42. */
  43. property alias source: dps.source
  44. /*!
  45. Radius defines the softness of the glow. A larger radius causes the
  46. edges of the glow to appear more blurry.
  47. Depending on the radius value, value of the \l{Glow::samples}{samples}
  48. should be set to sufficiently large to ensure the visual quality.
  49. The ideal blur is achieved by selecting \c samples and \c radius such
  50. that \c {samples = 1 + radius * 2}, such as:
  51. \table
  52. \header \li Radius \li Samples
  53. \row \li 0 \e{(no blur)} \li 1
  54. \row \li 1 \li 3
  55. \row \li 2 \li 5
  56. \row \li 3 \li 7
  57. \endtable
  58. By default, the property is set to \c {floor(samples/2)}.
  59. \table
  60. \header
  61. \li Output examples with different radius values
  62. \li
  63. \li
  64. \row
  65. \li \image Glow_radius1.png
  66. \li \image Glow_radius2.png
  67. \li \image Glow_radius3.png
  68. \row
  69. \li \b { radius: 0 }
  70. \li \b { radius: 6 }
  71. \li \b { radius: 12 }
  72. \row
  73. \li \l samples: 25
  74. \li \l samples: 25
  75. \li \l samples: 25
  76. \row
  77. \li \l color: #ffffff
  78. \li \l color: #ffffff
  79. \li \l color: #ffffff
  80. \row
  81. \li \l spread: 0
  82. \li \l spread: 0
  83. \li \l spread: 0
  84. \endtable
  85. */
  86. property alias radius: dps.radius
  87. /*!
  88. This property defines how many samples are taken per pixel when edge
  89. softening blur calculation is done. Larger value produces better
  90. quality, but is slower to render.
  91. Ideally, this value should be twice as large as the highest required
  92. radius value plus one, such as:
  93. \table
  94. \header \li Radius \li Samples
  95. \row \li 0 \e{(no blur)} \li 1
  96. \row \li 1 \li 3
  97. \row \li 2 \li 5
  98. \row \li 3 \li 7
  99. \endtable
  100. By default, the property is set to \c 9.
  101. This property is not intended to be animated. Changing this property will
  102. cause the underlying OpenGL shaders to be recompiled.
  103. */
  104. property alias samples: dps.samples
  105. /*!
  106. This property defines how large part of the glow color is strengthened
  107. near the source edges.
  108. The values range from 0.0 to 1.0. By default, the property is set to \c
  109. 0.5.
  110. \note The implementation is optimized for medium and low spread values.
  111. Depending on the source, spread values closer to 1.0 may yield visually
  112. asymmetrical results.
  113. \table
  114. \header
  115. \li Output examples with different spread values
  116. \li
  117. \li
  118. \row
  119. \li \image Glow_spread1.png
  120. \li \image Glow_spread2.png
  121. \li \image Glow_spread3.png
  122. \row
  123. \li \b { spread: 0.0 }
  124. \li \b { spread: 0.5 }
  125. \li \b { spread: 1.0 }
  126. \row
  127. \li \l radius: 8
  128. \li \l radius: 8
  129. \li \l radius: 8
  130. \row
  131. \li \l samples: 17
  132. \li \l samples: 17
  133. \li \l samples: 17
  134. \row
  135. \li \l color: #ffffff
  136. \li \l color: #ffffff
  137. \li \l color: #ffffff
  138. \endtable
  139. */
  140. property alias spread: dps.spread
  141. /*!
  142. This property defines the RGBA color value which is used for the glow.
  143. By default, the property is set to \c "white".
  144. \table
  145. \header
  146. \li Output examples with different color values
  147. \li
  148. \li
  149. \row
  150. \li \image Glow_color1.png
  151. \li \image Glow_color2.png
  152. \li \image Glow_color3.png
  153. \row
  154. \li \b { color: #ffffff }
  155. \li \b { color: #00ff00 }
  156. \li \b { color: #aa00ff00 }
  157. \row
  158. \li \l radius: 8
  159. \li \l radius: 8
  160. \li \l radius: 8
  161. \row
  162. \li \l samples: 17
  163. \li \l samples: 17
  164. \li \l samples: 17
  165. \row
  166. \li \l spread: 0.5
  167. \li \l spread: 0.5
  168. \li \l spread: 0.5
  169. \endtable
  170. */
  171. property alias color: dps.color
  172. /*!
  173. \internal
  174. Starting Qt 5.6, this property has no effect. It is left here
  175. for source compatibility only.
  176. ### Qt 6: remove
  177. */
  178. property bool fast: false
  179. /*!
  180. This property allows the effect output pixels to be cached in order to
  181. improve the rendering performance.
  182. Every time the source or effect properties are changed, the pixels in
  183. the cache must be updated. Memory consumption is increased, because an
  184. extra buffer of memory is required for storing the effect output.
  185. It is recommended to disable the cache when the source or the effect
  186. properties are animated.
  187. By default, the property is set to \c false.
  188. */
  189. property alias cached: dps.cached
  190. /*!
  191. This property determines whether or not the effect has a transparent
  192. border.
  193. When set to \c true, the exterior of the item is padded with a
  194. transparent edge, making sampling outside the source texture use
  195. transparency instead of the edge pixels. Without this property, an
  196. image which has opaque edges will not get a blurred edge.
  197. By default, the property is set to \c true. Set it to false if the source
  198. already has a transparent edge to make the blurring a tiny bit faster.
  199. In the snippet below, the Rectangle on the left has transparent borders
  200. and has blurred edges, whereas the Rectangle on the right does not.
  201. \snippet Glow-transparentBorder-example.qml example
  202. \image Glow-transparentBorder.png
  203. */
  204. property alias transparentBorder: dps.transparentBorder
  205. }