InnerShadow.qml 12 KB

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