RectangularGlow.qml 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  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 RectangularGlow
  8. \inqmlmodule Qt5Compat.GraphicalEffects
  9. \since QtGraphicalEffects 1.0
  10. \inherits QtQuick2::Item
  11. \ingroup qtgraphicaleffects-glow
  12. \brief Generates a blurred and colorized rectangle, which gives
  13. the impression that the source is glowing.
  14. This effect is intended to have good performance. The shape of the glow is
  15. limited to a rectangle with a custom corner radius. For situations where
  16. custom shapes are required, consider \l[QML]{Glow} effect.
  17. \table
  18. \header
  19. \li Effect applied
  20. \row
  21. \li \image RectangularGlow_applied.png
  22. \endtable
  23. \section1 Example
  24. The following example shows how to apply the effect.
  25. \snippet RectangularGlow-example.qml example
  26. */
  27. Item {
  28. id: rootItem
  29. /*!
  30. This property defines how many pixels outside the item area are reached
  31. by the glow.
  32. The value ranges from 0.0 (no glow) to inf (infinite glow). By default,
  33. the property is set to \c 0.0.
  34. \table
  35. \header
  36. \li Output examples with different glowRadius values
  37. \li
  38. \li
  39. \row
  40. \li \image RectangularGlow_glowRadius1.png
  41. \li \image RectangularGlow_glowRadius2.png
  42. \li \image RectangularGlow_glowRadius3.png
  43. \row
  44. \li \b { glowRadius: 10 }
  45. \li \b { glowRadius: 20 }
  46. \li \b { glowRadius: 40 }
  47. \row
  48. \li \l spread: 0
  49. \li \l spread: 0
  50. \li \l spread: 0
  51. \row
  52. \li \l color: #ffffff
  53. \li \l color: #ffffff
  54. \li \l color: #ffffff
  55. \row
  56. \li \l cornerRadius: 25
  57. \li \l cornerRadius: 25
  58. \li \l cornerRadius: 25
  59. \endtable
  60. */
  61. property real glowRadius: 0.0
  62. /*!
  63. This property defines how large part of the glow color is strengthened
  64. near the source edges.
  65. The value ranges from 0.0 (no strength increase) to 1.0 (maximum
  66. strength increase). By default, the property is set to \c 0.0.
  67. \table
  68. \header
  69. \li Output examples with different spread values
  70. \li
  71. \li
  72. \row
  73. \li \image RectangularGlow_spread1.png
  74. \li \image RectangularGlow_spread2.png
  75. \li \image RectangularGlow_spread3.png
  76. \row
  77. \li \b { spread: 0.0 }
  78. \li \b { spread: 0.5 }
  79. \li \b { spread: 1.0 }
  80. \row
  81. \li \l glowRadius: 20
  82. \li \l glowRadius: 20
  83. \li \l glowRadius: 20
  84. \row
  85. \li \l color: #ffffff
  86. \li \l color: #ffffff
  87. \li \l color: #ffffff
  88. \row
  89. \li \l cornerRadius: 25
  90. \li \l cornerRadius: 25
  91. \li \l cornerRadius: 25
  92. \endtable
  93. */
  94. property real spread: 0.0
  95. /*!
  96. This property defines the RGBA color value which is used for the glow.
  97. By default, the property is set to \c "white".
  98. \table
  99. \header
  100. \li Output examples with different color values
  101. \li
  102. \li
  103. \row
  104. \li \image RectangularGlow_color1.png
  105. \li \image RectangularGlow_color2.png
  106. \li \image RectangularGlow_color3.png
  107. \row
  108. \li \b { color: #ffffff }
  109. \li \b { color: #55ff55 }
  110. \li \b { color: #5555ff }
  111. \row
  112. \li \l glowRadius: 20
  113. \li \l glowRadius: 20
  114. \li \l glowRadius: 20
  115. \row
  116. \li \l spread: 0
  117. \li \l spread: 0
  118. \li \l spread: 0
  119. \row
  120. \li \l cornerRadius: 25
  121. \li \l cornerRadius: 25
  122. \li \l cornerRadius: 25
  123. \endtable
  124. */
  125. property color color: "white"
  126. /*!
  127. This property defines the corner radius that is used to draw a glow with
  128. rounded corners.
  129. The value ranges from 0.0 to half of the effective width or height of
  130. the glow, whichever is smaller. This can be calculated with: \c{
  131. min(width, height) / 2.0 + glowRadius}
  132. By default, the property is bound to glowRadius property. The glow
  133. behaves as if the rectangle was blurred when adjusting the glowRadius
  134. property.
  135. \table
  136. \header
  137. \li Output examples with different cornerRadius values
  138. \li
  139. \li
  140. \row
  141. \li \image RectangularGlow_cornerRadius1.png
  142. \li \image RectangularGlow_cornerRadius2.png
  143. \li \image RectangularGlow_cornerRadius3.png
  144. \row
  145. \li \b { cornerRadius: 0 }
  146. \li \b { cornerRadius: 25 }
  147. \li \b { cornerRadius: 50 }
  148. \row
  149. \li \l glowRadius: 20
  150. \li \l glowRadius: 20
  151. \li \l glowRadius: 20
  152. \row
  153. \li \l spread: 0
  154. \li \l spread: 0
  155. \li \l spread: 0
  156. \row
  157. \li \l color: #ffffff
  158. \li \l color: #ffffff
  159. \li \l color: #ffffff
  160. \endtable
  161. */
  162. property real cornerRadius: glowRadius
  163. /*!
  164. This property allows the effect output pixels to be cached in order to
  165. improve the rendering performance.
  166. Every time the source or effect properties are changed, the pixels in
  167. the cache must be updated. Memory consumption is increased, because an
  168. extra buffer of memory is required for storing the effect output.
  169. It is recommended to disable the cache when the source or the effect
  170. properties are animated.
  171. By default, the property is set to \c false.
  172. */
  173. property bool cached: false
  174. ShaderEffectSource {
  175. id: cacheItem
  176. anchors.fill: shaderItem
  177. visible: rootItem.cached
  178. smooth: true
  179. sourceItem: shaderItem
  180. live: true
  181. hideSource: visible
  182. }
  183. ShaderEffect {
  184. id: shaderItem
  185. x: (parent.width - width) / 2.0
  186. y: (parent.height - height) / 2.0
  187. width: parent.width + rootItem.glowRadius * 2 + cornerRadius * 2
  188. height: parent.height + rootItem.glowRadius * 2 + cornerRadius * 2
  189. function clampedCornerRadius() {
  190. var maxCornerRadius = Math.min(rootItem.width, rootItem.height) / 2 + glowRadius;
  191. return Math.max(0, Math.min(rootItem.cornerRadius, maxCornerRadius))
  192. }
  193. property color color: rootItem.color
  194. property real inverseSpread: 1.0 - rootItem.spread
  195. property real relativeSizeX: ((inverseSpread * inverseSpread) * rootItem.glowRadius + cornerRadius * 2.0) / width
  196. property real relativeSizeY: relativeSizeX * (width / height)
  197. property real spread: rootItem.spread / 2.0
  198. property real cornerRadius: clampedCornerRadius()
  199. fragmentShader: "qrc:/qt-project.org/imports/Qt5Compat/GraphicalEffects/shaders_ng/rectangularglow.frag.qsb"
  200. }
  201. }