InnerShadow.qml 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
  1. // Copyright (C) 2022 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 InnerShadow
  8. \inqmlmodule Qt5Compat.GraphicalEffects
  9. \since QtGraphicalEffects 1.0
  10. \inherits QtQuick2::Item
  11. \ingroup qtgraphicaleffects-drop-shadow
  12. \brief Generates a colorized and blurred shadow inside the
  13. source.
  14. By default the effect produces a high quality shadow image, thus the
  15. rendering speed of the shadow might not be the highest possible. The
  16. rendering speed is reduced especially if the shadow edges are heavily
  17. softened. For use cases that require faster rendering speed and for which
  18. the highest possible visual quality is not necessary, property
  19. \l{InnerShadow::fast}{fast} can be set to true.
  20. \table
  21. \header
  22. \li Source
  23. \li Effect applied
  24. \row
  25. \li \image Original_butterfly.png
  26. \li \image InnerShadow_butterfly.png
  27. \endtable
  28. \note This effect is available when running with OpenGL.
  29. \section1 Example
  30. The following example shows how to apply the effect.
  31. \snippet InnerShadow-example.qml example
  32. */
  33. Item {
  34. id: rootItem
  35. /*!
  36. This property defines the source item that is going to be used as the
  37. source for the generated shadow.
  38. \note It is not supported to let the effect include itself, for
  39. instance by setting source to the effect's parent.
  40. */
  41. property variant source
  42. /*!
  43. Radius defines the softness of the shadow. A larger radius causes the
  44. edges of the shadow to appear more blurry.
  45. Depending on the radius value, value of the
  46. \l{InnerShadow::samples}{samples} should be set to sufficiently large to
  47. ensure the visual quality.
  48. The value ranges from 0.0 (no blur) to inf. By default, the property is
  49. set to \c 0.0 (no blur).
  50. \table
  51. \header
  52. \li Output examples with different radius values
  53. \li
  54. \li
  55. \row
  56. \li \image InnerShadow_radius1.png
  57. \li \image InnerShadow_radius2.png
  58. \li \image InnerShadow_radius3.png
  59. \row
  60. \li \b { radius: 0 }
  61. \li \b { radius: 6 }
  62. \li \b { radius: 12 }
  63. \row
  64. \li \l samples: 24
  65. \li \l samples: 24
  66. \li \l samples: 24
  67. \row
  68. \li \l color: #000000
  69. \li \l color: #000000
  70. \li \l color: #000000
  71. \row
  72. \li \l horizontalOffset: 0
  73. \li \l horizontalOffset: 0
  74. \li \l horizontalOffset: 0
  75. \row
  76. \li \l verticalOffset: 0
  77. \li \l verticalOffset: 0
  78. \li \l verticalOffset: 0
  79. \row
  80. \li \l spread: 0
  81. \li \l spread: 0
  82. \li \l spread: 0
  83. \endtable
  84. */
  85. property real radius: 0.0
  86. /*!
  87. This property defines how many samples are taken per pixel when edge
  88. softening blur calculation is done. Larger value produces better
  89. quality, but is slower to render.
  90. Ideally, this value should be twice as large as the highest required
  91. radius value, for example, if the radius is animated between 0.0 and
  92. 4.0, samples should be set to 8.
  93. The value ranges from 0 to 32. By default, the property is set to \c 0.
  94. This property is not intended to be animated. Changing this property may
  95. cause the underlying OpenGL shaders to be recompiled.
  96. When \l{InnerShadow::fast}{fast} property is set to true, this property
  97. has no effect.
  98. */
  99. property int samples: 0
  100. /*!
  101. This property defines how large part of the shadow color is strengthened
  102. near the source edges.
  103. The value ranges from 0.0 to 1.0. By default, the property is set to \c
  104. 0.5.
  105. \table
  106. \header
  107. \li Output examples with different spread values
  108. \li
  109. \li
  110. \row
  111. \li \image InnerShadow_spread1.png
  112. \li \image InnerShadow_spread2.png
  113. \li \image InnerShadow_spread3.png
  114. \row
  115. \li \b { spread: 0.0 }
  116. \li \b { spread: 0.3 }
  117. \li \b { spread: 0.5 }
  118. \row
  119. \li \l radius: 16
  120. \li \l radius: 16
  121. \li \l radius: 16
  122. \row
  123. \li \l samples: 24
  124. \li \l samples: 24
  125. \li \l samples: 24
  126. \row
  127. \li \l color: #000000
  128. \li \l color: #000000
  129. \li \l color: #000000
  130. \row
  131. \li \l horizontalOffset: 0
  132. \li \l horizontalOffset: 0
  133. \li \l horizontalOffset: 0
  134. \row
  135. \li \l verticalOffset: 0
  136. \li \l verticalOffset: 0
  137. \li \l verticalOffset: 0
  138. \endtable
  139. */
  140. property real spread: 0.0
  141. /*!
  142. This property defines the RGBA color value which is used for the shadow.
  143. By default, the property is set to \c "black".
  144. \table
  145. \header
  146. \li Output examples with different color values
  147. \li
  148. \li
  149. \row
  150. \li \image InnerShadow_color1.png
  151. \li \image InnerShadow_color2.png
  152. \li \image InnerShadow_color3.png
  153. \row
  154. \li \b { color: #000000 }
  155. \li \b { color: #ffffff }
  156. \li \b { color: #ff0000 }
  157. \row
  158. \li \l radius: 16
  159. \li \l radius: 16
  160. \li \l radius: 16
  161. \row
  162. \li \l samples: 24
  163. \li \l samples: 24
  164. \li \l samples: 24
  165. \row
  166. \li \l horizontalOffset: 0
  167. \li \l horizontalOffset: 0
  168. \li \l horizontalOffset: 0
  169. \row
  170. \li \l verticalOffset: 0
  171. \li \l verticalOffset: 0
  172. \li \l verticalOffset: 0
  173. \row
  174. \li \l spread: 0.2
  175. \li \l spread: 0.2
  176. \li \l spread: 0.2
  177. \endtable
  178. */
  179. property color color: "black"
  180. /*!
  181. \qmlproperty real QtGraphicalEffects::InnerShadow::horizontalOffset
  182. \qmlproperty real QtGraphicalEffects::InnerShadow::verticalOffset
  183. HorizontalOffset and verticalOffset properties define the offset for the
  184. rendered shadow compared to the InnerShadow item position. Often, the
  185. InnerShadow item is anchored so that it fills the source element. In
  186. this case, if the HorizontalOffset and verticalOffset properties are set
  187. to 0, the shadow is rendered fully inside the source item. By changing
  188. the offset properties, the shadow can be positioned relatively to the
  189. source item.
  190. The values range from -inf to inf. By default, the properties are set to
  191. \c 0.
  192. \table
  193. \header
  194. \li Output examples with different horizontalOffset values
  195. \li
  196. \li
  197. \row
  198. \li \image InnerShadow_horizontalOffset1.png
  199. \li \image InnerShadow_horizontalOffset2.png
  200. \li \image InnerShadow_horizontalOffset3.png
  201. \row
  202. \li \b { horizontalOffset: -20 }
  203. \li \b { horizontalOffset: 0 }
  204. \li \b { horizontalOffset: 20 }
  205. \row
  206. \li \l radius: 16
  207. \li \l radius: 16
  208. \li \l radius: 16
  209. \row
  210. \li \l samples: 24
  211. \li \l samples: 24
  212. \li \l samples: 24
  213. \row
  214. \li \l color: #000000
  215. \li \l color: #000000
  216. \li \l color: #000000
  217. \row
  218. \li \l verticalOffset: 0
  219. \li \l verticalOffset: 0
  220. \li \l verticalOffset: 0
  221. \row
  222. \li \l spread: 0
  223. \li \l spread: 0
  224. \li \l spread: 0
  225. \endtable
  226. */
  227. property real horizontalOffset: 0
  228. property real verticalOffset: 0
  229. /*!
  230. This property selects the blurring algorithm that is used to produce the
  231. softness for the effect. Setting this to true enables fast algorithm,
  232. setting value to false produces higher quality result.
  233. By default, the property is set to \c false.
  234. \table
  235. \header
  236. \li Output examples with different fast values
  237. \li
  238. \li
  239. \row
  240. \li \image InnerShadow_fast1.png
  241. \li \image InnerShadow_fast2.png
  242. \row
  243. \li \b { fast: false }
  244. \li \b { fast: true }
  245. \row
  246. \li \l radius: 16
  247. \li \l radius: 16
  248. \row
  249. \li \l samples: 24
  250. \li \l samples: 24
  251. \row
  252. \li \l color: #000000
  253. \li \l color: #000000
  254. \row
  255. \li \l horizontalOffset: 0
  256. \li \l horizontalOffset: 0
  257. \row
  258. \li \l verticalOffset: 0
  259. \li \l verticalOffset: 0
  260. \row
  261. \li \l spread: 0.2
  262. \li \l spread: 0.2
  263. \endtable
  264. */
  265. property bool fast: false
  266. /*!
  267. This property allows the effect output pixels to be cached in order to
  268. improve the rendering performance. Every time the source or effect
  269. properties are changed, the pixels in the cache must be updated. Memory
  270. consumption is increased, because an extra buffer of memory is required
  271. for storing the effect output.
  272. It is recommended to disable the cache when the source or the effect
  273. properties are animated.
  274. By default, the property is set to \c false.
  275. */
  276. property bool cached: false
  277. Loader {
  278. anchors.fill: parent
  279. sourceComponent: rootItem.fast ? innerShadow : gaussianInnerShadow
  280. }
  281. Component {
  282. id: gaussianInnerShadow
  283. GaussianInnerShadow {
  284. anchors.fill: parent
  285. source: rootItem.source
  286. radius: rootItem.radius
  287. maximumRadius: rootItem.samples * 0.5
  288. color: rootItem.color
  289. cached: rootItem.cached
  290. spread: rootItem.spread
  291. horizontalOffset: rootItem.horizontalOffset
  292. verticalOffset: rootItem.verticalOffset
  293. }
  294. }
  295. Component {
  296. id: innerShadow
  297. FastInnerShadow {
  298. anchors.fill: parent
  299. source: rootItem.source
  300. blur: Math.pow(rootItem.radius / 64.0, 0.4)
  301. color: rootItem.color
  302. cached: rootItem.cached
  303. spread: rootItem.spread
  304. horizontalOffset: rootItem.horizontalOffset
  305. verticalOffset: rootItem.verticalOffset
  306. }
  307. }
  308. }