DropShadow.qml 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355
  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 DropShadow
  9. \inqmlmodule Qt5Compat.GraphicalEffects
  10. \since QtGraphicalEffects 1.0
  11. \inherits QtQuick2::Item
  12. \ingroup qtgraphicaleffects-drop-shadow
  13. \brief Generates a soft shadow behind the source item.
  14. The DropShadow effect blurs the alpha channel of the input, colorizes the
  15. result and places it behind the source object to create a soft shadow. The
  16. shadow's color can be changed using the \l {DropShadow::color}{color}
  17. property. The location of the shadow can be changed with the \l
  18. horizontalOffset and \l verticalOffset properties.
  19. \table
  20. \header
  21. \li Source
  22. \li Effect applied
  23. \row
  24. \li \image Original_butterfly.png
  25. \li \image DropShadow_butterfly.png
  26. \endtable
  27. The soft shadow is created by blurring the image live using a gaussian
  28. blur. Performing blur live is a costly operation. Fullscreen gaussian blur
  29. with even a moderate number of samples will only run at 60 fps on highend
  30. graphics hardware.
  31. When the source is static, the \l cached property can be set to allocate
  32. another buffer to avoid performing the blur every time it is drawn.
  33. \note This effect is available when running with OpenGL.
  34. \section1 Example
  35. The following example shows how to apply the effect.
  36. \snippet DropShadow-example.qml example
  37. */
  38. Item {
  39. id: root
  40. DropShadowBase {
  41. id: dbs
  42. anchors.fill: parent
  43. }
  44. /*!
  45. This property defines the source item that is going to be used as the
  46. source for the generated shadow.
  47. \note It is not supported to let the effect include itself, for
  48. instance by setting source to the effect's parent.
  49. */
  50. property alias source: dbs.source
  51. /*!
  52. \qmlproperty int DropShadow::radius
  53. Radius defines the softness of the shadow. A larger radius causes the
  54. edges of the shadow to appear more blurry.
  55. The ideal blur is achieved by selecting \c samples and \c radius such
  56. that \c {samples = 1 + radius * 2}, such as:
  57. \table
  58. \header \li Radius \li Samples
  59. \row \li 0 \e{(no blur)} \li 1
  60. \row \li 1 \li 3
  61. \row \li 2 \li 5
  62. \row \li 3 \li 7
  63. \endtable
  64. By default, the property is set to \c {floor(samples/2)}.
  65. \table
  66. \header
  67. \li Output examples with different radius values
  68. \li
  69. \li
  70. \row
  71. \li \image DropShadow_radius1.png
  72. \li \image DropShadow_radius2.png
  73. \li \image DropShadow_radius3.png
  74. \row
  75. \li \b { radius: 0 }
  76. \li \b { radius: 6 }
  77. \li \b { radius: 12 }
  78. \row
  79. \li \l samples: 25
  80. \li \l samples: 25
  81. \li \l samples: 25
  82. \row
  83. \li \l color: #000000
  84. \li \l color: #000000
  85. \li \l color: #000000
  86. \row
  87. \li \l horizontalOffset: 0
  88. \li \l horizontalOffset: 0
  89. \li \l horizontalOffset: 0
  90. \row
  91. \li \l verticalOffset: 20
  92. \li \l verticalOffset: 20
  93. \li \l verticalOffset: 20
  94. \row
  95. \li \l spread: 0
  96. \li \l spread: 0
  97. \li \l spread: 0
  98. \endtable
  99. */
  100. property alias radius: dbs.radius;
  101. /*!
  102. This property defines how many samples are taken per pixel when edge
  103. softening blur calculation is done. Larger value produces better
  104. quality, but is slower to render.
  105. Ideally, this value should be twice as large as the highest required
  106. radius value plus one, such as:
  107. \table
  108. \header \li Radius \li Samples
  109. \row \li 0 \e{(no blur)} \li 1
  110. \row \li 1 \li 3
  111. \row \li 2 \li 5
  112. \row \li 3 \li 7
  113. \endtable
  114. By default, the property is set to \c 9.
  115. This property is not intended to be animated. Changing this property will
  116. cause the underlying OpenGL shaders to be recompiled.
  117. */
  118. property alias samples: dbs.samples
  119. /*!
  120. This property defines the RGBA color value which is used for the shadow.
  121. By default, the property is set to \c "black".
  122. \table
  123. \header
  124. \li Output examples with different color values
  125. \li
  126. \li
  127. \row
  128. \li \image DropShadow_color1.png
  129. \li \image DropShadow_color2.png
  130. \li \image DropShadow_color3.png
  131. \row
  132. \li \b { color: #000000 }
  133. \li \b { color: #0000ff }
  134. \li \b { color: #aa000000 }
  135. \row
  136. \li \l radius: 8
  137. \li \l radius: 8
  138. \li \l radius: 8
  139. \row
  140. \li \l samples: 17
  141. \li \l samples: 17
  142. \li \l samples: 17
  143. \row
  144. \li \l horizontalOffset: 0
  145. \li \l horizontalOffset: 0
  146. \li \l horizontalOffset: 0
  147. \row
  148. \li \l verticalOffset: 20
  149. \li \l verticalOffset: 20
  150. \li \l verticalOffset: 20
  151. \row
  152. \li \l spread: 0
  153. \li \l spread: 0
  154. \li \l spread: 0
  155. \endtable
  156. */
  157. property alias color: dbs.color
  158. /*!
  159. \qmlproperty real QtGraphicalEffects::DropShadow::horizontalOffset
  160. \qmlproperty real QtGraphicalEffects::DropShadow::verticalOffset
  161. HorizontalOffset and verticalOffset properties define the offset for the
  162. rendered shadow compared to the DropShadow item position. Often, the
  163. DropShadow item is anchored so that it fills the source element. In this
  164. case, if the HorizontalOffset and verticalOffset properties are set to
  165. 0, the shadow is rendered exactly under the source item. By changing the
  166. offset properties, the shadow can be positioned relatively to the source
  167. item.
  168. The values range from -inf to inf. By default, the properties are set to
  169. \c 0.
  170. \table
  171. \header
  172. \li Output examples with different horizontalOffset values
  173. \li
  174. \li
  175. \row
  176. \li \image DropShadow_horizontalOffset1.png
  177. \li \image DropShadow_horizontalOffset2.png
  178. \li \image DropShadow_horizontalOffset3.png
  179. \row
  180. \li \b { horizontalOffset: -20 }
  181. \li \b { horizontalOffset: 0 }
  182. \li \b { horizontalOffset: 20 }
  183. \row
  184. \li \l radius: 4
  185. \li \l radius: 4
  186. \li \l radius: 4
  187. \row
  188. \li \l samples: 9
  189. \li \l samples: 9
  190. \li \l samples: 9
  191. \row
  192. \li \l color: #000000
  193. \li \l color: #000000
  194. \li \l color: #000000
  195. \row
  196. \li \l verticalOffset: 0
  197. \li \l verticalOffset: 0
  198. \li \l verticalOffset: 0
  199. \row
  200. \li \l spread: 0
  201. \li \l spread: 0
  202. \li \l spread: 0
  203. \endtable
  204. \table
  205. \header
  206. \li Output examples with different verticalOffset values
  207. \li
  208. \li
  209. \row
  210. \li \image DropShadow_horizontalOffset2.png
  211. \li \image DropShadow_spread1.png
  212. \row
  213. \li \b { horizontalOffset: 0 }
  214. \li \b { horizontalOffset: 0 }
  215. \row
  216. \li \l radius: 4
  217. \li \l radius: 8
  218. \row
  219. \li \l samples: 9
  220. \li \l samples: 17
  221. \row
  222. \li \l color: #000000
  223. \li \l color: #000000
  224. \row
  225. \li \l verticalOffset: 0
  226. \li \l verticalOffset: 20
  227. \row
  228. \li \l spread: 0
  229. \li \l spread: 0
  230. \endtable
  231. */
  232. property alias horizontalOffset: dbs.horizontalOffset
  233. property alias verticalOffset: dbs.verticalOffset
  234. /*!
  235. This property defines how large part of the shadow color is strengthened
  236. near the source edges.
  237. The value ranges from 0.0 to 1.0. By default, the property is set to \c
  238. 0.0.
  239. \table
  240. \header
  241. \li Output examples with different spread values
  242. \li
  243. \li
  244. \row
  245. \li \image DropShadow_spread1.png
  246. \li \image DropShadow_spread2.png
  247. \li \image DropShadow_spread3.png
  248. \row
  249. \li \b { spread: 0.0 }
  250. \li \b { spread: 0.5 }
  251. \li \b { spread: 1.0 }
  252. \row
  253. \li \l radius: 8
  254. \li \l radius: 8
  255. \li \l radius: 8
  256. \row
  257. \li \l samples: 17
  258. \li \l samples: 17
  259. \li \l samples: 17
  260. \row
  261. \li \l color: #000000
  262. \li \l color: #000000
  263. \li \l color: #000000
  264. \row
  265. \li \l horizontalOffset: 0
  266. \li \l horizontalOffset: 0
  267. \li \l horizontalOffset: 0
  268. \row
  269. \li \l verticalOffset: 20
  270. \li \l verticalOffset: 20
  271. \li \l verticalOffset: 20
  272. \endtable
  273. */
  274. property alias spread: dbs.spread
  275. /*!
  276. \internal
  277. Starting Qt 5.6, this property has no effect. It is left here
  278. for source compatibility only.
  279. ### Qt 6: remove
  280. */
  281. property bool fast: false
  282. /*!
  283. This property allows the effect output pixels to be cached in order to
  284. improve the rendering performance. Every time the source or effect
  285. properties are changed, the pixels in the cache must be updated. Memory
  286. consumption is increased, because an extra buffer of memory is required
  287. for storing the effect output.
  288. It is recommended to disable the cache when the source or the effect
  289. properties are animated.
  290. By default, the property is set to \c false.
  291. */
  292. property alias cached: dbs.cached
  293. /*!
  294. This property determines whether or not the effect has a transparent
  295. border.
  296. When set to \c true, the exterior of the item is padded with a 1 pixel
  297. wide transparent edge, making sampling outside the source texture use
  298. transparency instead of the edge pixels. Without this property, an
  299. image which has opaque edges will not get a blurred shadow.
  300. In the image below, the Rectangle on the left has transparent borders
  301. and has blurred edges, whereas the Rectangle on the right does not:
  302. By default, this property is set to \c true.
  303. \snippet DropShadow-transparentBorder-example.qml example
  304. \image DropShadow-transparentBorder.png
  305. */
  306. property alias transparentBorder: dbs.transparentBorder
  307. }