Doc: add example snippets for containmentMask

This shows how to use non-rectangular shapes for hit tests,
as well as how to define the contains function in QML.

Task-number: QTBUG-89380
Change-Id: I93c686d840b292816a788c05a0a76fafa338d5f8
Reviewed-by: Venugopal Shivashankar <Venugopal.Shivashankar@qt.io>
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
(cherry picked from commit 382d2bfe5f261c269ccf4b970c826003c90d57ae)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>

1 files changed, 20 insertions, 4 deletions

diff --git a/src/quick/items/qquickitem.cpp b/src/quick/items/qquickitem.cpp
index 0363c16f7c..58b7da4b6a 100644
--- a/src/quick/items/qquickitem.cpp
+++ b/src/quick/items/qquickitem.cpp
@@ -7887,10 +7887,26 @@ bool QQuickItem::contains(const QPointF &point) const
     \e{item}'s contains method would then return \c true only if
     \e{anotherItem}'s contains() implementation returns \c true.
 
-    A \l Shape can be used in this way, to make an item react to
-    \l {QPointerEvent}{pointer events} only within a non-rectangular region,
-    as illustrated in the \l {Qt Quick Examples - Shapes}{Shapes example}
-    (see \c tapableTriangle.qml).
+    A \l Shape can be used as a mask, to make an item react to
+    \l {QPointerEvent}{pointer events} only within a non-rectangular region:
+
+    \table
+    \row
+    \li \image containmentMask-shape.gif
+    \li \snippet qml/item/containmentMask-shape.qml 0
+    \endtable
+
+    It is also possible to define the contains method in QML. For example,
+    to create a circular item that only responds to events within its
+    actual bounds:
+
+    \table
+    \row
+    \li \image containmentMask-circle.gif
+    \li \snippet qml/item/containmentMask-circle-js.qml 0
+    \endtable
+
+    \sa {Qt Quick Examples - Shapes}
 */
 /*!
     \property QQuickItem::containmentMask