DropShadow.qml 12 KB

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